"use client";

import { useEffect, useMemo, useState } from "react";
import { Loader2, Send, TicketCheck } from "lucide-react";
import { cn } from "@/lib/utils";

type SupportMessage = {
  id: string;
  senderRole: "USER" | "ADMIN" | "SYSTEM";
  body: string;
  createdAt: string;
};

type SupportTicket = {
  id: string;
  subject: string;
  category: string;
  status: string;
  priority: string;
  lastMessageAt: string;
  messages: SupportMessage[];
};

export function SupportTicketsClient() {
  const [tickets, setTickets] = useState<SupportTicket[]>([]);
  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
  const [subject, setSubject] = useState("");
  const [category, setCategory] = useState("Compte");
  const [newMessage, setNewMessage] = useState("");
  const [reply, setReply] = useState("");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(true);
  const [sending, setSending] = useState(false);

  useEffect(() => {
    void loadTickets();
  }, []);

  useEffect(() => {
    if (!selectedTicketId && tickets.length) setSelectedTicketId(tickets[0].id);
  }, [selectedTicketId, tickets]);

  const selectedTicket = useMemo(() => tickets.find((ticket) => ticket.id === selectedTicketId) ?? tickets[0] ?? null, [tickets, selectedTicketId]);

  async function loadTickets() {
    setLoading(true);
    const response = await fetch("/api/support/tickets", { cache: "no-store" });
    const payload = await response.json();
    setLoading(false);
    if (!payload.ok) {
      setMessage(payload.error?.message ?? "Chargement des tickets impossible");
      return;
    }
    setTickets(payload.data.tickets);
  }

  async function createTicket() {
    if (!subject.trim() || !newMessage.trim()) return;
    setSending(true);
    setMessage("");
    const response = await fetch("/api/support/tickets", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ subject, category, message: newMessage })
    });
    const payload = await response.json();
    setSending(false);
    if (!payload.ok) {
      setMessage(payload.error?.message ?? "Création du ticket impossible");
      return;
    }
    setSubject("");
    setNewMessage("");
    await loadTickets();
    setSelectedTicketId(payload.data.ticket.id);
  }

  async function sendReply() {
    if (!selectedTicket || !reply.trim()) return;
    setSending(true);
    const response = await fetch(`/api/support/tickets/${selectedTicket.id}/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: reply })
    });
    const payload = await response.json();
    setSending(false);
    if (!payload.ok) {
      setMessage(payload.error?.message ?? "Réponse impossible");
      return;
    }
    setReply("");
    await loadTickets();
  }

  return (
    <div className="mx-auto w-full max-w-[760px] space-y-2.5">
      <section className="rounded-lg border border-white/10 bg-[#101521] p-3 shadow-panel">
        <div className="flex items-start gap-2.5">
          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-felt/10 text-felt">
            <TicketCheck className="h-4 w-4" />
          </span>
          <div>
            <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-felt">Support</p>
            <h1 className="mt-1 text-lg font-bold text-white">Tickets support</h1>
            <p className="mt-1.5 text-xs leading-5 text-slate-400">
              Réponse sous 2 à 3 heures durant les horaires d'ouverture : lundi - vendredi, 08:30 - 18:30.
            </p>
          </div>
        </div>
      </section>

      <section className="rounded-lg border border-white/10 bg-[#101521] p-3 shadow-panel">
        <h2 className="text-sm font-bold text-white">Nouveau ticket</h2>
        <div className="mt-2 grid gap-2 sm:grid-cols-[1fr_150px]">
          <input value={subject} onChange={(event) => setSubject(event.target.value)} className="h-10 rounded-lg border-white/10 bg-ink-900 text-sm text-white" placeholder="Sujet" />
          <select value={category} onChange={(event) => setCategory(event.target.value)} className="h-10 rounded-lg border border-white/10 bg-ink-900 px-3 text-sm font-bold text-white">
            {["Compte", "Paiement", "Bonus", "Sport", "Casino", "Vérification"].map((item) => (
              <option key={item} value={item}>
                {item}
              </option>
            ))}
          </select>
        </div>
        <textarea value={newMessage} onChange={(event) => setNewMessage(event.target.value)} className="mt-2 min-h-24 w-full rounded-lg border-white/10 bg-ink-900 text-sm text-white" placeholder="Décrivez votre demande..." />
        <button onClick={() => void createTicket()} disabled={sending || !subject.trim() || !newMessage.trim()} className="mt-2 flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-felt text-sm font-bold text-ink-950 disabled:opacity-50">
          {sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
          Envoyer le ticket
        </button>
      </section>

      {message ? <div className="rounded-lg border border-ember/25 bg-ember/10 p-2.5 text-xs font-bold text-ember">{message}</div> : null}

      <section className="grid gap-2.5 lg:grid-cols-[0.8fr_1.2fr]">
        <div className="overflow-hidden rounded-lg border border-white/10 bg-[#101521] shadow-panel">
          <div className="border-b border-white/10 px-3 py-2 text-xs font-bold uppercase text-slate-500">{loading ? "Chargement..." : `${tickets.length} ticket(s)`}</div>
          <div className="divide-y divide-white/10">
            {tickets.map((ticket) => (
              <button key={ticket.id} onClick={() => setSelectedTicketId(ticket.id)} className={cn("block w-full px-3 py-3 text-left", selectedTicket?.id === ticket.id ? "bg-felt/10" : "bg-white/[0.02]")}>
                <div className="flex items-center justify-between gap-2">
                  <span className="truncate text-sm font-bold text-white">{ticket.subject}</span>
                  <StatusBadge status={ticket.status} />
                </div>
                <p className="mt-1 text-[11px] font-semibold text-slate-500">{ticket.category} · {formatDate(ticket.lastMessageAt)}</p>
              </button>
            ))}
            {!tickets.length && !loading ? <div className="p-3 text-xs font-semibold text-slate-500">Aucun ticket pour le moment.</div> : null}
          </div>
        </div>

        <div className="rounded-lg border border-white/10 bg-[#101521] p-3 shadow-panel">
          {selectedTicket ? (
            <>
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <h2 className="truncate text-sm font-bold text-white">{selectedTicket.subject}</h2>
                  <p className="mt-1 text-[11px] font-semibold text-slate-500">{selectedTicket.category} · priorité {selectedTicket.priority}</p>
                </div>
                <StatusBadge status={selectedTicket.status} />
              </div>
              <div className="mt-3 max-h-[360px] space-y-2 overflow-y-auto rounded-lg border border-white/10 bg-black/15 p-2.5">
                {selectedTicket.messages.map((ticketMessage) => (
                  <MessageBubble key={ticketMessage.id} message={ticketMessage} />
                ))}
              </div>
              <div className="mt-2 grid gap-2 sm:grid-cols-[1fr_auto]">
                <textarea value={reply} onChange={(event) => setReply(event.target.value)} className="min-h-16 rounded-lg border-white/10 bg-ink-900 text-sm text-white" placeholder="Ajouter une réponse..." />
                <button onClick={() => void sendReply()} disabled={sending || !reply.trim()} className="flex h-10 items-center justify-center gap-2 rounded-lg bg-felt px-4 text-xs font-bold text-ink-950 disabled:opacity-50">
                  <Send className="h-4 w-4" />
                  Envoyer
                </button>
              </div>
            </>
          ) : (
            <p className="text-sm font-semibold text-slate-500">Sélectionnez un ticket.</p>
          )}
        </div>
      </section>
    </div>
  );
}

function MessageBubble({ message }: { message: SupportMessage }) {
  const isSupport = message.senderRole === "ADMIN";
  return (
    <div className={cn("max-w-[88%] rounded-lg px-3 py-2", isSupport ? "ml-auto bg-felt/15" : "bg-white/[0.06]")}>
      <div className="text-[10px] font-black uppercase text-slate-500">{isSupport ? "Support" : "Vous"} · {formatDate(message.createdAt)}</div>
      <div className="mt-1 whitespace-pre-wrap text-sm font-semibold leading-5 text-white">{message.body}</div>
    </div>
  );
}

function StatusBadge({ status }: { status: string }) {
  const tone = status.includes("OPEN") || status.includes("WAITING") ? "bg-gold/10 text-gold" : "bg-felt/10 text-felt";
  return <span className={cn("rounded-md px-2 py-1 text-[10px] font-black uppercase", tone)}>{status}</span>;
}

function formatDate(value: string) {
  return new Intl.DateTimeFormat("fr-FR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }).format(new Date(value));
}