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

interface CashFlowPanelProps {
  data: CashFlowPanelData;
}

const SourceAttribution: React.FC<{ status: CashFlowPanelData['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 CashFlowPanel: React.FC<CashFlowPanelProps> = ({ data }) => {
  return (
    <div className="cashflow-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} Cash Flow</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: 'cfo', label: 'Operating Cash Flow', render: (period) => formatMoney(period.operatingCashFlow) },
            { key: 'cfi', label: 'Investing Cash Flow', render: (period) => formatMoney(period.investingCashFlow) },
            { key: 'cff', label: 'Financing Cash Flow', render: (period) => formatMoney(period.financingCashFlow) },
            { key: 'capex', label: 'Capex', render: (period) => formatMoney(period.capex) },
            { key: 'fcf', label: 'Free Cash Flow', render: (period) => formatMoney(period.freeCashFlow) },
            { key: 'endingCash', label: 'Ending Cash', render: (period) => formatMoney(period.endingCash) },
          ]}
        />
      </section>

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