"use client"

import Link from "next/link"
import { useEffect, useMemo, useState } from "react"
import { useLocale, useTranslations } from "next-intl"

import { listCustomerInboxMessages, type CaseMessage, listCustomerCases, type CaseLite } from "@/src/lib/api/customer-portal"

import {
  Mail,
  Search,
  Filter,
  RefreshCw,
  ArrowRight,
  CircleDot,
  AlertCircle,
  Plus,
  X,
  FolderKanban,
} from "lucide-react"

type FilterKey = "all" | "unread" | "action"

function cx(...c: Array<string | false | null | undefined>) {
  return c.filter(Boolean).join(" ")
}

function Badge({
  children,
  tone = "neutral",
}: {
  children: React.ReactNode
  tone?: "neutral" | "emerald" | "amber"
}) {
  const cls =
    tone === "emerald"
      ? "bg-emerald-50 text-emerald-700 border-emerald-200"
      : tone === "amber"
      ? "bg-amber-50 text-amber-700 border-amber-200"
      : "bg-neutral-50 text-neutral-700 border-neutral-200"
  return <span className={cx("inline-flex items-center rounded-full border px-2.5 py-1 text-xs", cls)}>{children}</span>
}

function fmtTime(s?: string | null) {
  if (!s) return ""
  const d = new Date(s)
  if (Number.isNaN(d.getTime())) return s
  return d.toLocaleString()
}

export default function ClientMessagesPage() {
  const t = useTranslations("clientPortal")
  const locale = useLocale()

  const [q, setQ] = useState("")
  const [filter, setFilter] = useState<FilterKey>("all")

  const [rows, setRows] = useState<CaseMessage[]>([])
  const [loading, setLoading] = useState(false)
  const [err, setErr] = useState<string | null>(null)

  // New message modal
  const [newOpen, setNewOpen] = useState(false)
  const [casesLoading, setCasesLoading] = useState(false)
  const [casesErr, setCasesErr] = useState<string | null>(null)
  const [caseQ, setCaseQ] = useState("")
  const [cases, setCases] = useState<CaseLite[]>([])

  async function load() {
    setLoading(true)
    setErr(null)
    try {
      const data = await listCustomerInboxMessages({
        q: q.trim() || undefined,
        unread: filter === "unread",
        action_required: filter === "action",
      })
      setRows(data)
    } catch (e: any) {
      setErr(e?.message || t("common.error"))
    } finally {
      setLoading(false)
    }
  }

  async function loadCases() {
    setCasesLoading(true)
    setCasesErr(null)
    try {
      // On charge les dossiers du client (pour choisir un fil de discussion)
      const cs = await listCustomerCases({ q: caseQ.trim() || undefined })
      setCases(cs)
    } catch (e: any) {
      setCasesErr(e?.message || t("common.error"))
    } finally {
      setCasesLoading(false)
    }
  }

  useEffect(() => {
    load()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filter])

  // Regrouper par dossier et garder le dernier message
  const threads = useMemo(() => {
    const map = new Map<number, { last: CaseMessage; unread: boolean; action: boolean }>()
    for (const m of rows) {
      const prev = map.get(m.case_id)
      const isUnread = m.is_read === false
      const isAction = !!m.action_required

      if (!prev) {
        map.set(m.case_id, { last: m, unread: isUnread, action: isAction })
        continue
      }

      const last = prev.last.id >= m.id ? prev.last : m
      map.set(m.case_id, {
        last,
        unread: prev.unread || isUnread,
        action: prev.action || isAction,
      })
    }

    return Array.from(map.values())
      .sort((a, b) => b.last.id - a.last.id)
      .map((x) => ({
        case_id: x.last.case_id,
        case_reference: x.last.case_reference,
        case_title: x.last.case_title,
        last: x.last,
        unread: x.unread,
        action: x.action,
      }))
  }, [rows])

  // open modal => load cases
  useEffect(() => {
    if (!newOpen) return
    loadCases()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [newOpen])

  // reload cases when searching in modal (debounce light)
  useEffect(() => {
    if (!newOpen) return
    const id = setTimeout(() => loadCases(), 250)
    return () => clearTimeout(id)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [caseQ])

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-start justify-between gap-3">
        <div className="space-y-1">
          <div className="flex items-center gap-2">
            <Mail className="h-5 w-5 text-emerald-600" />
            <h1 className="text-xl font-semibold">{t("messages.title")}</h1>
          </div>
          <div className="text-sm text-muted-foreground">{t("messages.subtitle")}</div>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={() => setNewOpen(true)}
            className="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700"
            type="button"
          >
            <Plus className="h-4 w-4" />
            {t("messages.actions.new")}
          </button>

          <button
            onClick={load}
            className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm hover:bg-black/5"
            type="button"
          >
            <RefreshCw className="h-4 w-4" />
            {t("common.refresh")}
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="rounded-2xl border bg-white p-3 space-y-3">
        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
          <div className="flex items-center gap-2 rounded-xl border bg-white px-3 py-2">
            <Search className="h-4 w-4 text-neutral-400" />
            <input
              className="w-full outline-none text-sm"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder={t("messages.search")}
            />
          </div>

          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <Filter className="h-4 w-4" />
            {t("messages.filters.all")} / {t("messages.filters.unread")} / {t("messages.filters.actionRequired")}
          </div>
        </div>

        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            onClick={() => setFilter("all")}
            className={cx(
              "rounded-xl border px-3 py-2 text-sm",
              filter === "all" ? "bg-emerald-600 text-white border-emerald-600" : "hover:bg-black/5 border-emerald-200"
            )}
          >
            {t("messages.filters.all")}
          </button>

          <button
            type="button"
            onClick={() => setFilter("unread")}
            className={cx(
              "rounded-xl border px-3 py-2 text-sm inline-flex items-center gap-2",
              filter === "unread" ? "bg-emerald-600 text-white border-emerald-600" : "hover:bg-black/5 border-emerald-200"
            )}
          >
            <CircleDot className="h-4 w-4" />
            {t("messages.filters.unread")}
          </button>

          <button
            type="button"
            onClick={() => setFilter("action")}
            className={cx(
              "rounded-xl border px-3 py-2 text-sm inline-flex items-center gap-2",
              filter === "action" ? "bg-emerald-600 text-white border-emerald-600" : "hover:bg-black/5 border-emerald-200"
            )}
          >
            <AlertCircle className="h-4 w-4" />
            {t("messages.filters.actionRequired")}
          </button>

          <button
            type="button"
            onClick={load}
            className="rounded-xl border px-3 py-2 text-sm hover:bg-black/5 border-emerald-200"
          >
            {t("messages.actions.search")}
          </button>
        </div>
      </div>

      {/* Error/Loading */}
      {err && <div className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">{err}</div>}

      {loading ? (
        <div className="rounded-xl border p-3 text-sm">{t("common.loading")}</div>
      ) : (
        <div className="rounded-2xl border bg-white overflow-hidden">
          {threads.length === 0 ? (
            <div className="p-6">
              <div className="text-sm font-medium">{t("messages.empty")}</div>
              <div className="mt-1 text-sm text-muted-foreground">{t("messages.emptyHint")}</div>

              <div className="mt-4 flex flex-wrap gap-2">
                <button
                  type="button"
                  onClick={() => setNewOpen(true)}
                  className="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700"
                >
                  <Plus className="h-4 w-4" />
                  {t("messages.actions.new")}
                </button>

                <Link
                  href={`/${locale}/client/cases`}
                  className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm hover:bg-black/5"
                >
                  <FolderKanban className="h-4 w-4" />
                  {t("messages.actions.goToCases")}
                </Link>
              </div>
            </div>
          ) : (
            threads.map((th) => (
              <Link
                key={th.case_id}
                href={`/${locale}/client/messages/${th.case_id}`}
                className="block border-b p-4 hover:bg-black/5"
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0 space-y-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <div className="text-sm font-semibold truncate">
                        {th.case_reference ? th.case_reference : `#${th.case_id}`}
                      </div>
                      {th.unread ? <Badge tone="emerald">{t("messages.badges.unread")}</Badge> : null}
                      {th.action ? <Badge tone="amber">{t("messages.badges.actionRequired")}</Badge> : null}
                    </div>

                    <div className="text-sm text-muted-foreground truncate">{th.case_title || "—"}</div>

                    <div className="text-sm truncate">
                      <span className="text-muted-foreground">
                        {th.last.author?.username ? `@${th.last.author.username}` : "—"} • {fmtTime(th.last.created_at)} —{" "}
                      </span>
                      <span className="text-neutral-900">{th.last.body}</span>
                    </div>
                  </div>

                  <div className="shrink-0 inline-flex items-center gap-2 text-emerald-700">
                    <span className="text-sm">{t("messages.openCase")}</span>
                    <ArrowRight className="h-4 w-4" />
                  </div>
                </div>
              </Link>
            ))
          )}
        </div>
      )}

      {/* New message modal */}
      {newOpen ? (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
          <div className="w-full max-w-2xl rounded-2xl bg-white shadow-xl overflow-hidden">
            <div className="px-5 py-4 border-b flex items-start justify-between gap-3">
              <div>
                <div className="text-lg font-semibold">{t("messages.new.title")}</div>
                <div className="text-sm text-muted-foreground">{t("messages.new.subtitle")}</div>
              </div>

              <button
                className="rounded-xl p-2 hover:bg-neutral-50"
                onClick={() => setNewOpen(false)}
                type="button"
              >
                <X className="h-5 w-5 text-neutral-500" />
              </button>
            </div>

            <div className="p-5 space-y-3">
              <div className="flex items-center gap-2 rounded-xl border bg-white px-3 py-2">
                <Search className="h-4 w-4 text-neutral-400" />
                <input
                  className="w-full outline-none text-sm"
                  value={caseQ}
                  onChange={(e) => setCaseQ(e.target.value)}
                  placeholder={t("messages.new.searchCases")}
                />
              </div>

              {casesErr ? (
                <div className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">{casesErr}</div>
              ) : null}

              <div className="rounded-xl border overflow-hidden">
                {casesLoading ? (
                  <div className="p-3 text-sm">{t("common.loading")}</div>
                ) : cases.length === 0 ? (
                  <div className="p-3 text-sm text-muted-foreground">{t("messages.new.noCases")}</div>
                ) : (
                  cases.map((c) => (
                    <Link
                      key={c.id}
                      href={`/${locale}/client/messages/${c.id}`}
                      className="block p-3 border-b hover:bg-black/5"
                      onClick={() => setNewOpen(false)}
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="min-w-0">
                          <div className="text-sm font-medium truncate">{c.reference}</div>
                          <div className="text-sm text-muted-foreground truncate">{c.title}</div>
                        </div>
                        <span className="text-xs text-muted-foreground">{c.status}</span>
                      </div>
                    </Link>
                  ))
                )}
              </div>

              <div className="flex justify-end">
                <button
                  type="button"
                  onClick={() => setNewOpen(false)}
                  className="rounded-xl px-4 py-2 text-sm border bg-white hover:bg-neutral-50"
                >
                  {t("messages.new.cancel")}
                </button>
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  )
}