// BEGIN CHANGE: pagina Suporte / Helpdesk (legado helpdesk.php) com preview de imagens
"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useI18n } from "@/i18n/LanguageProvider";
import { useAuth } from "@/auth/AuthProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { apiUrl } from "@/lib/api";

type MetaItem = { id: number; label: string };
type Status = { id: number; label: string; tone: string };
type Attachment = {
  id: number;
  name: string;
  mime: string;
  size: number;
  isImage: boolean;
  url: string;
};
type Ticket = {
  accountId: number;
  ticketId: number;
  subject: string;
  text: string;
  status: Status;
  priority: MetaItem;
  tag: MetaItem;
  registered: number;
  notifyEmail: string;
  attachments: Attachment[];
};
type Message = {
  uid: number;
  reply: number;
  staff: boolean;
  text: string;
  registered: number;
  attachments: Attachment[];
};
type Thread = {
  ticket: Ticket;
  messages: Message[];
  canReply: boolean;
};
type Meta = {
  tags: MetaItem[];
  priorities: MetaItem[];
  isStaff: boolean;
  hasCharacters: boolean;
  limits: { maxFileSize: number; maxFiles: number; allowed: string[] };
};

function toneClass(tone: string) {
  if (tone === "info") return "bg-sky-500/15 text-sky-300 border-sky-500/30";
  if (tone === "warn") return "bg-amber-500/15 text-amber-300 border-amber-500/30";
  if (tone === "ok") return "bg-emerald-500/15 text-emerald-300 border-emerald-500/30";
  if (tone === "danger") return "bg-red-500/15 text-red-300 border-red-500/30";
  return "bg-muted/20 text-muted border-border";
}

function fmt(ts: number) {
  if (!ts) return "-";
  return new Date(ts * 1000).toLocaleString();
}

function fileUrl(token: string, rel: string) {
  const base = apiUrl(rel.replace(/^\//, ""));
  const join = base.includes("?") ? "&" : "?";
  return `${base}${join}token=${encodeURIComponent(token)}`;
}

export default function SupportPage() {
  const { t } = useI18n();
  const { ready, token, account } = useAuth();
  const [staffMode, setStaffMode] = useState(false);
  const [meta, setMeta] = useState<Meta | null>(null);
  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [thread, setThread] = useState<Thread | null>(null);
  const [status, setStatus] = useState<"loading" | "ok" | "error" | "needlogin">("loading");
  const [msg, setMsg] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const [creating, setCreating] = useState(false);
  const [lightbox, setLightbox] = useState<string | null>(null);

  const [subject, setSubject] = useState("");
  const [body, setBody] = useState("");
  const [tag, setTag] = useState("2");
  const [priority, setPriority] = useState("2");
  const [email, setEmail] = useState("");
  const [files, setFiles] = useState<FileList | null>(null);

  const [replyText, setReplyText] = useState("");
  const [replyStatus, setReplyStatus] = useState("4");
  const [replyFiles, setReplyFiles] = useState<FileList | null>(null);

  const canStaff = !!(meta?.isStaff || account?.canAccessAdminPanel || (account?.pageAccess ?? 0) > 2);

  const previewFiles = useMemo(() => {
    if (!files) return [] as { name: string; url: string; isImage: boolean }[];
    return Array.from(files).map((f) => ({
      name: f.name,
      url: URL.createObjectURL(f),
      isImage: f.type.startsWith("image/"),
    }));
  }, [files]);

  const previewReply = useMemo(() => {
    if (!replyFiles) return [] as { name: string; url: string; isImage: boolean }[];
    return Array.from(replyFiles).map((f) => ({
      name: f.name,
      url: URL.createObjectURL(f),
      isImage: f.type.startsWith("image/"),
    }));
  }, [replyFiles]);

  function authHeaders(json = true): HeadersInit {
    const h: Record<string, string> = { Authorization: `Bearer ${token}` };
    if (json) h["Content-Type"] = "application/json";
    return h;
  }

  async function loadList(asStaff = staffMode) {
    if (!token) return;
    setStatus("loading");
    setErr("");
    try {
      const q = asStaff ? "?staff=1" : "";
      const r = await fetch(apiUrl(`helpdesk.php${q}`), { headers: authHeaders(false) });
      if (r.status === 401) {
        setStatus("needlogin");
        return;
      }
      if (!r.ok) throw new Error("http");
      const json = await r.json();
      setMeta(json.meta);
      setTickets(json.tickets ?? []);
      setThread(null);
      setStatus("ok");
      if (json.meta?.isStaff === false && asStaff) setStaffMode(false);
    } catch {
      setStatus("error");
    }
  }

  async function openTicket(tkt: Ticket, asStaff = staffMode) {
    if (!token) return;
    setBusy(true);
    setErr("");
    setMsg("");
    try {
      const q = asStaff
        ? `?staff=1&ticket=${tkt.ticketId}&acc=${tkt.accountId}`
        : `?ticket=${tkt.ticketId}`;
      const r = await fetch(apiUrl(`helpdesk.php${q}`), { headers: authHeaders(false) });
      const json = await r.json();
      if (!r.ok) throw new Error(json.error || "fail");
      setMeta(json.meta);
      setThread(json.thread);
      setReplyText("");
      setReplyFiles(null);
    } catch (e) {
      setErr(e instanceof Error ? e.message : t.support.failed);
    } finally {
      setBusy(false);
    }
  }

  useEffect(() => {
    if (!ready) return;
    if (!token) {
      setStatus("needlogin");
      return;
    }
    if (account?.email) setEmail(account.email);
    const params = new URLSearchParams(window.location.search);
    const staff = params.get("staff") === "1";
    const ticket = Number(params.get("ticket") || 0);
    const acc = Number(params.get("acc") || 0);
    if (staff) setStaffMode(true);
    loadList(staff).then(() => {
      if (ticket > 0) {
        openTicket(
          {
            accountId: acc || 0,
            ticketId: ticket,
            subject: "",
            text: "",
            status: { id: 0, label: "", tone: "muted" },
            priority: { id: 0, label: "" },
            tag: { id: 0, label: "" },
            registered: 0,
            notifyEmail: "",
            attachments: [],
          },
          staff
        );
      }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ready, token]);

  async function createTicket(e: FormEvent) {
    e.preventDefault();
    if (!token || busy) return;
    setBusy(true);
    setErr("");
    setMsg("");
    try {
      const fd = new FormData();
      fd.append("action", "create");
      fd.append("subject", subject);
      fd.append("text", body);
      fd.append("tag", tag);
      fd.append("priority", priority);
      fd.append("notifyEmail", email);
      if (files) Array.from(files).forEach((f) => fd.append("attachments[]", f));
      const r = await fetch(apiUrl("helpdesk.php"), {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
        body: fd,
      });
      const json = await r.json();
      if (!r.ok) throw new Error(json.error || "fail");
      setMsg(t.support.created);
      setCreating(false);
      setSubject("");
      setBody("");
      setFiles(null);
      setThread(json.thread);
      await loadList(false);
      setStaffMode(false);
    } catch (e) {
      setErr(e instanceof Error ? e.message : t.support.failed);
    } finally {
      setBusy(false);
    }
  }

  async function sendReply(e: FormEvent) {
    e.preventDefault();
    if (!token || !thread || busy) return;
    setBusy(true);
    setErr("");
    setMsg("");
    try {
      const fd = new FormData();
      fd.append("action", "reply");
      fd.append("text", replyText);
      fd.append("ticketId", String(thread.ticket.ticketId));
      if (staffMode) {
        fd.append("accountId", String(thread.ticket.accountId));
        fd.append("status", replyStatus);
      }
      if (replyFiles) Array.from(replyFiles).forEach((f) => fd.append("attachments[]", f));
      const r = await fetch(apiUrl("helpdesk.php"), {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
        body: fd,
      });
      const json = await r.json();
      if (!r.ok) throw new Error(json.error || "fail");
      setThread(json.thread);
      setReplyText("");
      setReplyFiles(null);
      setMsg(t.support.replied);
      if (json.warnings?.length) setErr(json.warnings.join(" - "));
    } catch (e) {
      setErr(e instanceof Error ? e.message : t.support.failed);
    } finally {
      setBusy(false);
    }
  }

  function Attachments({ items }: { items: Attachment[] }) {
    if (!token || !items?.length) return null;
    return (
      <div className="mt-3 flex flex-wrap gap-3">
        {items.map((a) =>
          a.isImage ? (
            <button
              key={a.id}
              type="button"
              className="group relative overflow-hidden rounded-lg border border-border bg-background"
              onClick={() => setLightbox(fileUrl(token, a.url))}
              title={a.name}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={fileUrl(token, a.url)}
                alt={a.name}
                className="h-28 w-40 object-cover transition-transform group-hover:scale-105"
              />
              <span className="absolute inset-x-0 bottom-0 bg-black/55 px-2 py-1 text-[10px] text-white truncate">
                {a.name}
              </span>
            </button>
          ) : (
            <a
              key={a.id}
              href={fileUrl(token, a.url)}
              className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs hover:border-brand"
              target="_blank"
              rel="noreferrer"
            >
              {a.name}
              <span className="text-muted">({Math.round(a.size / 1024)} KB)</span>
            </a>
          )
        )}
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-5xl flex-1 px-6 py-14">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight">{t.support.title}</h1>
            <p className="mt-2 max-w-2xl text-sm text-muted">{t.support.subtitle}</p>
          </div>
          {status === "ok" && !thread && !creating && (
            <button
              type="button"
              className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white"
              onClick={() => setCreating(true)}
            >
              {t.support.newTicket}
            </button>
          )}
        </div>

        {status === "needlogin" && (
          <div className="mt-8 rounded-xl border border-border bg-panel p-6 text-sm">
            <p>{t.support.needLogin}</p>
            <Link href="/login" className="mt-3 inline-block text-brand hover:underline">
              {t.nav.items.login}
            </Link>
          </div>
        )}

        {status === "loading" && <p className="mt-8 text-muted">{t.common.loading}</p>}
        {status === "error" && <p className="mt-8 text-muted">{t.common.error}</p>}
        {msg && <p className="mt-4 text-sm text-brand">{msg}</p>}
        {err && <p className="mt-4 text-sm text-red-400">{err}</p>}

        {status === "ok" && (
          <>
            {canStaff && !creating && (
              <div className="mt-6 inline-flex rounded-lg border border-border p-1 text-sm">
                <button
                  type="button"
                  className={`rounded-md px-3 py-1.5 ${!staffMode ? "bg-brand/20 text-foreground" : "text-muted"}`}
                  onClick={() => {
                    setStaffMode(false);
                    loadList(false);
                  }}
                >
                  {t.support.myTickets}
                </button>
                <button
                  type="button"
                  className={`rounded-md px-3 py-1.5 ${staffMode ? "bg-brand/20 text-foreground" : "text-muted"}`}
                  onClick={() => {
                    setStaffMode(true);
                    loadList(true);
                  }}
                >
                  {t.support.staffInbox}
                </button>
              </div>
            )}

            {creating && (
              <form
                onSubmit={createTicket}
                className="mt-8 space-y-4 rounded-xl border border-border bg-panel p-5"
              >
                <h2 className="text-lg font-semibold">{t.support.newTicket}</h2>
                {!meta?.hasCharacters && (
                  <p className="text-sm text-amber-300">{t.support.needChar}</p>
                )}
                <input
                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
                  placeholder={t.support.subject}
                  value={subject}
                  onChange={(e) => setSubject(e.target.value)}
                  required
                />
                <div className="grid gap-3 sm:grid-cols-3">
                  <select
                    className="rounded-md border border-border bg-background px-3 py-2 text-sm"
                    value={tag}
                    onChange={(e) => setTag(e.target.value)}
                  >
                    {(meta?.tags ?? []).map((x) => (
                      <option key={x.id} value={x.id}>
                        {x.label}
                      </option>
                    ))}
                  </select>
                  <select
                    className="rounded-md border border-border bg-background px-3 py-2 text-sm"
                    value={priority}
                    onChange={(e) => setPriority(e.target.value)}
                  >
                    {(meta?.priorities ?? []).map((x) => (
                      <option key={x.id} value={x.id}>
                        {x.label}
                      </option>
                    ))}
                  </select>
                  <input
                    type="email"
                    className="rounded-md border border-border bg-background px-3 py-2 text-sm"
                    placeholder={t.support.notifyEmail}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>
                <textarea
                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
                  rows={6}
                  placeholder={t.support.description}
                  value={body}
                  onChange={(e) => setBody(e.target.value)}
                  required
                />
                <div>
                  <label className="text-sm text-muted">{t.support.attachments}</label>
                  <input
                    type="file"
                    multiple
                    className="mt-1 block w-full text-sm"
                    onChange={(e) => setFiles(e.target.files)}
                  />
                  <p className="mt-1 text-xs text-muted">{t.support.attachmentsHint}</p>
                  {previewFiles.length > 0 && (
                    <div className="mt-3 flex flex-wrap gap-2">
                      {previewFiles.map((f) =>
                        f.isImage ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img
                            key={f.url}
                            src={f.url}
                            alt={f.name}
                            className="h-20 w-28 rounded border border-border object-cover"
                          />
                        ) : (
                          <span key={f.url} className="rounded border border-border px-2 py-1 text-xs">
                            {f.name}
                          </span>
                        )
                      )}
                    </div>
                  )}
                </div>
                <div className="flex gap-2">
                  <button
                    type="submit"
                    disabled={busy || !meta?.hasCharacters}
                    className="rounded-lg bg-brand px-4 py-2 text-sm text-white disabled:opacity-50"
                  >
                    {t.support.submit}
                  </button>
                  <button
                    type="button"
                    className="rounded-lg border border-border px-4 py-2 text-sm"
                    onClick={() => setCreating(false)}
                  >
                    {t.support.cancel}
                  </button>
                </div>
              </form>
            )}

            {!creating && !thread && (
              <ul className="mt-6 divide-y divide-border/50 overflow-hidden rounded-xl border border-border bg-panel">
                {tickets.length === 0 && (
                  <li className="px-4 py-8 text-center text-sm text-muted">{t.support.empty}</li>
                )}
                {tickets.map((tk) => (
                  <li key={`${tk.accountId}-${tk.ticketId}`}>
                    <button
                      type="button"
                      className="flex w-full flex-wrap items-center justify-between gap-3 px-4 py-3 text-left hover:bg-brand/5"
                      onClick={() => openTicket(tk)}
                    >
                      <div className="min-w-0">
                        <p className="truncate font-medium">
                          #{tk.ticketId} - {tk.subject}
                        </p>
                        <p className="mt-0.5 text-xs text-muted">
                          {tk.tag.label} - {tk.priority.label} - {fmt(tk.registered)}
                          {staffMode ? ` - ACC ${tk.accountId}` : ""}
                        </p>
                      </div>
                      <span
                        className={`shrink-0 rounded-full border px-2.5 py-0.5 text-xs ${toneClass(tk.status.tone)}`}
                      >
                        {tk.status.label}
                      </span>
                    </button>
                  </li>
                ))}
              </ul>
            )}

            {!creating && thread && (
              <div className="mt-6 space-y-4">
                <button
                  type="button"
                  className="text-sm text-muted hover:text-brand"
                  onClick={() => {
                    setThread(null);
                    loadList(staffMode);
                  }}
                >
                  &larr; {t.support.backList}
                </button>

                <div className="rounded-xl border border-border bg-panel p-5">
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div>
                      <h2 className="text-xl font-semibold">
                        #{thread.ticket.ticketId} - {thread.ticket.subject}
                      </h2>
                      <p className="mt-1 text-xs text-muted">
                        {thread.ticket.tag.label} - {thread.ticket.priority.label} -{" "}
                        {fmt(thread.ticket.registered)}
                        {staffMode ? ` - ACC ${thread.ticket.accountId}` : ""}
                      </p>
                    </div>
                    <span
                      className={`rounded-full border px-2.5 py-0.5 text-xs ${toneClass(thread.ticket.status.tone)}`}
                    >
                      {thread.ticket.status.label}
                    </span>
                  </div>
                </div>

                <div className="space-y-3">
                  {thread.messages.map((m) => (
                    <div
                      key={m.uid}
                      className={`rounded-xl border p-4 ${
                        m.staff
                          ? "border-brand/30 bg-brand/5 ml-0 sm:ml-8"
                          : "border-border bg-panel mr-0 sm:mr-8"
                      }`}
                    >
                      <div className="mb-2 flex flex-wrap items-center justify-between gap-2 text-xs text-muted">
                        <span className="font-medium text-foreground">
                          {m.staff ? t.support.staff : t.support.you}
                          {m.reply > 0 ? ` - #${m.reply}` : ` - ${t.support.opening}`}
                        </span>
                        <span>{fmt(m.registered)}</span>
                      </div>
                      <p className="whitespace-pre-wrap text-sm leading-relaxed">{m.text}</p>
                      <Attachments items={m.attachments} />
                    </div>
                  ))}
                </div>

                {thread.canReply && (
                  <form
                    onSubmit={sendReply}
                    className="rounded-xl border border-border bg-panel p-5 space-y-3"
                  >
                    <h3 className="font-medium">{t.support.reply}</h3>
                    <textarea
                      className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
                      rows={4}
                      value={replyText}
                      onChange={(e) => setReplyText(e.target.value)}
                      required
                    />
                    {staffMode && (
                      <select
                        className="rounded-md border border-border bg-background px-3 py-2 text-sm"
                        value={replyStatus}
                        onChange={(e) => setReplyStatus(e.target.value)}
                      >
                        <option value="2">{t.support.statusWaitPlayer}</option>
                        <option value="4">{t.support.statusResolved}</option>
                        <option value="3">{t.support.statusClosed}</option>
                      </select>
                    )}
                    <div>
                      <input
                        type="file"
                        multiple
                        className="block w-full text-sm"
                        onChange={(e) => setReplyFiles(e.target.files)}
                      />
                      {previewReply.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-2">
                          {previewReply.map((f) =>
                            f.isImage ? (
                              // eslint-disable-next-line @next/next/no-img-element
                              <img
                                key={f.url}
                                src={f.url}
                                alt={f.name}
                                className="h-16 w-24 rounded border object-cover"
                              />
                            ) : (
                              <span key={f.url} className="text-xs">
                                {f.name}
                              </span>
                            )
                          )}
                        </div>
                      )}
                    </div>
                    <button
                      type="submit"
                      disabled={busy}
                      className="rounded-lg bg-brand px-4 py-2 text-sm text-white disabled:opacity-50"
                    >
                      {t.support.send}
                    </button>
                  </form>
                )}

                {!thread.canReply && thread.ticket.status.id !== 3 && (
                  <p className="text-sm text-muted">{t.support.waitStaff}</p>
                )}
              </div>
            )}
          </>
        )}
      </main>

      {lightbox && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
          onClick={() => setLightbox(null)}
          role="dialog"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={lightbox}
            alt=""
            className="max-h-[90vh] max-w-[95vw] rounded-lg object-contain shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          />
          <button
            type="button"
            className="absolute right-4 top-4 rounded-md bg-white/10 px-3 py-1 text-sm text-white"
            onClick={() => setLightbox(null)}
          >
            {t.support.closePreview}
          </button>
        </div>
      )}

      <Footer />
    </div>
  );
}
// END CHANGE