"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Button, Card } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { addCommentAction, assignTicketAction, escalateTicketAction, logTimeAction, transitionTicketAction } from "@/lib/actions/tickets";
import type { ActionResult } from "@/lib/actions/result";

type Msg = { ok: boolean; text: string } | null;

function useRun() {
  const router = useRouter();
  const [pending, start] = useTransition();
  const [msg, setMsg] = useState<Msg>(null);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const run = (fn: () => Promise<ActionResult>, onOk?: () => void) => {
    setMsg(null); setErrors({});
    start(async () => {
      const r = await fn();
      if (r.ok) { setMsg({ ok: true, text: r.message ?? "Done" }); onOk?.(); router.refresh(); }
      else { setErrors(r.fieldErrors ?? {}); setMsg({ ok: false, text: r.error }); }
    });
  };
  return { pending, msg, errors, run };
}

const Status = ({ msg }: { msg: Msg }) => <p role="status" aria-live="polite" className={msg ? (msg.ok ? "text-sm text-success" : "text-sm text-danger") : "sr-only"}>{msg?.text}</p>;

export function CommentForm({ ticketId, canInternal }: { ticketId: string; canInternal: boolean }) {
  const { pending, msg, errors, run } = useRun();
  const [body, setBody] = useState("");
  const [internal, setInternal] = useState(false);
  return (
    <Card className="space-y-3 p-4">
      <h2 className="text-sm font-semibold">Add a comment</h2>
      <Field id="tc-body" label="Comment" error={errors.body}><textarea id="tc-body" rows={3} maxLength={5000} className={inputClass} value={body} onChange={(e) => setBody(e.target.value)} /></Field>
      {canInternal ? <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={internal} onChange={(e) => setInternal(e.target.checked)} />Internal note (not visible to the customer)</label> : null}
      <div className="flex items-center gap-3"><Button disabled={pending || !body.trim()} onClick={() => run(() => addCommentAction(ticketId, { body, visibility: internal ? "INTERNAL" : "CUSTOMER" }), () => setBody(""))}>Post comment</Button><Status msg={msg} /></div>
    </Card>
  );
}

export function WorkPanel({ ticketId, nextStatuses, assignees, assigneeId, canAssign, status }: { ticketId: string; nextStatuses: string[]; assignees: { id: string; name: string; email: string }[]; assigneeId: string | null; canAssign: boolean; status: string }) {
  const { pending, msg, errors, run } = useRun();
  const [to, setTo] = useState(nextStatuses[0] ?? "");
  const [notes, setNotes] = useState("");
  const [who, setWho] = useState(assigneeId ?? "");
  const [minutes, setMinutes] = useState("30");
  const [note, setNote] = useState("");
  const [reason, setReason] = useState("");
  const label = (s: string) => s.replaceAll("_", " ").toLowerCase();
  return (
    <div className="space-y-4">
      <Card className="space-y-3 p-4">
        <h2 className="text-sm font-semibold">Status</h2>
        {nextStatuses.length === 0 ? <p className="text-sm text-muted-foreground">No further changes are possible from “{label(status)}”.</p> : (
          <>
            <Field id="tt-to" label="Move to"><select id="tt-to" className={inputClass} value={to} onChange={(e) => setTo(e.target.value)}>{nextStatuses.map((s) => <option key={s} value={s}>{label(s)}</option>)}</select></Field>
            <Field id="tt-notes" label={to === "RESOLVED" ? "Resolution notes (required)" : "Notes (optional)"} error={errors.notes}><textarea id="tt-notes" rows={2} maxLength={5000} className={inputClass} value={notes} onChange={(e) => setNotes(e.target.value)} /></Field>
            <Button disabled={pending || !to} onClick={() => run(() => transitionTicketAction(ticketId, { to, notes }), () => { setNotes(""); setTo(""); })}>Update status</Button>
          </>
        )}
      </Card>
      {canAssign ? (
        <Card className="space-y-3 p-4">
          <h2 className="text-sm font-semibold">Assignee</h2>
          <Field id="ta-who" label="Assigned to"><select id="ta-who" className={inputClass} value={who} onChange={(e) => setWho(e.target.value)}><option value="">Unassigned</option>{assignees.map((u) => <option key={u.id} value={u.id}>{u.name} ({u.email})</option>)}</select></Field>
          <Button variant="secondary" disabled={pending || who === (assigneeId ?? "")} onClick={() => run(() => assignTicketAction(ticketId, who || null))}>Save assignee</Button>
        </Card>
      ) : null}
      <Card className="space-y-3 p-4">
        <h2 className="text-sm font-semibold">Log time</h2>
        <div className="grid grid-cols-[6rem_1fr] gap-3">
          <Field id="tl-min" label="Minutes" error={errors.minutes}><input id="tl-min" type="number" min={1} max={1440} className={inputClass} value={minutes} onChange={(e) => setMinutes(e.target.value)} /></Field>
          <Field id="tl-note" label="What was done" error={errors.note}><input id="tl-note" maxLength={500} className={inputClass} value={note} onChange={(e) => setNote(e.target.value)} /></Field>
        </div>
        <Button variant="secondary" disabled={pending || !note.trim()} onClick={() => run(() => logTimeAction(ticketId, { minutes, note }), () => setNote(""))}>Log time</Button>
      </Card>
      {status !== "RESOLVED" && status !== "CLOSED" ? (
        <Card className="space-y-3 p-4">
          <h2 className="text-sm font-semibold">Escalate</h2>
          <Field id="te-reason" label="Reason" error={errors.reason}><input id="te-reason" maxLength={1000} className={inputClass} value={reason} onChange={(e) => setReason(e.target.value)} /></Field>
          <Button variant="danger" disabled={pending || !reason.trim()} onClick={() => run(() => escalateTicketAction(ticketId, { reason }), () => setReason(""))}>Escalate priority</Button>
        </Card>
      ) : null}
      <Status msg={msg} />
    </div>
  );
}