import React from 'react';
import { DividendsPanelData } from '../../types/financial';
import { MetricGrid, formatMoney } from '../ui';

interface DividendsPanelProps {
  data: DividendsPanelData;
}

const SourceAttribution: React.FC<{ status: DividendsPanelData['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 DividendsPanel: React.FC<DividendsPanelProps> = ({ data }) => {
  const summaryMetrics = [
    {
      label: 'TTM / Share',
      value: formatMoney(data.ttmDividendsPerShare),
    },
    {
      label: 'TTM Cash Paid',
      value: formatMoney(data.ttmCommonDividendsPaid),
    },
    {
      label: 'Latest Event',
      value: data.latestEvent
        ? `${data.latestEvent.endDate} • ${data.latestEvent.frequencyGuess}`
        : '—',
    },
  ];

  return (
    <div className="dividends-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} Dividends</h2>
            <p className="mt-1 text-body-xs text-term-text-muted">{data.companyName}</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>

      {/* Summary Metrics - Inline grid */}
      <section className="mb-6">
        <MetricGrid metrics={summaryMetrics} columns={3} />
      </section>

      {/* Events Table - Minimal styling */}
      <section className="events-section">
        <div className="overflow-x-auto">
          <table className="min-w-full border-collapse font-mono text-sm">
            <thead className="text-term-text-muted">
              <tr className="border-b border-term-border-subtle">
                <th className="px-3 py-2 text-left text-[10px] uppercase tracking-[0.18em]">End</th>
                <th className="px-3 py-2 text-left text-[10px] uppercase tracking-[0.18em]">Filed</th>
                <th className="px-3 py-2 text-left text-[10px] uppercase tracking-[0.18em]">Form</th>
                <th className="px-3 py-2 text-left text-[10px] uppercase tracking-[0.18em]">Frequency</th>
                <th className="px-3 py-2 text-right text-[10px] uppercase tracking-[0.18em]">Per Share</th>
                <th className="px-3 py-2 text-right text-[10px] uppercase tracking-[0.18em]">Cash Paid</th>
              </tr>
            </thead>
            <tbody>
              {data.events.map((event) => (
                <tr
                  key={`${event.endDate}-${event.filedDate}`}
                  className="border-b border-term-border-subtle last:border-b-0"
                >
                  <td className="px-3 py-2 text-term-text">{event.endDate}</td>
                  <td className="px-3 py-2 text-term-text">{event.filedDate}</td>
                  <td className="px-3 py-2 text-term-text">{event.form}</td>
                  <td className="px-3 py-2 text-term-text">{event.frequencyGuess}</td>
                  <td className="px-3 py-2 text-right text-term-text">
                    {formatMoney(event.dividendPerShare)}
                  </td>
                  <td className="px-3 py-2 text-right text-term-text">
                    {formatMoney(event.totalCashDividends)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

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