"use client"

import { useEffect, useState } from "react"
import { useParams, useRouter, useSearchParams } from "next/navigation"
import { useLocale } from "next-intl"
import {
  ArrowLeft, Save, Loader2, AlertTriangle, KeyRound, Eye, EyeOff,
  CheckCircle2, Shield,
} from "lucide-react"

import { getTenant, type Tenant } from "@/src/lib/api/tenants"
import { listRoles, updateMembership, listMembershipsByTenant, type Role } from "@/src/lib/api/memberships"
import { listUsers, updateUser, resetPassword, type User } from "@/src/lib/api/users"

const NAVY  = "#1a3578"
const NAVY2 = "#2655b0"
const TEAL  = "#4dba96"

const inputCls = "w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-800 outline-none placeholder:text-slate-400 transition hover:border-slate-300 focus:border-[#4dba96] focus:shadow-[0_0_0_3px_rgba(77,186,150,0.15)] disabled:opacity-50"

function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-widest text-slate-400">{label}</label>
      {children}
      {hint && <p className="mt-1 text-[11px] text-slate-400">{hint}</p>}
    </div>
  )
}

function SectionTitle({ children }: { children: React.ReactNode }) {
  return (
    <div className="mb-4 flex items-center gap-3">
      <div className="h-px flex-1 bg-slate-100" />
      <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{children}</span>
      <div className="h-px flex-1 bg-slate-100" />
    </div>
  )
}

// Checkboxes multi-rôles
function RolesSelector({
  roles, selected, onChange, disabled,
}: {
  roles: Role[]; selected: number[]; onChange: (ids: number[]) => void; disabled?: boolean
}) {
  function toggle(id: number) {
    onChange(selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id])
  }
  if (roles.length === 0) return <p className="text-sm text-slate-400">Aucun rôle disponible.</p>
  return (
    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
      {roles.map((r) => {
        const active = selected.includes(r.id)
        return (
          <button
            key={r.id}
            type="button"
            disabled={disabled}
            onClick={() => toggle(r.id)}
            className="flex items-center gap-3 rounded-xl border px-4 py-3 text-left text-sm font-medium transition active:scale-95 disabled:opacity-50"
            style={active
              ? { borderColor: NAVY, background: `${NAVY}0d`, color: NAVY }
              : { borderColor: "#e2e8f0", background: "#fff", color: "#475569" }}
          >
            <div
              className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 transition"
              style={active
                ? { borderColor: NAVY, backgroundColor: NAVY }
                : { borderColor: "#cbd5e1", backgroundColor: "#fff" }}
            >
              {active && (
                <svg className="h-3 w-3 text-white" fill="none" viewBox="0 0 12 12">
                  <path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              )}
            </div>
            <div>
              <span className="font-semibold">{r.label}</span>
            </div>
            {active && <Shield className="ml-auto h-3.5 w-3.5 shrink-0" style={{ color: TEAL }} />}
          </button>
        )
      })}
    </div>
  )
}

export default function EditTenantUserPage() {
  const { id, uid } = useParams<{ id: string; uid: string }>()
  const searchParams  = useSearchParams()
  const mid           = searchParams.get("mid")
  const tenantId      = Number(id)
  const userId        = Number(uid)
  const locale        = useLocale()
  const router        = useRouter()

  const [tenant,  setTenant]  = useState<Tenant | null>(null)
  const [user,    setUser]    = useState<User | null>(null)
  const [roles,   setRoles]   = useState<Role[]>([])
  const [loading, setLoading] = useState(true)
  const [saving,  setSaving]  = useState(false)
  const [error,   setError]   = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)

  // Informations personnelles
  const [firstName, setFirstName] = useState("")
  const [lastName,  setLastName]  = useState("")
  const [email,     setEmail]     = useState("")

  // Accès au tenant — multi-rôles
  const [selectedRoles, setSelectedRoles] = useState<number[]>([])
  const [isOwner,       setIsOwner]       = useState(false)
  const [status,        setStatus]        = useState<"active" | "invited" | "suspended">("active")

  // Reset mot de passe
  const [newPwd,       setNewPwd]       = useState("")
  const [showPwd,      setShowPwd]      = useState(false)
  const [resetLoading, setResetLoading] = useState(false)
  const [resetError,   setResetError]   = useState<string | null>(null)
  const [resetSuccess, setResetSuccess] = useState<string | null>(null)

  useEffect(() => {
    Promise.all([getTenant(tenantId), listUsers(), listRoles(), listMembershipsByTenant(tenantId)])
      .then(([t, users, r, memberships]) => {
        setTenant(t)
        setRoles(r)

        const u = users.find((x) => x.id === userId)
        if (u) {
          setUser(u)
          setFirstName(u.first_name ?? "")
          setLastName(u.last_name ?? "")
          setEmail(u.email ?? "")
        }

        const membership = mid
          ? memberships.find((m) => m.id === Number(mid))
          : memberships.find((m) => {
              const muid = typeof m.user === "object" ? (m.user as any).id : m.user
              return muid === userId
            })

        if (membership) {
          setStatus(membership.status)
          setSelectedRoles(membership.roles ?? [])
          setIsOwner(membership.is_owner ?? false)
        }
      })
      .catch((e) => setError(e?.message ?? "Erreur de chargement"))
      .finally(() => setLoading(false))
  }, [tenantId, userId]) // eslint-disable-line react-hooks/exhaustive-deps

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true); setError(null); setSuccess(null)
    try {
      await updateUser(userId, {
        first_name: firstName.trim() || undefined,
        last_name:  lastName.trim()  || undefined,
        email:      email.trim()     || undefined,
      })
      if (mid) {
        await updateMembership(Number(mid), {
          roles:    selectedRoles,
          status,
          is_owner: isOwner,
        })
      }
      setSuccess("Modifications enregistrées.")
      setTimeout(() => router.push(`/${locale}/admin/tenants/${tenantId}`), 800)
    } catch (ex: any) {
      setError(ex?.message ?? "Erreur lors de la mise à jour")
    } finally {
      setSaving(false)
    }
  }

  async function onResetPassword() {
    if (newPwd.length < 6) { setResetError("Le mot de passe doit contenir au moins 6 caractères."); return }
    setResetLoading(true); setResetError(null); setResetSuccess(null)
    try {
      const res = await resetPassword(userId, newPwd)
      setResetSuccess(res.detail ?? "Mot de passe réinitialisé.")
      setNewPwd("")
    } catch (ex: any) {
      setResetError(ex?.message ?? "Erreur lors de la réinitialisation")
    } finally {
      setResetLoading(false)
    }
  }

  const displayName = user
    ? [user.first_name, user.last_name].filter(Boolean).join(" ") || user.username
    : `Utilisateur #${userId}`

  if (loading) return (
    <div className="flex items-center justify-center gap-2 py-24 text-sm text-slate-400">
      <Loader2 className="h-5 w-5 animate-spin" /> Chargement…
    </div>
  )

  return (
    <form onSubmit={onSubmit}>
      <div className="space-y-6">

        {/* Navigation */}
        <div>
          <button type="button" onClick={() => router.push(`/${locale}/admin/tenants/${tenantId}`)}
            className="mb-3 flex items-center gap-1.5 text-sm text-slate-400 transition hover:text-slate-700">
            <ArrowLeft className="h-4 w-4" /> Retour — {tenant?.name}
          </button>
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex items-center gap-3">
              <div className="flex h-12 w-12 items-center justify-center rounded-2xl text-base font-bold text-white shadow-sm"
                style={{ background: `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)` }}>
                {displayName.slice(0, 2).toUpperCase()}
              </div>
              <div>
                <h1 className="text-xl font-bold text-slate-900">Modifier l'utilisateur</h1>
                <p className="text-sm text-slate-500">{displayName} · {tenant?.name}</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button type="button" onClick={() => router.back()}
                className="rounded-xl border bg-white px-4 py-2.5 text-sm font-medium text-slate-600 shadow-sm transition hover:bg-slate-50">
                Annuler
              </button>
              <button type="submit" disabled={saving}
                className="flex items-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition active:scale-95 disabled:opacity-70"
                style={{ background: `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)` }}>
                {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                {saving ? "Enregistrement…" : "Sauvegarder"}
              </button>
            </div>
          </div>
        </div>

        {error && (
          <div className="flex items-start gap-3 rounded-2xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />{error}
          </div>
        )}
        {success && (
          <div className="flex items-start gap-3 rounded-2xl border border-green-100 bg-green-50 px-4 py-3 text-sm text-green-700">
            <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />{success}
          </div>
        )}

        {/* ── Informations personnelles ──────────────────────────────── */}
        <div className="rounded-2xl border bg-white p-6 shadow-sm">
          <SectionTitle>Informations personnelles</SectionTitle>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <Field label="Prénom">
              <input className={inputCls} value={firstName} onChange={(e) => setFirstName(e.target.value)} disabled={saving} placeholder="Jean" />
            </Field>
            <Field label="Nom">
              <input className={inputCls} value={lastName} onChange={(e) => setLastName(e.target.value)} disabled={saving} placeholder="Dupont" />
            </Field>
            <Field label="Email">
              <input type="email" className={inputCls} value={email} onChange={(e) => setEmail(e.target.value)} disabled={saving} placeholder="jean@tenant.com" />
            </Field>
            <Field label="Nom d'utilisateur" hint="Non modifiable">
              <input className={inputCls} value={user?.username ?? ""} disabled placeholder="Non modifiable" />
            </Field>
          </div>
        </div>

        {/* ── Accès au tenant ────────────────────────────────────────── */}
        {mid && (
          <div className="rounded-2xl border bg-white p-6 shadow-sm">
            <SectionTitle>Accès au tenant</SectionTitle>
            <div className="space-y-5">

              {/* Rôles — multi-sélection */}
              <Field
                label="Rôles attribués"
                hint="Sélectionnez un ou plusieurs rôles. Un utilisateur peut être à la fois administrateur et agent."
              >
                <div className="mt-2">
                  <RolesSelector
                    roles={roles}
                    selected={selectedRoles}
                    onChange={setSelectedRoles}
                    disabled={saving}
                  />
                  {selectedRoles.length > 0 && (
                    <p className="mt-2 text-[11px] text-slate-500">
                      {selectedRoles.length} rôle{selectedRoles.length > 1 ? "s" : ""} sélectionné{selectedRoles.length > 1 ? "s" : ""} :{" "}
                      <span className="font-semibold" style={{ color: NAVY }}>
                        {selectedRoles.map((id) => roles.find((r) => r.id === id)?.label ?? id).join(", ")}
                      </span>
                    </p>
                  )}
                  {selectedRoles.length === 0 && (
                    <p className="mt-2 text-[11px] text-amber-600">Aucun rôle sélectionné — l'utilisateur aura un accès limité.</p>
                  )}
                </div>
              </Field>

              {/* Propriétaire du tenant */}
              <div className="flex items-center gap-3 rounded-xl border p-4" style={{ borderColor: isOwner ? `${NAVY}30` : "#e2e8f0", background: isOwner ? `${NAVY}06` : "#fff" }}>
                <input
                  id="is_owner"
                  type="checkbox"
                  checked={isOwner}
                  onChange={(e) => setIsOwner(e.target.checked)}
                  disabled={saving}
                  className="h-4 w-4 rounded accent-[#1a3578]"
                />
                <label htmlFor="is_owner" className="flex-1 cursor-pointer">
                  <span className="text-sm font-semibold text-slate-800">Propriétaire du tenant</span>
                  <p className="text-[11px] text-slate-500 mt-0.5">Le propriétaire a accès à toutes les fonctionnalités et peut gérer les membres.</p>
                </label>
                {isOwner && <Shield className="h-4 w-4 shrink-0" style={{ color: TEAL }} />}
              </div>

              {/* Statut */}
              <Field label="Statut du compte">
                <div className="mt-1 flex gap-2">
                  {([
                    { value: "active",    label: "Actif",    color: "#059669", bg: "rgba(5,150,105,0.08)"  },
                    { value: "invited",   label: "Invité",   color: NAVY2,     bg: `${NAVY2}0d`            },
                    { value: "suspended", label: "Suspendu", color: "#ef4444", bg: "rgba(239,68,68,0.08)"  },
                  ] as const).map((s) => (
                    <button key={s.value} type="button" disabled={saving}
                      onClick={() => setStatus(s.value)}
                      className="flex-1 rounded-xl border py-2.5 text-xs font-semibold transition active:scale-95 disabled:opacity-50"
                      style={status === s.value
                        ? { borderColor: s.color, background: s.bg, color: s.color }
                        : { borderColor: "#e2e8f0", background: "#fff", color: "#64748b" }}>
                      {s.label}
                    </button>
                  ))}
                </div>
              </Field>
            </div>
          </div>
        )}

        {/* ── Réinitialisation du mot de passe ──────────────────────── */}
        <div className="rounded-2xl border bg-white p-6 shadow-sm">
          <SectionTitle>Réinitialisation du mot de passe</SectionTitle>
          <p className="mb-4 text-xs text-slate-400 leading-relaxed">
            Définissez un mot de passe temporaire (min. 6 caractères). L&apos;utilisateur sera obligé de le changer à sa prochaine connexion.
          </p>

          {resetError && (
            <div className="mb-3 flex items-start gap-2.5 rounded-xl border border-red-100 bg-red-50 px-4 py-2.5 text-sm text-red-700">
              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />{resetError}
            </div>
          )}
          {resetSuccess && (
            <div className="mb-3 flex items-start gap-2.5 rounded-xl border border-green-100 bg-green-50 px-4 py-2.5 text-sm text-green-700">
              <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />{resetSuccess}
            </div>
          )}

          <div className="flex gap-3">
            <div className="relative flex-1">
              <input
                type={showPwd ? "text" : "password"}
                className={`${inputCls} pr-12`}
                value={newPwd}
                onChange={(e) => setNewPwd(e.target.value)}
                disabled={resetLoading}
                placeholder="Nouveau mot de passe…"
              />
              <button type="button" tabIndex={-1} onClick={() => setShowPwd((v) => !v)}
                className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition">
                {showPwd ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
            <button
              type="button"
              disabled={resetLoading || !newPwd}
              onClick={onResetPassword}
              className="flex items-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition active:scale-95 disabled:opacity-50"
              style={{ background: `linear-gradient(135deg, #c2410c 0%, #ea580c 100%)` }}>
              {resetLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <KeyRound className="h-4 w-4" />}
              {resetLoading ? "Réinitialisation…" : "Réinitialiser"}
            </button>
          </div>
        </div>

        {/* Boutons bas */}
        <div className="flex justify-end gap-3 pb-4">
          <button type="button" onClick={() => router.back()}
            className="rounded-xl border bg-white px-5 py-2.5 text-sm font-medium text-slate-600 shadow-sm transition hover:bg-slate-50">
            Annuler
          </button>
          <button type="submit" disabled={saving}
            className="flex items-center gap-2 rounded-xl px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition active:scale-95 disabled:opacity-70"
            style={{ background: `linear-gradient(135deg, ${NAVY} 0%, ${NAVY2} 100%)` }}>
            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
            {saving ? "Enregistrement…" : "Sauvegarder les modifications"}
          </button>
        </div>
      </div>
    </form>
  )
}