"use client";

import { useEffect, useState, type FormEvent } from "react";
import { Select } from "@/components/select";
import { ticketsDict } from "@/features/tickets/dict";
import type { CreateTicketFormValues, TicketPriority } from "@/features/tickets/types";

type CreateTicketSheetProps = {
  open: boolean;
  isSubmitting: boolean;
  onClose: () => void;
  onSubmit: (values: CreateTicketFormValues) => void;
};

const priorityOptions = Object.keys(ticketsDict.priorities) as TicketPriority[];

const defaultValues: CreateTicketFormValues = {
  subject: "",
  body: "",
  category: "",
  priority: "NORMAL",
};

export function CreateTicketSheet({
  open,
  isSubmitting,
  onClose,
  onSubmit,
}: CreateTicketSheetProps) {
  const [values, setValues] = useState<CreateTicketFormValues>(defaultValues);
  const [errors, setErrors] = useState<Partial<Record<keyof CreateTicketFormValues, string>>>({});

  useEffect(() => {
    if (!open) return;
    setValues(defaultValues);
    setErrors({});
  }, [open]);

  useEffect(() => {
    if (!open) return;

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };

    document.addEventListener("keydown", handleEscape);
    document.body.style.overflow = "hidden";

    return () => {
      document.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) return null;

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const nextErrors: Partial<Record<keyof CreateTicketFormValues, string>> = {};
    if (!values.subject.trim()) nextErrors.subject = ticketsDict.subjectRequired;
    if (!values.body.trim()) nextErrors.body = ticketsDict.bodyRequired;

    setErrors(nextErrors);
    if (Object.keys(nextErrors).length > 0) return;

    onSubmit(values);
  };

  const inputClassName =
    "w-full rounded-2xl bg-input px-4 py-3 text-sm shadow-soft-sm ring-1 ring-border outline-none focus:ring-2 focus:ring-primary";

  return (
    <div className="fixed inset-0 z-[100] flex items-end justify-center bg-black/40 p-0 sm:items-center sm:p-4">
      <button type="button" aria-label={ticketsDict.cancel} className="absolute inset-0" onClick={onClose} />

      <div className="relative z-10 flex max-h-[96vh] w-full max-w-lg flex-col overflow-hidden rounded-t-3xl bg-card shadow-soft sm:rounded-3xl">
        <div className="shrink-0 px-6 pt-4">
          <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-border sm:hidden" />
          <h2 className="pb-4 text-center text-xl font-bold text-card-foreground sm:text-start">
            {ticketsDict.createTicket}
          </h2>
        </div>

        <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-6 pb-4">
            <div className="space-y-2">
              <label htmlFor="ticket-subject" className="text-sm font-medium">{ticketsDict.subjectLabel}</label>
              <input
                id="ticket-subject"
                value={values.subject}
                maxLength={200}
                onChange={(e) => setValues((c) => ({ ...c, subject: e.target.value }))}
                placeholder={ticketsDict.subjectPlaceholder}
                className={`${inputClassName} h-12`}
              />
              {errors.subject ? <p className="text-sm text-destructive">{errors.subject}</p> : null}
            </div>

            <div className="space-y-2">
              <label htmlFor="ticket-body" className="text-sm font-medium">{ticketsDict.bodyLabel}</label>
              <textarea
                id="ticket-body"
                value={values.body}
                rows={5}
                maxLength={5000}
                onChange={(e) => setValues((c) => ({ ...c, body: e.target.value }))}
                placeholder={ticketsDict.bodyPlaceholder}
                className={inputClassName}
              />
              {errors.body ? <p className="text-sm text-destructive">{errors.body}</p> : null}
            </div>

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <label htmlFor="ticket-category" className="text-sm font-medium">{ticketsDict.categoryLabel}</label>
                <input
                  id="ticket-category"
                  value={values.category}
                  maxLength={100}
                  onChange={(e) => setValues((c) => ({ ...c, category: e.target.value }))}
                  placeholder={ticketsDict.categoryPlaceholder}
                  className={`${inputClassName} h-12`}
                />
              </div>

              <div className="space-y-2">
                <label htmlFor="ticket-priority" className="text-sm font-medium">{ticketsDict.priorityLabel}</label>
                <Select
                  id="ticket-priority"
                  value={values.priority}
                  onChange={(e) =>
                    setValues((c) => ({ ...c, priority: e.target.value as TicketPriority }))
                  }
                >
                  {priorityOptions.map((option) => (
                    <option key={option} value={option}>
                      {ticketsDict.priorities[option]}
                    </option>
                  ))}
                </Select>
              </div>
            </div>
          </div>

          <div className="shrink-0 border-t border-border px-6 py-4">
            <div className="flex gap-3">
              <button
                type="submit"
                disabled={isSubmitting}
                className="inline-flex h-12 flex-1 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-soft-sm disabled:opacity-60"
              >
                {isSubmitting ? ticketsDict.saving : ticketsDict.save}
              </button>
              <button
                type="button"
                onClick={onClose}
                className="inline-flex h-12 flex-1 items-center justify-center rounded-2xl border border-border bg-background"
              >
                {ticketsDict.cancel}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}