'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 { LifeBuoy, AlertCircle, Clock, CheckCircle2 } from "lucide-react"
import { formatDateTime } from "@/lib/format"
import i18n from "@/lib/i18n";

type TicketRow = {
  id: string
  ticket_code: string
  subject: string
  priority: string
  status: string
  category: string | null
  assigned_to: string | null
  updated_at: string
  customers: { name: string } | null
}

const priTone: Record<string, StatusTone> = { low: "success", medium: "warning", high: "danger", urgent: "danger" }
const priLabel: Record<string, string> = { low: i18n.t('app.admin.support.page.text_1'), medium: i18n.t('app.admin.support.page.text_2'), high: i18n.t('app.admin.support.page.text_3'), urgent: i18n.t('app.admin.support.page.text_4') }
const stTone: Record<string, StatusTone> = { open: "warning", in_progress: "processing", waiting: "info", resolved: "success", closed: "neutral" }
const stLabel: Record<string, string> = { open: i18n.t('app.admin.support.page.text_5'), in_progress: i18n.t('app.admin.support.page.text_6'), waiting: i18n.t('app.admin.support.page.text_7'), resolved: i18n.t('app.admin.support.page.text_8'), closed: i18n.t('app.admin.support.page.text_9') }

export default function SupportPage() {
  const [rows] = useState<TicketRow[]>([
    {
      id: "TKT-1",
      ticket_code: "SUP-8820",
      subject: i18n.t('app.admin.support.page.text_10'),
      priority: "high",
      status: "open",
      category: i18n.t('app.admin.support.page.text_11'),
      assigned_to: i18n.t('app.admin.support.page.text_12'),
      updated_at: new Date().toISOString(),
      customers: { name: i18n.t('app.admin.support.page.text_13') }
    },
    {
      id: "TKT-2",
      ticket_code: "SUP-8821",
      subject: i18n.t('app.admin.support.page.text_14'),
      priority: "medium",
      status: "in_progress",
      category: i18n.t('app.admin.support.page.text_15'),
      assigned_to: i18n.t('app.admin.support.page.text_16'),
      updated_at: new Date(Date.now() - 7200000).toISOString(),
      customers: { name: i18n.t('app.admin.support.page.text_17') }
    },
    {
      id: "TKT-3",
      ticket_code: "SUP-8822",
      subject: i18n.t('app.admin.support.page.text_18'),
      priority: "low",
      status: "waiting",
      category: i18n.t('app.admin.support.page.text_19'),
      assigned_to: i18n.t('app.admin.support.page.text_20'),
      updated_at: new Date(Date.now() - 86400000).toISOString(),
      customers: { name: i18n.t('app.admin.support.page.text_21') }
    },
    {
      id: "TKT-4",
      ticket_code: "SUP-8815",
      subject: i18n.t('app.admin.support.page.text_22'),
      priority: "urgent",
      status: "resolved",
      category: i18n.t('app.admin.support.page.text_23'),
      assigned_to: i18n.t('app.admin.support.page.text_24'),
      updated_at: new Date(Date.now() - 172800000).toISOString(),
      customers: { name: i18n.t('app.admin.support.page.text_25') }
    }
  ])
  const [openCount] = useState(1)
  const [progCount] = useState(1)
  const [resolvedCount] = useState(1)
  const [urgentCount] = useState(1)

  const columns: Column<TicketRow>[] = [
    { key: "code", header: i18n.t('app.admin.support.page.text_26'), cell: (r) => <span className="font-mono text-[12.5px] font-semibold">{r.ticket_code}</span> },
    { key: "subject", header: i18n.t('app.admin.support.page.text_27'), cell: (r) => <div><p className="text-[12.5px] font-medium">{r.subject}</p><p className="text-[11px] text-muted-foreground">{r.customers?.name ?? "—"}</p></div> },
    { key: "cat", header: i18n.t('app.admin.support.page.text_28'), cell: (r) => <span className="text-[12px] text-muted-foreground">{r.category ?? "—"}</span> },
    { key: "pri", header: i18n.t('app.admin.support.page.text_29'), cell: (r) => <StatusBadge tone={priTone[r.priority] ?? "neutral"} size="sm">{priLabel[r.priority] ?? r.priority}</StatusBadge> },
    { key: "st", header: i18n.t('app.admin.support.page.text_30'), cell: (r) => <StatusBadge tone={stTone[r.status] ?? "neutral"} size="sm">{stLabel[r.status] ?? r.status}</StatusBadge> },
    { key: "agent", header: i18n.t('app.admin.support.page.text_31'), cell: (r) => <span className="text-[12px]">{r.assigned_to ?? "—"}</span> },
    { key: "updated", header: i18n.t('app.admin.support.page.text_32'), cell: (r) => <span className="text-[11.5px] text-muted-foreground">{formatDateTime(r.updated_at)}</span> },
  ]

  return (
    <div className="space-y-6">
      <PageHeader
        title={i18n.t('app.admin.support.page.text_33')}
        description={i18n.t('app.admin.support.page.text_34')}
        breadcrumbs={[{ label: i18n.t('app.admin.support.page.text_35'), href: "#" }, { label: i18n.t('app.admin.support.page.text_36') }]}
      />

      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        <KpiCard label={i18n.t('app.admin.support.page.text_37')} value={String(openCount)} icon={LifeBuoy} tone="warning" accent />
        <KpiCard label={i18n.t('app.admin.support.page.text_38')} value={String(progCount)} icon={Clock} tone="processing" />
        <KpiCard label={i18n.t('app.admin.support.page.text_39')} value={String(resolvedCount)} icon={CheckCircle2} tone="success" />
        <KpiCard label={i18n.t('app.admin.support.page.text_40')} value={String(urgentCount)} icon={AlertCircle} tone="danger" />
      </div>

      <SectionCard title={i18n.t('app.admin.support.page.text_41')} padded={false}>
        {rows.length === 0 ? (
          <div className="px-5 py-8 text-center text-[12.5px] text-muted-foreground">{i18n.t('app.admin.support.page.text_42')}</div>
        ) : (
          <DataTable columns={columns} data={rows} rowKey={(r) => r.id} />
        )}
      </SectionCard>
    </div>
  )
}