import { useState } from 'react';
import { formatPercent, formatLargeNumber } from '../../lib/format';
import type { FundamentalResponse } from '../../lib/types';

interface FundamentalsPanelProps {
  data: FundamentalResponse;
}

const FIELD_LABELS: Record<string, string> = {
  pe_ratio: 'P/E Ratio',
  revenue_growth: 'Revenue Growth',
  earnings_surprise: 'Earnings Surprise',
  market_cap: 'Market Cap',
};

export function FundamentalsPanel({ data }: FundamentalsPanelProps) {
  const [expanded, setExpanded] = useState<boolean>(false);

  const items = [
    { key: 'pe_ratio', label: 'P/E Ratio', value: data.pe_ratio, format: (v: number) => v.toFixed(2) },
    { key: 'revenue_growth', label: 'Revenue Growth', value: data.revenue_growth, format: formatPercent },
    { key: 'earnings_surprise', label: 'Earnings Surprise', value: data.earnings_surprise, format: formatPercent },
    { key: 'market_cap', label: 'Market Cap', value: data.market_cap, format: formatLargeNumber },
  ];

  const unavailableEntries = Object.entries(data.unavailable_fields ?? {});

  return (
    <div className="glass p-5">
      <h3 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Fundamentals</h3>
      <div className="space-y-2.5 text-sm">
        {items.map((item) => {
          const reason = data.unavailable_fields?.[item.key];
          let display: React.ReactNode;
          let valueClass = 'text-gray-200';

          if (item.value !== null) {
            display = item.format(item.value);
          } else if (reason) {
            display = reason;
            valueClass = 'text-amber-400';
          } else {
            display = '—';
          }

          return (
            <div key={item.key} className="flex justify-between">
              <span className="text-gray-400">{item.label}</span>
              <span className={valueClass}>{display}</span>
            </div>
          );
        })}
      </div>

      <button
        type="button"
        onClick={() => setExpanded((prev) => !prev)}
        className="mt-3 flex w-full items-center justify-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors"
        aria-expanded={expanded}
        aria-label={expanded ? 'Collapse details' : 'Expand details'}
      >
        <svg
          className={`h-4 w-4 transition-transform ${expanded ? 'rotate-180' : ''}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {expanded && (
        <div className="mt-3 space-y-3 border-t border-white/10 pt-3">
          <div className="space-y-1 text-sm">
            <div className="flex justify-between">
              <span className="text-gray-500">Data Source</span>
              <span className="text-gray-300">FMP</span>
            </div>
            {data.fetched_at && (
              <div className="flex justify-between">
                <span className="text-gray-500">Fetched</span>
                <span className="text-gray-300">{new Date(data.fetched_at).toLocaleString()}</span>
              </div>
            )}
          </div>

          {unavailableEntries.length > 0 && (
            <div>
              <span className="text-xs font-medium uppercase tracking-widest text-gray-500">Unavailable Fields</span>
              <ul className="mt-1 space-y-1">
                {unavailableEntries.map(([field, reason]) => (
                  <li key={field} className="flex justify-between text-sm">
                    <span className="text-gray-400">{FIELD_LABELS[field] ?? field}</span>
                    <span className="text-amber-400">{reason}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}

      {!expanded && data.fetched_at && (
        <p className="mt-2 text-xs text-gray-500">
          Updated {new Date(data.fetched_at).toLocaleDateString()}
        </p>
      )}
    </div>
  );
}