"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { LifeBuoy, Plus, Search } from "lucide-react";
import { Button, Dialog, EmptyState, Field, Input, PageHeader, Panel, Select, Skeleton, Textarea } from "@/components/ui/kit";
import { useToast } from "@/components/ui/toast";
import { useSession } from "@/components/session";
import { FilterTabs, Pager } from "@/components/admin/common";
import { CATEGORY_LABEL, PriorityBadge, TicketStatus, type Ticket } from "@/components/support/common";
import { api, ApiError, qs } from "@/lib/api";
import { formatDateTime } from "@/lib/format";
import { useApi } from "@/lib/use-api";

export default function SupportPage() {
  const { can } = useSession();
  const router = useRouter();
  const toast = useToast();
  const [status, setStatus] = useState<"active" | "closed" | "all">("active");
  const [term, setTerm] = useState("");
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [creating, setCreating] = useState(false);
  const [busy, setBusy] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});
  useEffect(() => {
    const t = setTimeout(() => setQ(term.trim()), 300);
    return () => clearTimeout(t);
  }, [term]);
  const { data } = useApi<{ data: Ticket[]; meta: { total: number; last_page: number } }>(`/support/tickets${qs({ status, q, page })}`);

  async function create(form: FormData) {
    setBusy(true);
    setErrors({});
    try {
      const r = await api.post<{ data: Ticket }>("/support/tickets", Object.fromEntries(form));
      setCreating(false);
      toast("success", `Ticket ${r.data.number} sent. We'll reply here and by email.`);
      router.push(`/support/${r.data.id}`);
    } catch (e) {
      if (e instanceof ApiError && Object.keys(e.fields).length) setErrors(e.fields);
      else toast("error", (e as Error).message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <PageHeader
        title="Support"
        description="Ask the Devwebs team for help. Replies arrive here and by email."
        actions={
          can("support.manage") && (
            <Button variant="primary" icon={<Plus className="size-4" />} onClick={() => (setErrors({}), setCreating(true))}>
              New ticket
            </Button>
          )
        }
      />
      <div className="mb-3 flex flex-wrap items-center gap-3">
        <FilterTabs label="Tickets" value={status} onChange={(v) => (setStatus(v), setPage(1))} options={[["active", "Active"], ["closed", "Closed"], ["all", "All"]]} />
        <div className="relative ml-auto w-full sm:w-72">
          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
          <Input aria-label="Search tickets" placeholder="Search subject or #number" className="w-full pl-9" value={term} onChange={(e) => (setTerm(e.target.value), setPage(1))} />
        </div>
      </div>
      <Panel>
        {!data ? (
          <Skeleton className="m-5 h-32" />
        ) : data.data.length === 0 ? (
          <EmptyState icon={<LifeBuoy />} title={q || status !== "active" ? "No tickets found" : "No open tickets"} body="When something isn't working or you have a question, open a ticket and our team will help." />
        ) : (
          <>
            <ul className="divide-y divide-line">
              {data.data.map((t) => (
                <li key={t.id}>
                  <Link href={`/support/${t.id}`} className="flex flex-wrap items-center gap-x-4 gap-y-1 px-5 py-3.5 hover:bg-paper">
                    <span className="tabular w-12 text-[13px] text-muted">{t.number}</span>
                    <span className="min-w-0 flex-1 basis-56">
                      <span className="block truncate font-medium">{t.subject}</span>
                      <span className="text-[13px] text-muted">
                        {CATEGORY_LABEL[t.category]}, opened by {t.created_by_name ?? "a teammate"}
                      </span>
                    </span>
                    <PriorityBadge priority={t.priority} />
                    <TicketStatus status={t.status} side="customer" />
                    <span className="w-36 text-right text-[13px] text-muted">{formatDateTime(t.last_message_at)}</span>
                  </Link>
                </li>
              ))}
            </ul>
            <Pager page={page} last={data.meta.last_page} total={data.meta.total} onPage={setPage} />
          </>
        )}
      </Panel>
      <Dialog open={creating} onClose={() => setCreating(false)} title="New support ticket" size="md" footer={<><Button onClick={() => setCreating(false)}>Cancel</Button><Button variant="primary" type="submit" form="ticket-form" loading={busy}>Send to support</Button></>}>
        <form
          id="ticket-form"
          noValidate
          className="space-y-4"
          onSubmit={(e) => {
            e.preventDefault();
            create(new FormData(e.currentTarget));
          }}
        >
          <Field label="Subject" htmlFor="tk-subject" error={errors.subject}>
            <Input id="tk-subject" name="subject" invalid={!!errors.subject} placeholder="e.g. Template stuck in review" />
          </Field>
          <div className="grid gap-4 sm:grid-cols-2">
            <Field label="Topic" htmlFor="tk-cat">
              <Select id="tk-cat" name="category" defaultValue="whatsapp">
                {Object.entries(CATEGORY_LABEL).map(([k, v]) => (
                  <option key={k} value={k}>
                    {v}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="How urgent?" htmlFor="tk-pri">
              <Select id="tk-pri" name="priority" defaultValue="normal">
                <option value="low">Low: a question</option>
                <option value="normal">Normal</option>
                <option value="high">High: something important is broken</option>
                <option value="urgent">Urgent: we can&apos;t message customers</option>
              </Select>
            </Field>
          </div>
          <Field label="What happened?" htmlFor="tk-body" error={errors.body} hint="Include what you tried, and any error message or campaign/template name.">
            <Textarea id="tk-body" name="body" rows={6} invalid={!!errors.body} />
          </Field>
        </form>
      </Dialog>
    </>
  );
}