"use client";
// src/app/tickets/new/page.tsx
import { useState, useEffect, useMemo } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { AppShell } from "@/components/layout/AppShell";
import { Input, Select, Textarea, Button, Card, CardHeader, CardTitle, CardContent } from "@/components/ui/index";
import { createTicketFormSchema, type TicketFormValues } from "@/lib/validations";
import { toast } from "sonner";
import { useLanguage } from "@/i18n/LanguageContext";
import { EntityCustomFieldsFormInputs } from "@/components/custom-fields/EntityCustomFieldsSection";
import type { CustomFieldDefinitionDto } from "@/lib/customFields.shared";

export default function NewTicketPage() {
  const router = useRouter();
  const { t } = useLanguage();
  const [isLoading, setIsLoading] = useState(false);
  const [customers, setCustomers] = useState<{ id: string; firstName: string; lastName: string }[]>([]);
  const [users, setUsers] = useState<{ id: string; name: string }[]>([]);
  const [cfDefinitions, setCfDefinitions] = useState<CustomFieldDefinitionDto[]>([]);

  useEffect(() => {
    fetch("/api/custom-fields?entity=Ticket")
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((j) => {
        const defs = j.data?.definitions;
        if (!Array.isArray(defs)) return;
        setCfDefinitions(defs);
      })
      .catch(() => {});
  }, []);

  const ticketSchemaResolved = useMemo(() => createTicketFormSchema(t, cfDefinitions), [t, cfDefinitions]);

  const PRIORITY_OPTIONS = useMemo(
    () => [
      { value: "LOW", label: t("tickets.priorityLow") },
      { value: "MEDIUM", label: t("tickets.priorityMedium") },
      { value: "HIGH", label: t("tickets.priorityHigh") },
      { value: "CRITICAL", label: t("tickets.priorityCritical") },
    ],
    [t]
  );

  const STATUS_OPTIONS = useMemo(
    () => [
      { value: "OPEN", label: t("tickets.stOpen") },
      { value: "IN_PROGRESS", label: t("tickets.stInProgress") },
      { value: "WAITING_CUSTOMER", label: t("tickets.stWaiting") },
      { value: "RESOLVED", label: t("tickets.stResolved") },
      { value: "CLOSED", label: t("tickets.stClosed") },
    ],
    [t]
  );

  const mergedDefaults = useMemo(() => {
    const cf: Record<string, string> = {};
    for (const d of cfDefinitions) {
      cf[d.fieldName] = "";
    }
    return {
      subject: "",
      description: "",
      priority: "MEDIUM" as const,
      status: "OPEN" as const,
      type: "PROBLEM" as const,
      channel: "EMAIL" as const,
      assignedToId: "",
      contactId: "",
      accountId: "",
      teamId: "",
      slaPolicyId: "",
      customFields: cf,
    } satisfies TicketFormValues;
  }, [cfDefinitions]);

  const { register, handleSubmit, reset, formState: { errors } } = useForm<TicketFormValues>({
    resolver: zodResolver(ticketSchemaResolved),
    defaultValues: mergedDefaults,
  });

  useEffect(() => {
    reset(mergedDefaults);
  }, [mergedDefaults, reset]);

  useEffect(() => {
    Promise.all([
      fetch("/api/customers?pageSize=200").then(r => r.json()),
      fetch("/api/users/assignable?pageSize=100").then(r => r.json()),
    ]).then(([c, u]) => { setCustomers(c.data?.items ?? []); setUsers(u.data?.items ?? []); });
  }, []);

  const onSubmit = async (data: TicketFormValues) => {
    setIsLoading(true);
    try {
      const { customFields, ...rest } = data;
      const payload: Record<string, unknown> = { ...rest };
      if (cfDefinitions.length > 0) {
        payload.customFields = customFields;
      }
      const res = await fetch("/api/tickets", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
      if (!res.ok) throw new Error((await res.json()).error ?? t("toast.failed"));
      const result = await res.json();
      toast.success(t("tickets.createdToast"));
      router.push(`/tickets/${result.data.id}`);
    } catch (e: any) { toast.error(e.message); }
    finally { setIsLoading(false); }
  };

  return (
    <AppShell breadcrumbs={[{ label: t("nav.tickets"), href: "/tickets" }, { label: t("tickets.new") }]}>
      <div className="w-full min-w-0">
        <div className="mb-6"><h1 className="text-xl font-bold">{t("tickets.pageNewTitle")}</h1></div>
        <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          <Card>
            <CardHeader><CardTitle>{t("tickets.formInfo")}</CardTitle></CardHeader>
            <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Input label={t("tickets.subject")} required className="sm:col-span-2" placeholder={t("tickets.subjectPh")} error={errors.subject?.message} {...register("subject")} />
              <Select label={t("common.priority")} required options={PRIORITY_OPTIONS} error={errors.priority?.message} {...register("priority")} />
              <Select label={t("common.status")} required options={STATUS_OPTIONS} error={errors.status?.message} {...register("status")} />
              <Select label={t("table.colCustomer")} options={customers.map(c => ({ value: c.id, label: `${c.firstName} ${c.lastName}` }))} placeholder={t("tickets.selectContact")} {...register("contactId")} />
              <Select label={t("common.assignedTo")} options={users.map(u => ({ value: u.id, label: u.name }))} placeholder={t("deals.unassigned")} {...register("assignedToId")} />
              <EntityCustomFieldsFormInputs definitions={cfDefinitions} register={register} errors={errors} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader><CardTitle>{t("common.description")}</CardTitle></CardHeader>
            <CardContent>
              <Textarea required placeholder={t("tickets.descPlaceholder")} rows={5} error={errors.description?.message} {...register("description")} />
            </CardContent>
          </Card>
          <div className="flex justify-end gap-3">
            <Button type="button" variant="outline" onClick={() => router.back()} disabled={isLoading}>{t("common.cancel")}</Button>
            <Button type="submit" loading={isLoading}>{t("tickets.create")}</Button>
          </div>
        </form>
      </div>
    </AppShell>
  );
}