"use client";

import { useState } from "react";
import { Headset, MessageSquarePlus, Send } from "lucide-react";
import { api, useApi } from "@/lib/client";
import { Badge, Button, Card, CardHeader, Field, Input, Modal, PageHeader, Select, Textarea, useToast } from "@/components/ui";
import { formatDateTime } from "@/lib/utils";

interface Ticket {
  id: number;
  ticketNo: string;
  subject: string;
  category: string;
  priority: string;
  status: string;
  createdAt: string;
  replies: number;
}
interface Message {
  id: number;
  authorType: string;
  authorName: string | null;
  message: string;
  createdAt: string;
}

export default function PortalTicketsPage() {
  const toast = useToast();
  const { data, loading, reload } = useApi<{ items: Ticket[] }>("/api/tickets?pageSize=50");
  const [modal, setModal] = useState(false);
  const [busy, setBusy] = useState(false);
  const [openId, setOpenId] = useState<number | null>(null);
  const [thread, setThread] = useState<Message[]>([]);
  const [reply, setReply] = useState("");
  const [form, setForm] = useState({ subject: "", message: "", category: "internet_problem", priority: "medium" });

  const openTicket = async (id: number) => {
    setOpenId(id);
    const res = await api<{ messages: Message[] }>(`/api/tickets/${id}`);
    setThread(res.messages);
  };

  return (
    <>
      <PageHeader
        title="Support tickets"
        subtitle="Report a problem and track resolution progress"
        icon={<Headset className="h-5 w-5" />}
        actions={
          <Button size="sm" icon={<MessageSquarePlus className="h-4 w-4" />} onClick={() => setModal(true)}>
            New ticket
          </Button>
        }
      />

      <Card className="p-2">
        <CardHeader title="My tickets" subtitle={`${data?.items.length ?? 0} ticket(s)`} />
        <ul className="divide-y divide-white/6">
          {(data?.items ?? []).map((t) => (
            <li key={t.id} className="flex flex-wrap items-center justify-between gap-2 px-4 py-3">
              <div className="min-w-0">
                <p className="truncate text-sm text-slate-100">{t.subject}</p>
                <p className="text-[11px] text-slate-500">
                  {t.ticketNo} · {t.category} · {formatDateTime(t.createdAt)} · {t.replies} repl{t.replies === 1 ? "y" : "ies"}
                </p>
              </div>
              <div className="flex items-center gap-2">
                <Badge value={t.priority} />
                <Badge value={t.status} />
                <Button size="sm" variant="secondary" onClick={() => void openTicket(t.id)}>
                  Open
                </Button>
              </div>
            </li>
          ))}
          {!loading && !data?.items.length ? <li className="px-4 py-10 text-center text-sm text-slate-500">You have not raised any tickets yet.</li> : null}
        </ul>
      </Card>

      <Modal open={modal} onClose={() => setModal(false)} title="Create support ticket" subtitle="Our engineers respond during 9:00 — 22:00">
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Subject" className="sm:col-span-2">
            <Input value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} />
          </Field>
          <Field label="Category">
            <Select value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })}>
              {["internet_problem", "slow_speed", "payment_problem", "connection_problem", "other"].map((c) => (
                <option key={c} value={c}>
                  {c.replaceAll("_", " ")}
                </option>
              ))}
            </Select>
          </Field>
          <Field label="Priority">
            <Select value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
              {["low", "medium", "high", "urgent"].map((c) => (
                <option key={c} value={c}>
                  {c}
                </option>
              ))}
            </Select>
          </Field>
          <Field label="Describe the issue" className="sm:col-span-2">
            <Textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} />
          </Field>
        </div>
        <div className="mt-4 flex justify-end gap-2">
          <Button variant="secondary" onClick={() => setModal(false)}>
            Cancel
          </Button>
          <Button
            loading={busy}
            onClick={async () => {
              setBusy(true);
              try {
                await api("/api/tickets", { method: "POST", json: form });
                toast.push("Ticket submitted", "success");
                setModal(false);
                void reload();
              } catch (err) {
                toast.push(err instanceof Error ? err.message : "Submit failed", "error");
              } finally {
                setBusy(false);
              }
            }}
          >
            Submit ticket
          </Button>
        </div>
      </Modal>

      <Modal open={Boolean(openId)} onClose={() => setOpenId(null)} title="Ticket conversation" size="lg">
        <ul className="space-y-3">
          {thread.map((m) => (
            <li key={m.id} className={`flex gap-3 ${m.authorType === "staff" ? "flex-row-reverse" : ""}`}>
              <div className={`max-w-[80%] rounded-2xl border px-3.5 py-2.5 ${m.authorType === "staff" ? "border-brand-400/25 bg-brand-500/10" : "border-white/8 bg-white/4"}`}>
                <p className="whitespace-pre-wrap text-sm text-slate-100">{m.message}</p>
                <p className="mt-1 text-[10px] text-slate-500">
                  {m.authorName ?? m.authorType} · {formatDateTime(m.createdAt)}
                </p>
              </div>
            </li>
          ))}
        </ul>
        <div className="mt-4">
          <Textarea value={reply} onChange={(e) => setReply(e.target.value)} placeholder="Write a reply…" />
          <div className="mt-2 flex justify-end">
            <Button
              loading={busy}
              icon={<Send className="h-4 w-4" />}
              onClick={async () => {
                if (!openId || !reply.trim()) return;
                setBusy(true);
                try {
                  await api(`/api/tickets/${openId}/messages`, { method: "POST", json: { message: reply } });
                  setReply("");
                  const res = await api<{ messages: Message[] }>(`/api/tickets/${openId}`);
                  setThread(res.messages);
                  toast.push("Reply sent", "success");
                } catch (err) {
                  toast.push(err instanceof Error ? err.message : "Reply failed", "error");
                } finally {
                  setBusy(false);
                }
              }}
            >
              Send reply
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}