'use client'

import { useState } from "react"
import { PageHeader } from "@/components/ui/page-header"
import { KpiCard } from "@/components/ui/kpi-card"
import { SectionCard } from "@/components/ui/section-card"
import { DataTable, type Column } from "@/components/ui/data-table"
import { StatusBadge, type StatusTone } from "@/components/ui/status-badge"
import { ShieldAlert, AlertOctagon, Flag, Activity } from "lucide-react"
import { formatDateTime } from "@/lib/format"
import i18n from "@/lib/i18n";

type AlertRow = {
  id: string
  alert_code: string
  rule_name: string
  severity: string
  status: string
  reference: string | null
  created_at: string
  customers: { name: string; customer_code: string; risk_score: number } | null
}

const sevTone: Record<string, StatusTone> = { low: "success", medium: "warning", high: "danger", critical: "danger" }
const sevLabel: Record<string, string> = { low: i18n.t('app.admin.risk-aml.page.text_1'), medium: i18n.t('app.admin.risk-aml.page.text_2'), high: i18n.t('app.admin.risk-aml.page.text_3'), critical: i18n.t('app.admin.risk-aml.page.text_4') }

export default function RiskAmlPage() {
  const [alerts] = useState<AlertRow[]>([])
  const [openCount] = useState(0)
  const [criticalCount] = useState(0)
  const [highCount] = useState(0)
  const [resolvedCount] = useState(0)

  const selected = alerts.find((a) => a.severity === "critical") ?? alerts[0]

  const columns: Column<AlertRow>[] = [
    { key: "code", header: i18n.t('app.admin.risk-aml.page.text_5'), cell: (r) => <span className="font-mono text-[12.5px] font-semibold">{r.alert_code}</span> },
    { key: "customer", header: i18n.t('app.admin.risk-aml.page.text_6'), cell: (r) => <span className="text-[13px]">{r.customers?.name ?? "—"}</span> },
    { key: "rule", header: i18n.t('app.admin.risk-aml.page.text_7'), cell: (r) => <span className="text-[12.5px] text-muted-foreground">{r.rule_name}</span> },
    { key: "severity", header: i18n.t('app.admin.risk-aml.page.text_8'), cell: (r) => <StatusBadge tone={sevTone[r.severity] ?? "neutral"} size="sm">{sevLabel[r.severity] ?? r.severity}</StatusBadge> },
    { key: "risk_score", header: i18n.t('app.admin.risk-aml.page.text_9'), cell: (r) => <span className={`font-mono text-[13px] font-semibold ${(r.customers?.risk_score ?? 0) > 70 ? "text-red-600" : ""}`}>{r.customers?.risk_score ?? 0}</span> },
    { key: "date", header: i18n.t('app.admin.risk-aml.page.text_10'), cell: (r) => <span className="text-[12px] text-muted-foreground">{formatDateTime(r.created_at)}</span> },
  ]

  return (
    <div className="space-y-6">
      <PageHeader
        title={i18n.t('app.admin.risk-aml.page.text_11')}
        description={i18n.t('app.admin.risk-aml.page.text_12')}
        breadcrumbs={[{ label: i18n.t('app.admin.risk-aml.page.text_13'), href: "#" }, { label: i18n.t('app.admin.risk-aml.page.text_14') }]}
      />

      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        <KpiCard label={i18n.t('app.admin.risk-aml.page.text_15')} value={String(openCount)} icon={Flag} tone="warning" accent />
        <KpiCard label={i18n.t('app.admin.risk-aml.page.text_16')} value={String(criticalCount)} icon={AlertOctagon} tone="danger" />
        <KpiCard label={i18n.t('app.admin.risk-aml.page.text_17')} value={String(highCount)} icon={ShieldAlert} tone="danger" />
        <KpiCard label={i18n.t('app.admin.risk-aml.page.text_18')} value={String(resolvedCount)} icon={Activity} tone="success" />
      </div>

      <div className="grid gap-6 lg:grid-cols-[1fr_380px]">
        <SectionCard title={i18n.t('app.admin.risk-aml.page.text_19')} padded={false}>
          {alerts.length === 0 ? (
            <div className="px-5 py-8 text-center text-[12.5px] text-muted-foreground">{i18n.t('app.admin.risk-aml.page.text_21')}</div>
          ) : (
            <DataTable columns={columns} data={alerts} rowKey={(r) => r.id} activeRowKey={selected?.id} />
          )}
        </SectionCard>

        <SectionCard title={selected ? i18n.t('app.admin.risk-aml.page.text_case', { alert_code: selected.alert_code }) : i18n.t('app.admin.risk-aml.page.text_20')}>
          {selected ? (
            <div className="space-y-4">
              <div className="rounded-lg border border-red-200 bg-red-50 p-3.5 space-y-1">
                <div className="flex items-center gap-2">
                  <AlertOctagon className="h-4 w-4 text-red-600" />
                  <span className="text-[13px] font-semibold text-red-700">{sevLabel[selected.severity]}</span>
                </div>
                <p className="text-[12.5px] text-red-700 leading-relaxed">{selected.rule_name}</p>
              </div>
              <div className="rounded-lg border border-border bg-muted/30 p-3 space-y-2">
                <div className="flex items-center justify-between text-[12.5px]">
                  <span className="text-muted-foreground">{i18n.t('app.admin.risk-aml.page.text_22')}</span>
                  <span className="font-semibold">{selected.customers?.name ?? "—"}</span>
                </div>
                <div className="flex items-center justify-between text-[12.5px]">
                  <span className="text-muted-foreground">{i18n.t('app.admin.risk-aml.page.text_23')}</span>
                  <span className="font-mono text-[12px]">{selected.customers?.customer_code ?? "—"}</span>
                </div>
                <div className="flex items-center justify-between text-[12.5px]">
                  <span className="text-muted-foreground">{i18n.t('app.admin.risk-aml.page.text_24')}</span>
                  <span className="font-mono text-[13px] font-semibold text-red-600">{selected.customers?.risk_score ?? 0}/100</span>
                </div>
                <div className="flex items-center justify-between text-[12.5px]">
                  <span className="text-muted-foreground">{i18n.t('app.admin.risk-aml.page.text_25')}</span>
                  <span className="font-mono text-[12px]">{selected.reference ?? "—"}</span>
                </div>
              </div>
              <div className="flex gap-2 pt-1">
                <button className="flex-1 rounded-lg border border-border bg-card py-2 text-[13px] font-semibold hover:bg-muted transition">
                  {i18n.t('app.admin.risk-aml.page.text_26')}</button>
                <button className="flex-1 rounded-lg bg-red-600 py-2 text-[13px] font-semibold text-white hover:bg-red-700 transition">
                  {i18n.t('app.admin.risk-aml.page.text_27')}</button>
              </div>
            </div>
          ) : (
            <p className="text-[13px] text-muted-foreground">{i18n.t('app.admin.risk-aml.page.text_28')}</p>
          )}
        </SectionCard>
      </div>
    </div>
  )
}