import { useState, type ReactNode } from 'react'
import { useNavigate } from 'react-router-dom'
import { formatINR } from '@sims/domain'
import { Badge, Button, DataTable, EmptyState, ErrorState, Notice, PageHeader, Skeleton, StatCard, Stats } from '@sims/ui'
import { getDashboard, sendReminder, dismissReminder, getReminderPreview, type Reminder } from '../api'
import { useData } from './Clients'

const inr = (p: number) => formatINR(p)

const RULE_LABEL: Record<string, string> = {
  invoice_overdue: 'Overdue invoice', renewal_due: 'Renewal due', amc_expiring: 'AMC expiring',
  follow_up: 'Follow-up', recurring_generated: 'Recurring invoice', email_bounced: 'Email bounced',
}
const SENDABLE = new Set(['invoice_overdue', 'renewal_due', 'amc_expiring', 'recurring_generated'])
const toneFor = (status: string): 'ok' | 'warn' | 'err' =>
  status === 'failed' ? 'err' : status === 'sent' ? 'ok' : 'warn'

/** Dashboard home — today's money + the manual reminder queue (spec §3). */
export function Dashboard() {
  const nav = useNavigate()
  const dash = useData(getDashboard, [])
  const [err, setErr] = useState('')
  const v = dash.data

  return (
    <div className="wf-page">
      <PageHeader title="Dashboard" desc="Today’s money — dues, renewals, follow-ups, and the reminder queue." />
      {dash.error !== undefined && <ErrorState message={dash.error} onRetry={dash.reload} />}
      {err !== '' && <Notice tone="err">{err}</Notice>}
      {v === undefined && dash.error === undefined ? <Skeleton rows={5} /> : v === undefined ? null : (
        <>
          <Stats>
            <StatCard label="Overdue" value={inr(v.totals.overduePaise)} hint={`${v.overdue.length} invoice(s)`} />
            <StatCard label="Queued reminders" value={String(v.totals.queued)} />
            <StatCard label="Failed sends" value={String(v.totals.failed)} {...(v.totals.failed > 0 ? { hint: 'needs attention', hintTone: 'err' as const } : {})} />
            <StatCard label="Follow-ups today" value={String(v.followUpsToday.length)} />
          </Stats>

          <h3>Reminder queue</h3>
          {v.queue.length === 0 ? <EmptyState>Nothing waiting — all clear.</EmptyState> : (
            <DataTable
              columns={[
                { key: 'kind', label: 'Kind' }, { key: 'client', label: 'Client' },
                { key: 'ref', label: 'Reference' }, { key: 'status', label: 'Status' },
                { key: 'error', label: 'Error' }, { key: 'act', label: '' },
              ]}
              rowTone={(i) => {
                const s = v.queue[i]?.status
                return s === 'failed' ? 'err' : undefined
              }}
              rows={v.queue.map((rem) => ({
                kind: RULE_LABEL[rem.ruleKind] ?? rem.ruleKind,
                client: rem.clientName,
                ref: rem.docNo ?? rem.duePeriod,
                status: <Badge tone={toneFor(rem.status)}>{rem.status}</Badge>,
                error: rem.error ?? '—',
                act: <QueueActions rem={rem} onDone={dash.reload} onError={setErr} />,
              }))}
            />
          )}

          <Section title="Overdue" empty="No overdue invoices." rows={v.overdue}
            columns={[{ key: 'no', label: 'Invoice' }, { key: 'client', label: 'Client' }, { key: 'days', label: 'Days', numeric: true }, { key: 'due', label: 'Outstanding', numeric: true }]}
            onRowClick={(i) => nav(`/documents/${v.overdue[i]!.docId}`)}
            map={(o) => ({ no: o.docNo ?? '—', client: o.clientName, days: o.daysOverdue, due: inr(o.outstandingPaise) })} />

          <div className="dash-grid">
            <section>
              <Section title="Due this week" empty="No recurring bills due this week." rows={v.dueThisWeek}
                columns={[{ key: 'client', label: 'Client' }, { key: 'on', label: 'Runs on' }, { key: 'amt', label: 'Amount', numeric: true }]}
                map={(d) => ({ client: d.clientName, on: d.nextRun, amt: d.amountPaise !== null ? inr(d.amountPaise) : 'from price book' })} />
            </section>

            <section>
              <Section title="Renewals this month" empty="No renewals this month." rows={v.renewalsThisMonth}
                columns={[{ key: 'client', label: 'Client' }, { key: 'on', label: 'Renews on' }]}
                onRowClick={(i) => nav(`/clients/${v.renewalsThisMonth[i]!.clientId}`)}
                map={(r) => ({ client: r.clientName, on: r.nextRenewal })} />
            </section>

            <section>
              <Section title="Follow-ups today" empty="No follow-ups due." rows={v.followUpsToday}
                columns={[{ key: 'client', label: 'Client' }, { key: 'on', label: 'Due' }, { key: 'notes', label: 'Notes' }]}
                onRowClick={(i) => nav(`/clients/${v.followUpsToday[i]!.clientId}`)}
                map={(f) => ({ client: f.clientName, on: f.followUpOn, notes: f.notes !== '' ? f.notes : '—' })} />
            </section>

            <section>
              <Section title="Recent payments" empty="No payments recorded yet." rows={v.recentPayments}
                columns={[{ key: 'client', label: 'Client' }, { key: 'on', label: 'Received' }, { key: 'mode', label: 'Mode' }, { key: 'amt', label: 'Amount', numeric: true }]}
                map={(p) => ({ client: p.clientName, on: p.receivedOn, mode: p.mode, amt: inr(p.amountPaise) })} />
            </section>
          </div>
        </>
      )}
    </div>
  )
}

/** A titled table with an empty state — keeps the dashboard body declarative. */
function Section<T>(props: {
  title: string; empty: string; rows: T[]
  columns: { key: string; label: string; numeric?: boolean }[]
  map: (row: T) => Record<string, ReactNode>; onRowClick?: (i: number) => void
}) {
  return (
    <>
      <h3 style={{ marginTop: 20 }}>{props.title}</h3>
      {props.rows.length === 0 ? <EmptyState>{props.empty}</EmptyState> : (
        <DataTable
          columns={props.columns}
          {...(props.onRowClick !== undefined ? { onRowClick: (_r: unknown, i: number) => props.onRowClick!(i) } : {})}
          rows={props.rows.map(props.map)}
        />
      )}
    </>
  )
}

function QueueActions(props: { rem: Reminder & { docNo: string | null }; onDone: () => void; onError: (m: string) => void }) {
  const [busy, setBusy] = useState(false)
  const [mail, setMail] = useState<{ subject: string; body: string } | undefined>()
  const [loading, setLoading] = useState(false)
  const run = (p: Promise<unknown>) => {
    setBusy(true); props.onError('')
    p.catch((e: Error) => props.onError(e.message))
      // Reload even on failure: the server has already parked the reminder as
      // 'failed' with its error, and the row must flip live.
      .then(props.onDone)
      .finally(() => setBusy(false))
  }
  const preview = () => {
    if (mail !== undefined) { setMail(undefined); return } // toggle closed
    setLoading(true); props.onError('')
    getReminderPreview(props.rem.id)
      .then(setMail)
      .catch((e: Error) => props.onError(e.message))
      .finally(() => setLoading(false))
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{ display: 'flex', gap: 6 }}>
        {SENDABLE.has(props.rem.ruleKind) && (
          <>
            <Button onClick={preview}>{loading ? '…' : mail !== undefined ? 'Hide' : 'Preview'}</Button>
            <Button tone="primary" onClick={() => run(sendReminder(props.rem.id))}>{busy ? '…' : 'Send'}</Button>
          </>
        )}
        <Button onClick={() => run(dismissReminder(props.rem.id))}>Dismiss</Button>
      </div>
      {mail !== undefined && (
        <div style={{ border: '1px solid var(--border)', borderRadius: 6, padding: '6px 8px', background: 'var(--bg-raised)', maxWidth: 420 }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', color: 'var(--text-muted, #666)' }}>Subject</div>
          <div style={{ fontWeight: 600, marginBottom: 4 }}>{mail.subject}</div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', color: 'var(--text-muted, #666)' }}>Body</div>
          <pre style={{ whiteSpace: 'pre-wrap', margin: 0, fontFamily: 'inherit', fontSize: 13 }}>{mail.body}</pre>
        </div>
      )}
    </div>
  )
}