Neon-Desk/components/analysis/price-history-card.tsx

'use client';

import { format } from 'date-fns';
import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { Panel } from '@/components/ui/panel';
import { formatCurrency } from '@/lib/format';

type PriceHistoryCardProps = {
  loading: boolean;
  priceHistory: Array<{ date: string; close: number }>;
  quote: number;
};

const CHART_TEXT = '#f3f5f7';
const CHART_MUTED = '#a1a9b3';
const CHART_GRID = 'rgba(196, 202, 211, 0.18)';
const CHART_TOOLTIP_BG = 'rgba(31, 34, 39, 0.96)';
const CHART_TOOLTIP_BORDER = 'rgba(220, 226, 234, 0.24)';

function formatShortDate(value: string) {
  const parsed = new Date(value);
  return Number.isNaN(parsed.getTime()) ? value : format(parsed, 'MMM yy');
}

function formatLongDate(value: string) {
  const parsed = new Date(value);
  return Number.isNaN(parsed.getTime()) ? value : format(parsed, 'MMM dd, yyyy');
}

export function PriceHistoryCard(props: PriceHistoryCardProps) {
  const series = props.priceHistory.map((point) => ({
    ...point,
    label: formatShortDate(point.date)
  }));
  const firstPoint = props.priceHistory[0] ?? null;
  const lastPoint = props.priceHistory[props.priceHistory.length - 1] ?? null;
  const change = firstPoint && lastPoint ? lastPoint.close - firstPoint.close : null;
  const changePct = firstPoint && lastPoint && firstPoint.close !== 0
    ? ((lastPoint.close - firstPoint.close) / firstPoint.close) * 100
    : null;

  return (
    <Panel
      title="Price chart"
      subtitle="One-year weekly close with current spot price and trailing move."
      className="h-full pt-2"
    >
      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_220px]">
        <div>
          {props.loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading price history...</p>
          ) : series.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No price history available.</p>
          ) : (
            <div className="h-[320px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={series}>
                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
                  <XAxis
                    dataKey="label"
                    minTickGap={32}
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                  />
                  <YAxis
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                    tickFormatter={(value: number) => `$${value.toFixed(0)}`}
                    domain={[(dataMin) => dataMin * 0.05, (dataMax) => dataMax * 1.05]}
                    allowDataOverflow
                  />
                  <Tooltip
                    formatter={(value) => formatCurrency(Array.isArray(value) ? value[0] : value)}
                    labelFormatter={(value) => String(value)}
                    contentStyle={{
                      backgroundColor: CHART_TOOLTIP_BG,
                      border: `1px solid ${CHART_TOOLTIP_BORDER}`,
                      borderRadius: '0.75rem'
                    }}
                    labelStyle={{ color: CHART_TEXT }}
                    itemStyle={{ color: CHART_TEXT }}
                    cursor={{ stroke: 'rgba(220, 226, 234, 0.28)', strokeWidth: 1 }}
                  />
                  <Line type="monotone" dataKey="close" stroke="#d9dee5" strokeWidth={2.5} dot={false} />
                </LineChart>
              </ResponsiveContainer>
            </div>
          )}
        </div>

        <div className="grid gap-0 border-t border-[color:var(--line-weak)] sm:grid-cols-3 xl:grid-cols-1 xl:border-l">
          <div className="border-b border-[color:var(--line-weak)] px-4 py-4 xl:border-b xl:border-l-0">
            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">Current price</p>
            <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(props.quote)}</p>
          </div>
          <div className="border-b border-[color:var(--line-weak)] px-4 py-4 xl:border-b">
            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">1Y change</p>
            <p className={`mt-2 text-2xl font-semibold ${change !== null && change < 0 ? 'text-[#ff9f9f]' : 'text-[#96f5bf]'}`}>
              {change === null ? 'n/a' : formatCurrency(change)}
            </p>
          </div>
          <div className="px-4 py-4">
            <p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">1Y return</p>
            <p className={`mt-2 text-2xl font-semibold ${changePct !== null && changePct < 0 ? 'text-[#ff9f9f]' : 'text-[#96f5bf]'}`}>
              {changePct === null ? 'n/a' : `${changePct.toFixed(2)}%`}
            </p>
            <p className="mt-2 text-xs text-[color:var(--terminal-muted)]">
              {firstPoint && lastPoint ? `${formatLongDate(firstPoint.date)} to ${formatLongDate(lastPoint.date)}` : 'No comparison range'}
            </p>
          </div>
        </div>
      </div>
    </Panel>
  );
}