'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 { Bell, Mail, MessageSquare, Send, CheckCircle2 } from "lucide-react"
import { formatDateTime } from "@/lib/format"
import i18n from "@/lib/i18n";

type NotifRow = {
  id: string
  channel: string
  subject: string
  recipient: string
  segment: string | null
  status: string
  delivered_count: number
  created_at: string
}

const chIcon: Record<string, React.ReactNode> = {
  email: <Mail className="h-3.5 w-3.5" />,
  sms: <MessageSquare className="h-3.5 w-3.5" />,
  push: <Bell className="h-3.5 w-3.5" />,
  in_app: <Bell className="h-3.5 w-3.5" />,
}

const statusMap: Record<string, { label: string; tone: StatusTone }> = {
  sent: { label: i18n.t('app.admin.notifications.page.text_1'), tone: "success" },
  queued: { label: i18n.t('app.admin.notifications.page.text_2'), tone: "warning" },
  failed: { label: i18n.t('app.admin.notifications.page.text_3'), tone: "danger" },
  draft: { label: i18n.t('app.admin.notifications.page.text_4'), tone: "neutral" },
}

export default function NotificationsPage() {
  const [rows] = useState<NotifRow[]>([
    { id: "MSG-001", channel: "email", subject: i18n.t('app.admin.notifications.page.text_5'), recipient: i18n.t('app.admin.notifications.page.text_6'), segment: "Retail", status: "sent", delivered_count: 1450, created_at: new Date().toISOString() },
    { id: "MSG-002", channel: "sms", subject: i18n.t('app.admin.notifications.page.text_7'), recipient: "Ahmed Ali (+966500000000)", segment: null, status: "delivered", delivered_count: 1, created_at: new Date(Date.now() - 3600000).toISOString() },
    { id: "MSG-003", channel: "push", subject: i18n.t('app.admin.notifications.page.text_8'), recipient: i18n.t('app.admin.notifications.page.text_9'), segment: "Premium", status: "queued", delivered_count: 0, created_at: new Date(Date.now() - 7200000).toISOString() },
    { id: "MSG-004", channel: "email", subject: i18n.t('app.admin.notifications.page.text_10'), recipient: "M. Khalid", segment: null, status: "failed", delivered_count: 0, created_at: new Date(Date.now() - 86400000).toISOString() }
  ])
  const [sentCount] = useState(1250)
  const [queuedCount] = useState(45)
  const [failedCount] = useState(3)
  const [totalDelivered] = useState(1451)

  const columns: Column<NotifRow>[] = [
    {
      key: "ch",
      header: i18n.t('app.admin.notifications.page.text_11'),
      cell: (r) => (
        <span className="inline-flex items-center gap-1.5 rounded-md bg-muted px-2 py-0.5 text-[11.5px] font-medium">
          {chIcon[r.channel]}
          {r.channel}
        </span>
      ),
    },
    { key: "subject", header: i18n.t('app.admin.notifications.page.text_12'), cell: (r) => <span className="text-[13px] font-medium">{r.subject}</span> },
    { key: "recipient", header: i18n.t('app.admin.notifications.page.text_13'), cell: (r) => <span className="text-[12.5px] text-muted-foreground">{r.recipient}</span> },
    { key: "segment", header: i18n.t('app.admin.notifications.page.text_14'), cell: (r) => <span className="text-[12px] text-muted-foreground">{r.segment ?? "—"}</span> },
    { key: "count", header: i18n.t('app.admin.notifications.page.text_15'), cell: (r) => <span className="font-mono tabular-nums text-[12.5px] font-semibold">{r.delivered_count}</span> },
    { key: "status", header: i18n.t('app.admin.notifications.page.text_16'), cell: (r) => <StatusBadge tone={statusMap[r.status]?.tone ?? "neutral"} size="sm">{statusMap[r.status]?.label ?? r.status}</StatusBadge> },
    { key: "date", header: i18n.t('app.admin.notifications.page.text_17'), cell: (r) => <span className="text-[11.5px] text-muted-foreground">{formatDateTime(r.created_at)}</span> },
  ]

  return (
    <div className="space-y-6">
      <PageHeader
        title={i18n.t('app.admin.notifications.page.text_18')}
        description={i18n.t('app.admin.notifications.page.text_19')}
        breadcrumbs={[{ label: i18n.t('app.admin.notifications.page.text_20'), href: "#" }, { label: i18n.t('app.admin.notifications.page.text_21') }]}
      />

      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        <KpiCard label={i18n.t('app.admin.notifications.page.text_22')} value={String(sentCount)} icon={Send} tone="success" accent />
        <KpiCard label={i18n.t('app.admin.notifications.page.text_23')} value={String(queuedCount)} icon={Bell} tone="warning" />
        <KpiCard label={i18n.t('app.admin.notifications.page.text_24')} value={String(failedCount)} icon={MessageSquare} tone="danger" />
        <KpiCard label={i18n.t('app.admin.notifications.page.text_25')} value={totalDelivered.toLocaleString("ar-SA")} icon={CheckCircle2} tone="gold" />
      </div>

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