import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useNavigate, useParams } from 'react-router-dom'
import { enterpriseDetail, isNotFound, officerSession } from '../../lib/api'
import type {
  Enterprise,
  FieldVisit,
  LedgerEntry,
  EnterpriseDetail,
  ForecastPointRow,
  ReasonCodeRow,
  StressScoreRow,
} from '../../lib/api'
import {
  ActionChip,
  Card,
  DriverBar,
  Empty,
  GhostBtn,
  PrimaryBtn,
  RiskBadge,
  ScoreDial,
  Sparkline,
  StatusPill,
} from '../../components/ui/bits'
import { ForecastFan } from '../../components/charts/ForecastFan'
import { SubScoreRadar } from '../../components/charts/SubScoreRadar'
import {
  DRIVER_META,
  SECTORS,
  breachPoint,
  findEnterprise,
  forecastFor,
  subScoresFor,
  tripWiresFor,
} from '../../lib/demo/enterprises'
import { inr, inrCompact, monthRef } from '../../lib/demo/seed'
import { loadLedger } from '../../lib/ledgerStore'
import { CATEGORIES } from '../../lib/ledgerStore'
import { useVisits } from '../../lib/visitStore'
import { ScheduleVisitModal } from './ScheduleVisitModal'

type Tab = 'OVERVIEW' | 'FORECAST' | 'DRIVERS' | 'LEDGER' | 'VISITS'

const TABS: { key: Tab; label: string }[] = [
  { key: 'OVERVIEW', label: 'Overview' },
  { key: 'FORECAST', label: 'Forecast' },
  { key: 'DRIVERS', label: 'Drivers' },
  { key: 'LEDGER', label: 'Ledger' },
  { key: 'VISITS', label: 'Visits' },
]

/**
 * Sector label that cannot throw.
 *
 * <p>`SECTORS[e.sector].label` reads fine until the day a sector is added to the
 * database and not to the front end, and then it takes the whole page down
 * rather than showing one unfamiliar word. The codes match today; this is so
 * they may stop matching without costing an officer their screen.
 */
function sectorLabel(sector: string | undefined): string {
  if (!sector) return "Unknown sector"
  return SECTORS[sector as keyof typeof SECTORS]?.label ?? sector.replace(/_/g, " ").toLowerCase()
}

/**
 * Reconcile the wire record with the shape this screen is written against.
 *
 * <p>They are not the same object and were never meant to be. The API stores an
 * enterprise with foreign keys — {@code sectorId}, {@code districtId} — and
 * returns the resolved {@code sector} and {@code district} as siblings, because
 * a row in a table should not carry its own joins. The screen wants one flat
 * record. Reading the API object directly gave `SECTORS[undefined]`, which threw
 * on every enterprise.
 *
 * <p>`trend` has no server equivalent yet — the six-month score history would
 * need a query across scoring runs. Until that exists it comes from the demo
 * enterprise where there is one, and otherwise flat-lines at the current score
 * rather than inventing a shape.
 */
function mergeEnterprise(
  detail: EnterpriseDetail | undefined,
  demo: Enterprise | undefined,
): Enterprise | undefined {
  if (!detail) return demo
  const api = detail.enterprise as unknown as Record<string, unknown>
  const score = Number(api.score ?? demo?.score ?? 0)

  return {
    ...(demo ?? ({} as Enterprise)),
    id: Number(api.id ?? demo?.id ?? 0),
    enterpriseId: String(api.enterpriseId ?? demo?.enterpriseId ?? ''),
    name: String(api.name ?? demo?.name ?? ''),
    nameHi: String(api.nameHi ?? demo?.nameHi ?? ''),
    // Resolved names travel beside the record, not inside it.
    sector: (detail.sector ?? demo?.sector) as Enterprise['sector'],
    district: detail.district ?? demo?.district ?? '',
    block: String(api.block ?? demo?.block ?? ''),
    ownerCount: Number(api.ownerCount ?? demo?.ownerCount ?? 0),
    vintageMonths: Number(api.vintageMonths ?? demo?.vintageMonths ?? 0),
    loanOutstanding: Number(api.loanOutstanding ?? demo?.loanOutstanding ?? 0),
    monthlyInstalment: Number(api.monthlyInstalment ?? demo?.monthlyInstalment ?? 0),
    score,
    band: (api.band ?? demo?.band ?? 'STANDARD') as Enterprise['band'],
    trend: demo?.trend ?? Array(6).fill(score),
    lastUpdated: String(api.lastScoredAt ?? demo?.lastUpdated ?? ''),
  }
}

/**
 * Everything the officer needs about one enterprise, in five tabs.
 *
 * <p>Reads the live record. This screen used to compute the score, the
 * sub-scores and the drivers in the browser from a JavaScript copy of the rule
 * weights — which meant the "SHAP" badge sat over numbers no model had produced,
 * while the real SHAP values sat unread in `reason_code`. Everything on this page
 * now comes from the scoring run that actually happened, and the engine that
 * produced it is named on the score card.
 */
export function EnterpriseDetailPage() {
  const { enterpriseId = '' } = useParams()
  const navigate = useNavigate()
  const [tab, setTab] = useState<Tab>('OVERVIEW')
  const [scheduling, setScheduling] = useState(false)

  const { data, error, isError, isLoading } = useQuery({
    queryKey: ['enterprise-detail', enterpriseId],
    queryFn: () => enterpriseDetail(enterpriseId),
    enabled: Boolean(enterpriseId),
  })

  // A 404 is an answer, not a failure. The tenancy model returns one for a
  // borrower on another bank's book, so falling back to demo data here would
  // show exactly the row the backend refused.
  const refused = isNotFound(error)
  const demoEnterprise = refused ? undefined : findEnterprise(enterpriseId)
  const e = mergeEnterprise(data, demoEnterprise)
  const demo = !refused && (isError || !data)

  if (isLoading) return <Empty text="Loading…" />
  if (refused) return <Empty text={`No enterprise ${enterpriseId} on your book.`} />
  if (!e) return <Empty text={`No enterprise found for ${enterpriseId}.`} />

  // Live forecast rows where we have them; the in-file generator only where the
  // backend gave us nothing, so an unreachable API degrades rather than blanks.
  const points = data?.forecast?.length
    ? data.forecast.map((p) => ({
        month: p.month,
        horizon: p.horizon,
        p10: p.p10,
        p50: p.p50,
        p90: p.p90,
        obligation: p.obligation,
      }))
    : forecastFor(demoEnterprise ?? e)
  const breach = breachPoint(points as never)
  const breachRef = breach ? monthRef(new Date(`${breach.month}-01T00:00:00`)) : null

  return (
    <div>
      {/* ── header ─────────────────────────────────────────── */}
      <div className="flex items-start gap-4 mb-4">
        <button onClick={() => navigate(-1)} className="text-[11.5px] text-slate-400 hover:text-forest mt-1">
          ← Back
        </button>
        <div className="min-w-0">
          <div className="flex items-center gap-2.5">
            <h1 className="text-[19px] font-bold text-forest">{e.name}</h1>
            <RiskBadge band={e.band} />
          </div>
          <div className="text-[11.5px] text-ink-3">
            {e.enterpriseId} · {sectorLabel(e.sector)} · {e.block} block, {e.district} district ·{' '}
            {e.vintageMonths} months on book
          </div>
        </div>
        <div className="ml-auto flex items-center gap-2">
          {demo && <span className="pill pill-pend">Demo data</span>}
          <PrimaryBtn onClick={() => setScheduling(true)}>Schedule visit</PrimaryBtn>
          <GhostBtn onClick={() => setTab('FORECAST')}>Full forecast</GhostBtn>
        </div>
      </div>

      {breach && (
        <div className="bg-risk-soft border border-risk-red/20 rounded-lg px-4 py-2.5 mb-4 flex items-center gap-3">
          <span className="w-6 h-6 rounded-full bg-risk-red text-white grid place-items-center text-[12px] font-bold shrink-0">
            !
          </span>
          <p className="text-[12px] text-slate-700">
            Downside case fails to cover obligations from <b>{breachRef?.fullEn}</b> — projected gap{' '}
            <b className="text-risk-red">{inr(breach.obligation - breach.p10)}</b> at P10.
          </p>
        </div>
      )}

      <div className="flex gap-1.5 mb-4">
        {TABS.map((t) => (
          <ActionChip key={t.key} active={tab === t.key} onClick={() => setTab(t.key)}>
            {t.label}
          </ActionChip>
        ))}
      </div>

      {tab === 'OVERVIEW' && <OverviewTab e={e} score={data?.score ?? null} reasons={data?.reasons ?? []} />}
      {tab === 'FORECAST' && <ForecastTab e={e} live={data?.forecast ?? []} />}
      {tab === 'DRIVERS' && <DriversTab e={e} score={data?.score ?? null} reasons={data?.reasons ?? []} />}
      {tab === 'LEDGER' && <LedgerTab e={e} live={data?.ledger ?? []} />}
      {tab === 'VISITS' && <VisitsTab e={e} live={data?.visits ?? []} />}

      {scheduling && <ScheduleVisitModal enterprise={e} onClose={() => setScheduling(false)} />}
    </div>
  )
}

/** How the engine that produced a score should be described, and coloured. */
const ENGINE_LABEL: Record<string, { text: string; pill: string; note: string }> = {
  MODEL: {
    text: 'Model',
    pill: 'pill-ok',
    note: 'Gradient-boosted stress head. Drivers below are SHAP contributions.',
  },
  RULE: {
    text: 'Rules',
    pill: 'pill-info',
    note: 'Sector-weighted rule engine. Drivers are each family’s weighted share.',
  },
  RULE_FALLBACK: {
    text: 'Rules — model unreachable',
    pill: 'pill-pend',
    note: 'The run was configured for the model; the inference service could not be reached, so this score is rule-derived.',
  },
}

function OverviewTab({
  e,
  score,
  reasons,
}: {
  e: Enterprise
  score: StressScoreRow | null
  reasons: ReasonCodeRow[]
}) {
  const engine = ENGINE_LABEL[score?.engine ?? ''] ?? {
    text: score?.engine ?? 'Unknown',
    pill: 'pill-mut',
    note: 'Engine not recorded on this score.',
  }

  const families: { key: string; label: string; value: number | null }[] = [
    { key: 'liquidity', label: 'Liquidity', value: score?.liquidity ?? null },
    { key: 'behavioural', label: 'Repayment behaviour', value: score?.behavioural ?? null },
    { key: 'trendVolatility', label: 'Market volatility', value: score?.trendVolatility ?? null },
    { key: 'obligationLoad', label: 'Obligation load', value: score?.obligationLoad ?? null },
    { key: 'externalShock', label: 'External shock', value: score?.externalShock ?? null },
  ]

  return (
    <div className="grid gap-4 lg:grid-cols-3">
      <Card title="Composite Stress Score" badge={score ? `run ${score.runId ?? '—'}` : 'not scored'}>
        <div className="p-4 grid place-items-center">
          <ScoreDial score={score?.score ?? e.score} band={(score?.band ?? e.band) as never} size={132} />

          {/* The engine is stated on the face of the score, not in a tooltip. A
              number produced by a fallback must not look like one produced by
              the model it was configured to use. */}
          <div className="flex items-center gap-2 mt-3">
            <span className={`pill ${engine.pill}`}>{engine.text}</span>
            {score && <span className="pill pill-mut">{score.confidence}% confidence</span>}
          </div>
          <p className="text-[10.5px] text-ink-3 text-center leading-snug mt-2">{engine.note}</p>

          <div className="mt-3 w-full">
            <Sparkline values={e.trend} band={(score?.band ?? e.band) as never} width={240} height={44} />
            <div className="text-[10px] text-ink-3 text-center mt-1">6-month score history</div>
          </div>
        </div>
      </Card>

      <Card title="Institutional record">
        <dl className="p-4 space-y-2.5 text-[12px]">
          {[
            ['Loan outstanding', inr(e.loanOutstanding)],
            ['Monthly instalment', inr(e.monthlyInstalment)],
            ['Sector pack', sectorLabel(e.sector)],
            ['Block / district', `${e.block} / ${e.district}`],
            ['Owners on record', String(e.ownerCount)],
            ['Vintage', `${e.vintageMonths} months`],
            ['Last scored', score?.computedAt ? score.computedAt.slice(0, 16).replace('T', ' ') : '—'],
          ].map(([k, v]) => (
            <div key={k} className="flex justify-between gap-3">
              <dt className="text-ink-3">{k}</dt>
              <dd className="font-semibold text-ink num">{v}</dd>
            </div>
          ))}
        </dl>

        <div className="px-4 pb-4">
          <div className="text-[10px] uppercase tracking-[0.07em] text-ink-3 font-bold mb-2">
            Five risk families
          </div>
          <div className="space-y-1.5">
            {families.map((f) => (
              <div key={f.key} className="flex items-center gap-2">
                <span className="text-[11px] text-ink-2 w-[124px] shrink-0">{f.label}</span>
                <span className="flex-1 h-[6px] rounded-full bg-surface-3 overflow-hidden">
                  <span
                    className={`block h-full rounded-full ${
                      (f.value ?? 0) >= 65 ? 'bg-risk-red' : (f.value ?? 0) >= 35 ? 'bg-amber' : 'bg-green'
                    }`}
                    style={{ width: `${Math.min(100, f.value ?? 0)}%` }}
                  />
                </span>
                <span className="font-mono text-[10.5px] text-ink-3 w-7 text-right">
                  {f.value ?? '—'}
                </span>
              </div>
            ))}
          </div>
        </div>
      </Card>

      <Card
        title="Why this score"
        badge={score?.engine === 'MODEL' ? 'SHAP' : 'rule weights'}
        actions={<span className="text-[10.5px] text-ink-3">Top drivers, ranked</span>}
      >
        <div className="p-4 space-y-3">
          {reasons.length === 0 && <Empty text="No reason codes stored for this enterprise." />}
          {reasons.slice(0, 5).map((r) => (
            <div key={r.id} className="flex gap-2.5">
              <span className="w-6 h-6 rounded-[7px] bg-lp-blue-soft text-lp-blue grid place-items-center text-[10.5px] font-bold shrink-0">
                {r.rank}
              </span>
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <span className="text-[11.5px] font-semibold text-ink">{r.driverHi || r.driver}</span>
                  <span className="font-mono text-[10px] text-ink-3">+{r.weight}</span>
                </div>
                <p className="text-[11.5px] text-ink-2 leading-snug">{r.sentenceEn}</p>
                <p className="text-[11px] text-ink-3 leading-snug">{r.sentenceHi}</p>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  )
}

function ForecastTab({ e, live }: { e: Enterprise; live: ForecastPointRow[] }) {
  // Live rows carry the engine that produced them; the in-file generator does
  // not, so the badge can always say which one the reader is looking at.
  const engine = live.length ? live[0].engine : null
  const points = live.length
    ? live.map((p) => ({
        month: p.month,
        label: monthRef(new Date(`${p.month}-01T00:00:00`)).label,
        labelHi: monthRef(new Date(`${p.month}-01T00:00:00`)).labelHi,
        p10: p.p10,
        p50: p.p50,
        p90: p.p90,
        obligation: p.obligation,
      }))
    : forecastFor(e)
  return (
    <div className="grid gap-4 lg:grid-cols-3">
      <Card
        title="Net cash position — 6-month quantile forecast"
        badge={engine ? engine.toLowerCase() : "demo"}
        actions={<span className="text-[10.5px] text-ink-3">Missing inputs widen the band; they never lower its centre.</span>}
        className="lg:col-span-2"
      >
        <div className="p-4">
          <ForecastFan points={points} height={280} />
        </div>
      </Card>

      <Card title="Month by month">
        <div className="overflow-x-auto">
          <table className="ul-table">
            <thead>
              <tr>
                <th>Month</th>
                <th className="text-right">P10</th>
                <th className="text-right">P50</th>
                <th className="text-right">Due</th>
              </tr>
            </thead>
            <tbody>
              {points.map((p) => {
                const short = p.p10 < p.obligation
                return (
                  <tr key={p.month} className={short ? '!bg-risk-soft' : ''}>
                    <td className="font-semibold text-slate-700">{p.label}</td>
                    <td className={`text-right ${short ? 'text-risk-red font-bold' : 'text-slate-600'}`}>
                      {inrCompact(p.p10)}
                    </td>
                    <td className="text-right text-slate-600">{inrCompact(p.p50)}</td>
                    <td className="text-right text-slate-500">{inrCompact(p.obligation)}</td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
        <p className="px-3.5 py-2 text-[10.5px] text-slate-400 border-t border-slate-100">
          Rows in red are months where the downside case does not cover what is due.
        </p>
      </Card>
    </div>
  )
}

function DriversTab({
  e,
  score,
  reasons,
}: {
  e: Enterprise
  score: StressScoreRow | null
  reasons: ReasonCodeRow[]
}) {
  // The five families as the run stored them. Only where the backend gave us
  // nothing do we fall back to the in-browser approximation — and the badge says
  // which of the two you are looking at.
  const live = score != null
  const sub = live
    ? {
        liquidity: score.liquidity ?? 0,
        behavioural: score.behavioural ?? 0,
        trendVolatility: score.trendVolatility ?? 0,
        obligationLoad: score.obligationLoad ?? 0,
        externalShock: score.externalShock ?? 0,
      }
    : subScoresFor(e)

  const wires = tripWiresFor(e)
  const isModel = score?.engine === 'MODEL'

  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <Card
        title="Five risk families"
        badge={live ? (isModel ? 'SHAP · run ' + (score?.runId ?? '—') : 'rule weights') : 'demo'}
        actions={
          <span className="text-[10.5px] text-ink-3">
            {isModel
              ? 'Contribution to the model’s score'
              : 'Each family’s weighted share of the composite'}
          </span>
        }
      >
        <div className="p-4">
          <SubScoreRadar sub={sub as never} band={(score?.band ?? e.band) as never} />
          <div className="space-y-2 mt-4">
            {DRIVER_META.map((d) => (
              <DriverBar key={d.key} label={d.label} weight={sub[d.key]} />
            ))}
          </div>
        </div>
      </Card>

      <Card title="Reason codes" badge={isModel ? 'SHAP sentences' : 'rule sentences'}>
        <div className="p-4 space-y-3">
          {reasons.length === 0 && <Empty text="No reason codes stored for this enterprise." />}
          {reasons.map((r) => (
            <div key={r.id} className="flex items-start gap-2.5">
              <span className="w-6 h-6 rounded-[7px] bg-lp-blue-soft text-lp-blue grid place-items-center text-[10.5px] font-bold shrink-0">
                {r.rank}
              </span>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="text-[11.5px] font-semibold text-ink capitalize">{r.driver}</span>
                  <span className="flex-1 h-[6px] rounded-full bg-surface-3 overflow-hidden">
                    <span
                      className="block h-full rounded-full bg-lp-blue"
                      style={{ width: `${Math.min(100, r.weight)}%` }}
                    />
                  </span>
                  <span className="font-mono text-[10.5px] text-ink-3 w-7 text-right">+{r.weight}</span>
                </div>
                <p className="text-[11.5px] text-ink-2 leading-snug mt-0.5">{r.sentenceEn}</p>
                <p className="text-[11px] text-ink-3 leading-snug">{r.sentenceHi}</p>
              </div>
            </div>
          ))}
        </div>
        <p className="px-4 py-2 text-[10.5px] text-ink-3 border-t border-line leading-snug">
          Sentences are rendered once and stored, so the wording an officer acted on survives a later
          change to the templates.
        </p>
      </Card>

      <Card title="Deterministic trip-wires" badge="rule engine" className="lg:col-span-2">
        <div className="overflow-x-auto">
          <table className="ul-table">
            <thead>
              <tr>
                <th>Code</th>
                <th>Rule</th>
                <th>Threshold</th>
                <th>State</th>
              </tr>
            </thead>
            <tbody>
              {wires.map((w) => (
                <tr key={w.code}>
                  <td className="font-mono text-[10.5px] text-slate-500">{w.code}</td>
                  <td>
                    <span className="block font-semibold text-slate-700">{w.label}</span>
                    <span className="block text-[10.5px] text-slate-400">{w.detail}</span>
                  </td>
                  <td className="font-mono text-[10.5px] text-slate-500">{w.threshold}</td>
                  <td>
                    <span className={`pill ${w.fired ? 'pill-bad' : 'pill-mut'}`}>{w.fired ? 'Fired' : 'Clear'}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="px-3.5 py-2 text-[10.5px] text-slate-400 border-t border-slate-100">
          Trip-wires fire independently of the model, so every alert stays auditable.
        </p>
      </Card>
    </div>
  )
}

function LedgerTab({ e, live }: { e: Enterprise; live: LedgerEntry[] }) {
  // Server entries first — the payload carries this borrower's last sixty,
  // tenant-checked. loadLedger reads whatever this browser happens to hold from
  // the PWA demo, which is this device's data, not the enterprise's.
  const entries = (live.length ? live : loadLedger(e.enterpriseId)).slice(0, 40)
  const label = (kind: string, code: string) =>
    CATEGORIES[kind as keyof typeof CATEGORIES]?.find((c) => c.code === code)?.en ?? code

  return (
    <Card title="Three-tap ledger — last 40 entries" badge="owner-reported">
      <div className="overflow-x-auto max-h-[520px] overflow-y-auto">
        <table className="ul-table">
          <thead className="sticky top-0">
            <tr>
              <th>Date</th>
              <th>Type</th>
              <th>Category</th>
              <th className="text-right">Amount</th>
              <th>Sync</th>
            </tr>
          </thead>
          <tbody>
            {entries.map((l) => (
              <tr key={l.id}>
                <td className="text-slate-600">{l.entryDate}</td>
                <td>
                  <span className={`pill ${l.kind === 'IN' ? 'pill-ok' : l.kind === 'OUT' ? 'pill-bad' : 'pill-info'}`}>
                    {l.kind === 'IN' ? 'Money in' : l.kind === 'OUT' ? 'Money out' : 'Stock'}
                  </span>
                </td>
                <td className="text-slate-600">{label(l.kind, l.category)}</td>
                <td className="text-right font-semibold text-slate-700">{inr(l.amount)}</td>
                <td>
                  <StatusPill status={l.syncState} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {!entries.length && <Empty text="This enterprise has not recorded any entries yet." />}
    </Card>
  )
}

function VisitsTab({ e, live }: { e: Enterprise; live: FieldVisit[] }) {
  // The detail payload already carries this enterprise's visits, tenant-checked
  // on the way out. Locally scheduled ones merge over them.
  const { visits } = useVisits('ALL', officerSession()?.fullName ?? 'Field Officer', live)
  const mine = visits.filter((v) => v.enterpriseId === e.enterpriseId)

  return (
    <Card title="Field visits and interventions">
      <div className="overflow-x-auto">
        <table className="ul-table">
          <thead>
            <tr>
              <th>Visit</th>
              <th>Action</th>
              <th>Due</th>
              <th>State</th>
              <th>Outcome</th>
            </tr>
          </thead>
          <tbody>
            {mine.map((v) => (
              <tr key={v.visitId}>
                <td className="font-mono text-[10.5px] text-slate-500">{v.visitId}</td>
                <td className="text-slate-700 whitespace-normal">{v.action}</td>
                <td className="text-slate-600">{v.dueDate}</td>
                <td>
                  <StatusPill status={v.state} />
                </td>
                <td className="text-slate-500 whitespace-normal max-w-[320px]">{v.outcome ?? '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {!mine.length && <Empty text="No visit scheduled for this enterprise yet." />}
    </Card>
  )
}