import { AppLayout } from '@/Components/Layout/AppLayout';
import { formatCount } from '@/lib/formatters';

type Props = {
  metrics: { smsCharges: number; payments: number; activeLicenses: number; expiringLicenses: number };
  monthly: Array<{ month: string; sms: number }>;
  schools: Array<{ name: string; code: string; balance: number; totalCharged: number; expiresAt: string }>;
};

export default function Revenue({ metrics, monthly, schools }: Props) {
  const max = Math.max(1, ...monthly.map((m) => m.sms));
  return (
    <AppLayout title="داشبورد درآمد">
      <div className="page-stack">
        <section className="section-header"><div><h2>داشبورد درآمد</h2><p>نمای مالی لایسنس‌ها و شارژ پیامک مدارس.</p></div></section>
        <section className="dashboard-grid">
          <article className="metric-card"><span>شارژ SMS کل</span><strong>{formatCount(metrics.smsCharges)}</strong></article>
          <article className="metric-card"><span>پرداخت تاییدشده</span><strong>{formatCount(metrics.payments)}</strong></article>
          <article className="metric-card"><span>لایسنس فعال</span><strong>{formatCount(metrics.activeLicenses)}</strong></article>
          <article className="metric-card"><span>نزدیک انقضا</span><strong>{formatCount(metrics.expiringLicenses)}</strong></article>
        </section>
        <section className="panel-card">
          <h2>شارژ ماهانه SMS</h2>
          <div style={{ display: 'flex', alignItems: 'end', gap: 10, minHeight: 180 }}>
            {monthly.map((m) => <div key={m.month} style={{ flex: 1, textAlign: 'center' }}><div title={String(m.sms)} style={{ height: `${Math.max(6, (m.sms / max) * 150)}px`, background: 'var(--color-primary)', borderRadius: 6 }} /><small>{m.month}</small></div>)}
          </div>
        </section>
        <div className="table-wrap"><table className="data-table"><thead><tr><th>مدرسه</th><th>کد</th><th>شارژ کل</th><th>مانده</th><th>انقضا</th></tr></thead><tbody>{schools.map((s) => <tr key={s.code}><td>{s.name}</td><td>{s.code}</td><td>{formatCount(s.totalCharged)}</td><td>{formatCount(s.balance)}</td><td>{s.expiresAt}</td></tr>)}</tbody></table></div>
      </div>
    </AppLayout>
  );
}