"use client";

import { useState, useTransition } from "react";
import { Button, Card } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { createTicketAction } from "@/lib/actions/tickets";
import { TICKET_CATEGORIES } from "@/lib/tickets/schema";
import { TICKET_PRIORITIES } from "@/lib/domain/enums";

export function NewTicket({ base, siteId }: { base: string; siteId: string }) {
  const [pending, start] = useTransition();
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [error, setError] = useState<string | null>(null);
  return (
    <Card className="p-4">
      <h2 className="mb-3 text-sm font-semibold">Raise a maintenance request</h2>
      <form className="grid gap-3 sm:grid-cols-2" action={(f) => { setErrors({}); setError(null); start(async () => { const r = await createTicketAction(base, siteId, Object.fromEntries(f)); if (r && !r.ok) { setErrors(r.fieldErrors ?? {}); setError(r.error); } }); }}>
        <Field id="nt-subject" label="Subject" error={errors.subject} className="sm:col-span-2"><input id="nt-subject" name="subject" required maxLength={160} className={inputClass} /></Field>
        <Field id="nt-desc" label="What is happening?" error={errors.description} className="sm:col-span-2"><textarea id="nt-desc" name="description" required rows={4} maxLength={5000} className={inputClass} /></Field>
        <Field id="nt-cat" label="Category"><select id="nt-cat" name="category" className={inputClass} defaultValue="OTHER">{TICKET_CATEGORIES.map((c) => <option key={c} value={c}>{c.replaceAll("_", " ").toLowerCase()}</option>)}</select></Field>
        <Field id="nt-pri" label="Priority"><select id="nt-pri" name="priority" className={inputClass} defaultValue="MEDIUM">{TICKET_PRIORITIES.map((c) => <option key={c} value={c}>{c.toLowerCase()}</option>)}</select></Field>
        <div className="flex items-center gap-3 sm:col-span-2"><Button type="submit" disabled={pending}>{pending ? "Sending…" : "Submit request"}</Button>{error ? <p role="alert" className="text-sm text-danger">{error}</p> : null}</div>
      </form>
    </Card>
  );
}