"use client"

import { useEffect, useMemo, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import { useTranslations } from "next-intl"

import {
  listCustomerMemberships,
  createCustomerMembership,
  updateCustomerMembership,
  deleteCustomerMembership,
  type CustomerMembership,
  type CustomerMembershipCreate,
  type CustomerMembershipRole,
  type CustomerMembershipStatus,
} from "@/src/lib/api/customer-memberships"

import {
  ArrowLeft, Plus, Search, Trash2, Pencil, X, UserPlus,
  ShieldCheck, ShieldX, Star, Copy, Check,
} from "lucide-react"

// ── Palette navy/teal ────────────────────────────────────────────────────────
const navy   = "#1a3578"
const navy2  = "#2655b0"
const teal   = "#4dba96"

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

const inputCls = "w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm outline-none focus:border-[#2655b0] focus:ring-2 focus:ring-[#2655b0]/20 transition disabled:opacity-50"
const labelCls = "block text-xs font-medium text-slate-500 mb-1"

const DEFAULT_CREATE: CustomerMembershipCreate = {
  email: "",
  role: "viewer",
  is_primary_contact: false,
  username: "",
  first_name: "",
  last_name: "",
  telephone: "",
  departement: "",
}

type ModalMode = "create" | "edit"

function RoleBadge({ role, labels }: { role: string; labels: Record<string, string> }) {
  const colorMap: Record<string, { bg: string; text: string }> = {
    owner:   { bg: "rgba(77,186,150,0.12)",  text: teal },
    manager: { bg: "rgba(38,85,176,0.12)",   text: navy2 },
    viewer:  { bg: "rgba(100,116,139,0.12)", text: "#475569" },
  }
  const s = colorMap[role] ?? { bg: "rgba(100,116,139,0.12)", text: "#475569" }
  return (
    <span className="text-[11px] px-2 py-0.5 rounded-full font-medium" style={{ background: s.bg, color: s.text }}>
      {labels[role] ?? role}
    </span>
  )
}

function StatusBadge({ status, labels }: { status: string; labels: { active: string; suspended: string } }) {
  const active = status === "active"
  return (
    <span
      className="text-[11px] px-2 py-0.5 rounded-full font-medium"
      style={{
        background: active ? "rgba(34,197,94,0.12)" : "rgba(239,68,68,0.12)",
        color: active ? "#16a34a" : "#dc2626",
      }}
    >
      {active ? labels.active : labels.suspended}
    </span>
  )
}

export default function Page() {
  const router     = useRouter()
  const t          = useTranslations("customers.client_users")
  const params     = useParams<{ id: string }>()
  const customerId = Number(params?.id)

  const [items,   setItems]   = useState<CustomerMembership[]>([])
  const [loading, setLoading] = useState(true)
  const [busy,    setBusy]    = useState<string | null>(null)
  const [err,     setErr]     = useState<string | null>(null)
  const [flash,   setFlash]   = useState<string | null>(null)

  const [q, setQ] = useState("")

  // modal
  const [open,    setOpen]    = useState(false)
  const [mode,    setMode]    = useState<ModalMode>("create")
  const [editing, setEditing] = useState<CustomerMembership | null>(null)
  const [form,    setForm]    = useState<CustomerMembershipCreate>({ ...DEFAULT_CREATE })

  // copy state
  const [copied, setCopied] = useState(false)

  const filtered = useMemo(() => {
    const query = q.trim().toLowerCase()
    if (!query) return items
    return items.filter((m) => {
      const hay = [m.user_label, m.role, m.status, m.is_primary_contact ? "principal" : ""]
        .filter(Boolean).join(" ").toLowerCase()
      return hay.includes(query)
    })
  }, [q, items])

  function showFlash(msg: string) {
    setFlash(msg)
    setTimeout(() => setFlash(null), 4000)
  }

  useEffect(() => {
    if (!customerId || Number.isNaN(customerId)) return
    ;(async () => {
      setLoading(true); setErr(null)
      try {
        setItems(await listCustomerMemberships(customerId))
      } catch (e: any) {
        setErr(e?.message || "Erreur de chargement.")
      } finally {
        setLoading(false)
      }
    })()
  }, [customerId])

  function openCreate() {
    setErr(null); setMode("create"); setEditing(null)
    setForm({ ...DEFAULT_CREATE }); setOpen(true)
  }

  function openEdit(m: CustomerMembership) {
    setErr(null); setMode("edit"); setEditing(m)
    setForm({ ...DEFAULT_CREATE, role: m.role, is_primary_contact: m.is_primary_contact })
    setOpen(true)
  }

  function closeModal() { if (!busy) setOpen(false) }

  async function onSubmit() {
    setErr(null)
    setBusy("submit")
    try {
      if (mode === "create") {
        const email = (form.email || "").trim()
        if (!email) { setErr("Email obligatoire."); return }
        const created = await createCustomerMembership(customerId, {
          email,
          role: (form.role || "viewer") as CustomerMembershipRole,
          is_primary_contact: !!form.is_primary_contact,
          username:    (form.username    || "").trim() || undefined,
          first_name:  (form.first_name  || "").trim() || undefined,
          last_name:   (form.last_name   || "").trim() || undefined,
          telephone:   (form.telephone   || "").trim() || undefined,
          departement: (form.departement || "").trim() || undefined,
        })
        setItems((p) => [created, ...p])
        setOpen(false)
        showFlash(t("flash.added"))
      } else {
        if (!editing) throw new Error("No editing membership")
        const updated = await updateCustomerMembership(customerId, editing.id, {
          role: (form.role || editing.role) as CustomerMembershipRole,
          status: (editing.status || "active") as CustomerMembershipStatus,
          is_primary_contact: !!form.is_primary_contact,
        })
        setItems((p) => p.map((x) => (x.id === editing.id ? updated : x)))
        setOpen(false)
        showFlash(t("flash.updated"))
      }
    } catch (e: any) {
      setErr(e?.message || "Échec enregistrement.")
    } finally {
      setBusy(null)
    }
  }

  async function onToggleStatus(m: CustomerMembership) {
    setErr(null); setBusy(`status-${m.id}`)
    try {
      const next: CustomerMembershipStatus = m.status === "active" ? "suspended" : "active"
      const updated = await updateCustomerMembership(customerId, m.id, { status: next })
      setItems((p) => p.map((x) => (x.id === m.id ? updated : x)))
      showFlash(next === "active" ? t("flash.activated") : t("flash.suspended"))
    } catch (e: any) {
      setErr(e?.message || "Échec mise à jour.")
    } finally {
      setBusy(null)
    }
  }

  async function onDelete(m: CustomerMembership) {
    if (!confirm(t("confirm_delete", { name: m.user_label }))) return
    setErr(null); setBusy(`del-${m.id}`)
    try {
      await deleteCustomerMembership(customerId, m.id)
      setItems((p) => p.filter((x) => x.id !== m.id))
      showFlash(t("flash.deleted"))
    } catch (e: any) {
      setErr(e?.message || "Échec suppression.")
    } finally {
      setBusy(null)
    }
  }

  const isBusy = (key: string) => busy === key

  return (
    <div className="space-y-5">

      {/* Flash */}
      {flash && (
        <div className="fixed top-4 right-4 z-[100] rounded-2xl px-5 py-3 text-sm font-medium text-white shadow-lg"
          style={{ background: teal }}>
          {flash}
        </div>
      )}

      {/* Header */}
      <div className="flex items-start justify-between gap-3">
        <div className="flex items-start gap-3">
          <button
            onClick={() => router.back()}
            className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-600 shadow-sm hover:bg-slate-50 transition"
          >
            <ArrowLeft className="h-4 w-4" />
            {t("back")}
          </button>

          <div>
            <h1 className="text-xl font-bold" style={{ color: navy }}>{t("title")}</h1>
            <p className="text-sm text-slate-500">{t("subtitle")}</p>
          </div>
        </div>

        <button
          onClick={openCreate}
          className="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm hover:opacity-90 transition"
          style={{ background: navy }}
        >
          <UserPlus className="h-4 w-4" style={{ color: teal }} />
          {t("add")}
        </button>
      </div>

      {/* Error */}
      {err && (
        <div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          {err}
        </div>
      )}

      {/* Search bar */}
      <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
        <div className="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2">
          <Search className="h-4 w-4 text-slate-400 shrink-0" />
          <input
            className="w-full bg-transparent outline-none text-sm text-slate-700 placeholder:text-slate-400"
            placeholder={t("search_placeholder")}
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
          <span className="text-xs text-slate-400">{filtered.length}</span>
        </div>
      </div>

      {/* List */}
      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
        {loading ? (
          <div className="p-6 text-sm text-slate-500">{t("loading")}</div>
        ) : filtered.length === 0 ? (
          <div className="p-6 text-sm text-slate-500">{t("empty")}</div>
        ) : (
          <div className="divide-y divide-slate-100">
            {filtered.map((m) => {
              const delBusy    = isBusy(`del-${m.id}`)
              const statusBusy = isBusy(`status-${m.id}`)
              return (
                <div key={m.id} className="p-4 flex items-center gap-4 hover:bg-slate-50 transition">
                  {/* Avatar */}
                  <div className="h-10 w-10 rounded-full flex items-center justify-center shrink-0 text-sm font-bold text-white"
                    style={{ background: navy2 }}>
                    {(m.user_label || "?").charAt(0).toUpperCase()}
                  </div>

                  {/* Info */}
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="font-semibold text-slate-800 truncate">{m.user_label || "—"}</span>
                      <RoleBadge role={m.role} labels={{ owner: t("role.owner"), manager: t("role.manager"), viewer: t("role.viewer") } as any} />
                      <StatusBadge status={m.status} labels={{ active: t("status.active"), suspended: t("status.suspended") }} />
                      {m.is_primary_contact && (
                        <span className="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full font-medium"
                          style={{ background: "rgba(38,85,176,0.12)", color: navy2 }}>
                          <Star className="h-3 w-3" />
                          {t("primary_badge")}
                        </span>
                      )}
                    </div>
                    <div className="mt-0.5 text-xs text-slate-400">
                      {(m as any).user_email && <span className="mr-3">{(m as any).user_email}</span>}
                      {m.created_at && (
                        <span>{t("added_on")} {new Date(m.created_at).toLocaleDateString()}</span>
                      )}
                    </div>
                  </div>

                  {/* Actions */}
                  <div className="shrink-0 flex items-center gap-2">
                    <button
                      onClick={() => onToggleStatus(m)}
                      disabled={!!busy}
                      className="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 shadow-sm hover:bg-slate-50 transition disabled:opacity-50"
                    >
                      {statusBusy ? (
                        <span className="h-4 w-4 border-2 border-slate-300 border-t-slate-600 rounded-full animate-spin" />
                      ) : m.status === "active" ? (
                        <ShieldX className="h-4 w-4 text-red-500" />
                      ) : (
                        <ShieldCheck className="h-4 w-4 text-green-600" />
                      )}
                      {m.status === "active" ? t("actions.suspend") : t("actions.activate")}
                    </button>

                    <button
                      onClick={() => openEdit(m)}
                      disabled={!!busy}
                      className="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 shadow-sm hover:bg-slate-50 transition disabled:opacity-50"
                    >
                      <Pencil className="h-4 w-4" style={{ color: navy2 }} />
                      {t("actions.edit")}
                    </button>

                    <button
                      onClick={() => onDelete(m)}
                      disabled={!!busy}
                      className="inline-flex items-center gap-1.5 rounded-xl border border-red-200 bg-white px-3 py-1.5 text-xs text-red-600 shadow-sm hover:bg-red-50 transition disabled:opacity-50"
                    >
                      {delBusy ? (
                        <span className="h-4 w-4 border-2 border-red-300 border-t-red-600 rounded-full animate-spin" />
                      ) : (
                        <Trash2 className="h-4 w-4" />
                      )}
                      {t("actions.delete")}
                    </button>
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>

      {/* ── Modal ─────────────────────────────────────────────────────────────── */}
      {open && (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
          <div className="w-full max-w-lg rounded-2xl bg-white shadow-2xl overflow-hidden">
            {/* Modal header */}
            <div className="px-6 py-4 border-b border-slate-100 flex items-start justify-between gap-3"
              style={{ background: `linear-gradient(135deg, ${navy} 0%, ${navy2} 100%)` }}>
              <div>
                <div className="text-base font-bold text-white">
                  {mode === "create" ? t("modal.create_title") : t("modal.edit_title")}
                </div>
                <div className="text-xs text-white/70 mt-0.5">
                  {mode === "create" ? t("modal.subtitle_create") : t("modal.subtitle_edit")}
                </div>
              </div>
              <button onClick={closeModal} disabled={!!busy}
                className="rounded-xl p-1.5 hover:bg-white/10 transition text-white/80">
                <X className="h-5 w-5" />
              </button>
            </div>

            <div className="p-6 space-y-4">
              {err && (
                <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                  {err}
                </div>
              )}

              {mode === "create" && (
                <div>
                  <label className={labelCls}>{t("modal.email_label")} *</label>
                  <input
                    className={inputCls}
                    value={form.email || ""}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    disabled={!!busy}
                    type="email"
                  />
                </div>
              )}

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className={labelCls}>{t("modal.role_label")}</label>
                  <select
                    className={inputCls}
                    value={(form.role as any) || "viewer"}
                    onChange={(e) => setForm({ ...form, role: e.target.value as any })}
                    disabled={!!busy}
                  >
                    <option value="owner">{t("modal.role_owner")}</option>
                    <option value="manager">{t("modal.role_manager")}</option>
                    <option value="viewer">{t("modal.role_viewer")}</option>
                  </select>
                </div>

                <div>
                  <label className={labelCls}>{t("modal.primary_label")}</label>
                  <select
                    className={inputCls}
                    value={form.is_primary_contact ? "yes" : "no"}
                    onChange={(e) => setForm({ ...form, is_primary_contact: e.target.value === "yes" })}
                    disabled={!!busy}
                  >
                    <option value="no">{t("modal.no")}</option>
                    <option value="yes">{t("modal.yes")}</option>
                  </select>
                </div>
              </div>

              {mode === "create" && (
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className={labelCls}>{t("modal.first_name_label")}</label>
                    <input className={inputCls} value={form.first_name || ""}
                      onChange={(e) => setForm({ ...form, first_name: e.target.value })}
                      disabled={!!busy} />
                  </div>
                  <div>
                    <label className={labelCls}>{t("modal.last_name_label")}</label>
                    <input className={inputCls} value={form.last_name || ""}
                      onChange={(e) => setForm({ ...form, last_name: e.target.value })}
                      disabled={!!busy} />
                  </div>
                  <div>
                    <label className={labelCls}>{t("modal.phone_label")}</label>
                    <input className={inputCls} value={form.telephone || ""}
                      onChange={(e) => setForm({ ...form, telephone: e.target.value })}
                      disabled={!!busy} type="tel" />
                  </div>
                  <div>
                    <label className={labelCls}>{t("modal.dept_label")}</label>
                    <input className={inputCls} value={form.departement || ""}
                      onChange={(e) => setForm({ ...form, departement: e.target.value })}
                      disabled={!!busy} />
                  </div>
                </div>
              )}
            </div>

            {/* Modal footer */}
            <div className="px-6 py-4 border-t border-slate-100 flex items-center justify-end gap-2 bg-slate-50">
              <button onClick={closeModal} disabled={!!busy}
                className="rounded-xl px-4 py-2 text-sm border border-slate-200 bg-white text-slate-600 hover:bg-slate-100 transition disabled:opacity-50">
                {t("modal.cancel")}
              </button>
              <button onClick={onSubmit} disabled={!!busy}
                className={cx(
                  "inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm hover:opacity-90 transition",
                  busy === "submit" && "opacity-70"
                )}
                style={{ background: navy }}>
                {busy === "submit" ? (
                  <span className="h-4 w-4 border-2 border-white/40 border-t-white rounded-full animate-spin" />
                ) : (
                  <Plus className="h-4 w-4" style={{ color: teal }} />
                )}
                {busy === "submit"
                  ? t("modal.saving")
                  : mode === "create" ? t("modal.add") : t("modal.update")}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}