"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

export function NewTicketForm({ services }: { services: string[] }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [subject, setSubject] = useState("");
  const [service, setService] = useState("");
  const [priority, setPriority] = useState("normal");
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError("");
    const res = await fetch("/api/tickets", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ subject, message, priority, service: service || undefined }),
    });
    const data = await res.json().catch(() => ({}));
    setBusy(false);
    if (!res.ok) {
      setError(data.error ?? "Could not create the ticket.");
      return;
    }
    setOpen(false);
    setSubject("");
    setMessage("");
    router.push(`/client/tickets/${data.ticket.id}`);
    router.refresh();
  };

  if (!open) {
    return (
      <button onClick={() => setOpen(true)} className="btn btn-primary btn-sm">
        New ticket
      </button>
    );
  }

  return (
    <form
      onSubmit={submit}
      className="fixed inset-0 z-50 grid place-items-center bg-ink/80 p-4 backdrop-blur-sm"
    >
      <div className="w-full max-w-[560px] rounded-2xl border border-white/10 bg-ink-2 p-7">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-thi">Open a support ticket</h2>
          <button
            type="button"
            onClick={() => setOpen(false)}
            aria-label="Close"
            className="grid h-9 w-9 place-items-center rounded-full border border-white/10 text-tmid hover:border-ice hover:text-ice"
          >
            ✕
          </button>
        </div>
        <div className="mt-5 grid gap-4">
          <div className="grid gap-1.5">
            <label htmlFor="t-subject" className="field-label-dark">
              Subject
            </label>
            <input
              id="t-subject"
              className="field-input-dark"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              required
              minLength={4}
            />
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="grid gap-1.5">
              <label htmlFor="t-service" className="field-label-dark">
                Related service
              </label>
              <select
                id="t-service"
                className="field-input-dark"
                value={service}
                onChange={(e) => setService(e.target.value)}
              >
                <option value="">General</option>
                {services.map((s) => (
                  <option key={s}>{s}</option>
                ))}
              </select>
            </div>
            <div className="grid gap-1.5">
              <label htmlFor="t-priority" className="field-label-dark">
                Priority
              </label>
              <select
                id="t-priority"
                className="field-input-dark"
                value={priority}
                onChange={(e) => setPriority(e.target.value)}
              >
                <option value="low">Low</option>
                <option value="normal">Normal</option>
                <option value="high">High</option>
                <option value="critical">Critical — service down</option>
              </select>
            </div>
          </div>
          <div className="grid gap-1.5">
            <label htmlFor="t-message" className="field-label-dark">
              Describe the issue
            </label>
            <textarea
              id="t-message"
              rows={5}
              className="field-input-dark resize-y"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
              minLength={10}
            />
          </div>
        </div>
        {error && (
          <p className="mt-4 rounded-lg border border-[#D96B4A]/40 bg-[#D96B4A]/10 px-4 py-3 text-[0.88rem] text-[#E89B84]" role="alert">
            {error}
          </p>
        )}
        <button type="submit" disabled={busy} className="btn btn-primary mt-5 w-full disabled:opacity-60">
          {busy ? "Submitting…" : "Submit ticket"}
        </button>
      </div>
    </form>
  );
}

export function TicketReply({
  ticketId,
  canClose,
  refreshTo,
}: {
  ticketId: string;
  canClose: boolean;
  refreshTo?: string;
}) {
  const router = useRouter();
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);

  const send = async (payload: Record<string, unknown>) => {
    setBusy(true);
    await fetch(`/api/tickets/${ticketId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    setBusy(false);
    setMessage("");
    if (refreshTo) router.push(refreshTo);
    router.refresh();
  };

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        if (message.trim().length > 0) send({ message });
      }}
      className="mt-5 border-t border-white/10 pt-5"
    >
      <label htmlFor="reply" className="field-label-dark">
        Reply
      </label>
      <textarea
        id="reply"
        rows={3}
        className="field-input-dark mt-1.5 resize-y"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Write your reply…"
      />
      <div className="mt-3 flex flex-wrap gap-3">
        <button type="submit" disabled={busy || message.trim().length === 0} className="btn btn-primary btn-sm disabled:opacity-50">
          Send reply
        </button>
        {canClose && (
          <button
            type="button"
            disabled={busy}
            onClick={() => send({ status: "closed" })}
            className="btn btn-ghost-dark btn-sm disabled:opacity-50"
          >
            Close ticket
          </button>
        )}
      </div>
    </form>
  );
}