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

interface FinancialsPanelProps {
  data: FinancialsPanelData;
}

const SourceAttribution: React.FC<{ status: FinancialsPanelData['sourceStatus'] }> = ({ status }) => {
  return (
    <div className="text-[11px] font-mono text-term-text-muted">
      SEC EDGAR • companyfacts
      {status.degradedReason && (
        <div className="mt-1 text-warning">{status.degradedReason}</div>
      )}
    </div>
  );
};

export const FinancialsPanel: React.FC<FinancialsPanelProps> = ({ data }) => {
  return (
    <div className="financials-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-term-text">{data.symbol} Financials</h2>
            <p className="mt-1 text-body-xs text-term-text-muted">
              {data.companyName} • {data.frequency}
            </p>
          </div>
          <div className="text-right text-body-xs">
            <div className="text-term-text-muted">CIK {data.cik}</div>
            {data.latestFiling && (
              <div className="mt-1 text-term-text-tertiary">
                {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: 'grossProfit', label: 'Gross Profit', render: (period) => formatMoney(period.grossProfit) },
            { key: 'operatingIncome', label: 'Operating Income', render: (period) => formatMoney(period.operatingIncome) },
            { key: 'netIncome', label: 'Net Income', render: (period) => formatMoney(period.netIncome) },
            { key: 'dilutedEps', label: 'Diluted EPS', render: (period) => formatMoney(period.dilutedEps) },
            { key: 'cash', label: 'Cash & Equivalents', render: (period) => formatMoney(period.cashAndEquivalents) },
            { key: 'assets', label: 'Total Assets', render: (period) => formatMoney(period.totalAssets) },
            { key: 'liabilities', label: 'Total Liabilities', render: (period) => formatMoney(period.totalLiabilities) },
            { key: 'equity', label: 'Total Equity', render: (period) => formatMoney(period.totalEquity) },
            { key: 'shares', label: 'Shares Outstanding', render: (period) => formatNumber(period.sharesOutstanding) },
          ]}
        />
      </section>

      {/* Footer - Minimal attribution */}
      <footer className="mt-4 border-t border-term-border-subtle pt-4">
        <SourceAttribution status={data.sourceStatus} />
      </footer>
    </div>
  );
};
