import React from 'react';
import { EarningsPanelData } from '../../types/financial';
import { StatementTableMinimal, formatMoney, formatNumber, formatPercent } from '../ui/StatementTableMinimal';

interface EarningsPanelProps {
  data: EarningsPanelData;
}

const SourceAttribution: React.FC<{ status: EarningsPanelData['sourceStatus'] }> = ({ status }) => {
  return (
    <div className="text-[11px] text-[#8a8a8a] font-mono">
      SEC EDGAR • companyfacts
      {status.latestXbrlParsed ? ' • latest filing parsed with crabrl' : ''}
      {status.degradedReason && (
        <div className="mt-1 text-[#d1a254]">{status.degradedReason}</div>
      )}
    </div>
  );
};

export const EarningsPanel: React.FC<EarningsPanelProps> = ({ data }) => {
  return (
    <div className="earnings-panel py-4 overflow-auto">
      {/* Header - Minimal */}
      <header className="mb-4">
        <div className="flex items-start justify-between">
          <div>
            <h2 className="text-heading-lg text-[#e0e0e0]">{data.symbol} Earnings</h2>
            <p className="text-body-xs text-[#888888] mt-1">
              {data.companyName} • {data.frequency}
            </p>
          </div>
          <div className="text-right text-body-xs">
            <div className="text-[#888888]">CIK {data.cik}</div>
            {data.latestFiling && (
              <div className="text-[#a0a0a0] mt-1">
                {data.latestFiling.form} filed {data.latestFiling.filingDate}
              </div>
            )}
          </div>
        </div>
      </header>

      {/* Table - Minimal styling */}
      <section>
        <StatementTableMinimal
          periods={data.periods}
          metrics={[
            { key: 'revenue', label: 'Revenue', render: (period) => formatMoney(period.revenue) },
            { key: 'netIncome', label: 'Net Income', render: (period) => formatMoney(period.netIncome) },
            { key: 'basicEps', label: 'Basic EPS', render: (period) => formatMoney(period.basicEps) },
            { key: 'dilutedEps', label: 'Diluted EPS', render: (period) => formatMoney(period.dilutedEps) },
            { key: 'shares', label: 'Diluted Shares', render: (period) => formatNumber(period.dilutedWeightedAverageShares) },
            { key: 'revYoy', label: 'Revenue YoY', render: (period) => formatPercent(period.revenueYoyChangePercent) },
            { key: 'epsYoy', label: 'Diluted EPS YoY', render: (period) => formatPercent(period.dilutedEpsYoyChangePercent) },
          ]}
        />
      </section>

      {/* Footer - Minimal attribution */}
      <footer className="mt-4 pt-4 border-t border-[#1a1a1a]">
        <SourceAttribution status={data.sourceStatus} />
      </footer>
    </div>
  );
};
