"use client"

import { useEffect, useMemo, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import { useTranslations } from "next-intl"
import Link from "next/link"
import { ArrowLeft, Plus, Phone, MessageSquareText, Mail, CalendarClock, CreditCard } from "lucide-react"

import {
  getCollectionCaseTimeline,
  createCollectionAction,
  createPaymentPromise,
  createPayment,
  type CollectionCaseTimeline,
  type CollectionActionType,
} from "@/src/lib/api/collections"

function money(v?: string | null) {
  if (!v) return "—"
  return v
}

export default function CollectionCaseDetailPage() {
  const t = useTranslations("collections")
  const tc = useTranslations("common")
  const params = useParams()
  const router = useRouter()
  const id = Number(params.id)

  const [loading, setLoading] = useState(true)
  const [data, setData] = useState<CollectionCaseTimeline | null>(null)

  async function load() {
    setLoading(true)
    try {
      const d = await getCollectionCaseTimeline(id, 100)
      setData(d)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (!Number.isFinite(id)) return
    load()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id])

  const kpi = useMemo(() => {
    const c = data?.case
    return {
      totalDue: c?.amount_due ?? "—",
      totalPaid: c?.amount_collected ?? "—",
      balance: c?.amount_due ?? "—",
      status: c?.status ?? "—",
      priority: c?.priority ?? "—",
      overdue: (c as any)?.is_overdue ?? false,
    }
  }, [data])

  async function quickAction(action_type: CollectionActionType) {
    if (!data) return
    await createCollectionAction({
      case: data.case.id,
      action_type,
      summary: t(`quickActions.${action_type}` as any),
    })
    await load()
  }

  async function quickPromise() {
    if (!data) return
    const promised_date = new Date()
    promised_date.setDate(promised_date.getDate() + 3)
    const yyyy = promised_date.getFullYear()
    const mm = String(promised_date.getMonth() + 1).padStart(2, "0")
    const dd = String(promised_date.getDate()).padStart(2, "0")

    await createPaymentPromise({
      case: data.case.id,
      amount: "0.00",
      promised_date: `${yyyy}-${mm}-${dd}`,
      notes: t("promises.defaultNote"),
    })
    await load()
  }

  async function quickPayment() {
    if (!data) return
    await createPayment({
      case: data.case.id,
      amount: "0.00",
      method: "other",
      reference: "",
    })
    await load()
  }

  return (
    <div className="space-y-4">
      <div className="flex items-start justify-between gap-3">
        <div className="space-y-1">
          <button
            className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm"
            onClick={() => router.back()}
          >
            <ArrowLeft className="h-4 w-4" />
            {tc("back")}
          </button>

          <h1 className="text-xl font-semibold">{data?.case.reference || t("caseDetail.title")}</h1>
          <p className="text-sm text-slate-600">{t("caseDetail.subtitle")}</p>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <button
            className="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-white"
            style={{ backgroundColor: "#42210b" }}
            onClick={() => alert("Edit modal next step")}
          >
            <Plus className="h-4 w-4" />
            {t("actions.editCase")}
          </button>
        </div>
      </div>

      {loading || !data ? (
        <div className="rounded-xl border bg-white p-3 text-sm text-slate-600">{tc("loading")}…</div>
      ) : (
        <>
          <div className="grid gap-3 md:grid-cols-4">
            <div className="rounded-xl border bg-white p-3">
              <div className="text-xs text-slate-500">{t("kpis.totalDue")}</div>
              <div className="text-lg font-semibold">{money(kpi.totalDue)}</div>
            </div>
            <div className="rounded-xl border bg-white p-3">
              <div className="text-xs text-slate-500">{t("kpis.totalPaid")}</div>
              <div className="text-lg font-semibold">{money(kpi.totalPaid)}</div>
            </div>
            <div className="rounded-xl border bg-white p-3">
              <div className="text-xs text-slate-500">{t("kpis.balance")}</div>
              <div className="text-lg font-semibold">{money(kpi.balance)}</div>
            </div>
            <div className="rounded-xl border bg-white p-3">
              <div className="text-xs text-slate-500">{t("kpis.nextAction")}</div>
              <div className="text-lg font-semibold">{(data.case as any).next_action_date || "—"}</div>
              <div className="text-xs text-slate-600">{(data.case as any).next_action_type || "—"}</div>
            </div>
          </div>

          <div className="rounded-xl border bg-white p-3">
            <div className="text-sm font-medium">{t("caseDetail.quickActions")}</div>
            <div className="mt-2 flex flex-wrap gap-2">
              <button className="rounded-xl border px-3 py-2 text-sm inline-flex items-center gap-2" onClick={() => quickAction("call")}>
                <Phone className="h-4 w-4" />
                {t("actions.call")}
              </button>
              <button className="rounded-xl border px-3 py-2 text-sm inline-flex items-center gap-2" onClick={() => quickAction("sms")}>
                <MessageSquareText className="h-4 w-4" />
                {t("actions.sms")}
              </button>
              <button className="rounded-xl border px-3 py-2 text-sm inline-flex items-center gap-2" onClick={() => quickAction("email")}>
                <Mail className="h-4 w-4" />
                {t("actions.email")}
              </button>
              <button className="rounded-xl border px-3 py-2 text-sm inline-flex items-center gap-2" onClick={quickPromise}>
                <CalendarClock className="h-4 w-4" />
                {t("actions.promise")}
              </button>
              <button className="rounded-xl border px-3 py-2 text-sm inline-flex items-center gap-2" onClick={quickPayment}>
                <CreditCard className="h-4 w-4" />
                {t("actions.payment")}
              </button>
            </div>
          </div>

          <div className="grid gap-3 md:grid-cols-3">
            <div className="rounded-xl border bg-white md:col-span-2">
              <div className="border-b p-3 text-sm font-medium">{t("timeline.title")}</div>
              <div className="divide-y">
                {data.actions.length === 0 ? (
                  <div className="p-3 text-sm text-slate-600">{t("timeline.empty")}</div>
                ) : (
                  data.actions.map((a) => (
                    <div key={a.id} className="p-3">
                      <div className="flex items-center justify-between gap-2">
                        <div className="text-sm font-semibold">{t(`actionType.${a.action_type}` as any)}</div>
                        <div className="text-xs text-slate-500">{new Date(a.action_date).toLocaleString()}</div>
                      </div>
                      <div className="text-sm text-slate-700">{a.summary || "—"}</div>
                      {a.details ? <div className="mt-1 text-xs text-slate-600">{a.details}</div> : null}
                      {a.next_action_date ? (
                        <div className="mt-2 text-xs text-slate-600">
                          {t("fields.nextAction")}: {a.next_action_date} • {a.next_action_type || "—"}
                        </div>
                      ) : null}
                    </div>
                  ))
                )}
              </div>
            </div>

            <div className="space-y-3">
              <div className="rounded-xl border bg-white">
                <div className="border-b p-3 text-sm font-medium">{t("promises.title")}</div>
                <div className="divide-y">
                  {data.promises.length === 0 ? (
                    <div className="p-3 text-sm text-slate-600">{t("promises.empty")}</div>
                  ) : (
                    data.promises.map((p) => (
                      <div key={p.id} className="p-3">
                        <div className="text-sm font-semibold">{money(p.amount)}</div>
                        <div className="text-xs text-slate-600">{t("fields.date")}: {p.promised_date}</div>
                        <div className="text-xs text-slate-600">{t("fields.status")}: {p.status}</div>
                      </div>
                    ))
                  )}
                </div>
              </div>

              <div className="rounded-xl border bg-white">
                <div className="border-b p-3 text-sm font-medium">{t("payments.title")}</div>
                <div className="divide-y">
                  {data.payments.length === 0 ? (
                    <div className="p-3 text-sm text-slate-600">{t("payments.empty")}</div>
                  ) : (
                    data.payments.map((p) => (
                      <div key={p.id} className="p-3">
                        <div className="text-sm font-semibold">{money(p.amount)}</div>
                        <div className="text-xs text-slate-600">{t("fields.date")}: {new Date(p.paid_at).toLocaleString()}</div>
                        <div className="text-xs text-slate-600">{t("fields.method")}: {p.method}</div>
                        {p.reference ? <div className="text-xs text-slate-600">{t("fields.reference")}: {p.reference}</div> : null}
                      </div>
                    ))
                  )}
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  )
}