"use client";
// src/app/deals/new/page.tsx
import { useState, useEffect, useMemo } from "react";
import { useRouter, useSearchParams } 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 { createOpportunityFormSchema, type DealFormValues } 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";

const CURRENCY_OPTIONS = [
  { value: "USD", label: "USD" }, { value: "EUR", label: "EUR" },
  { value: "GBP", label: "GBP" }, { value: "SAR", label: "SAR" },
  { value: "AED", label: "AED" },
];

export default function NewDealPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const contactIdFromQuery = searchParams.get("contactId") ?? "";
  const { t } = useLanguage();
  const [isLoading, setIsLoading] = useState(false);
  const [customers, setCustomers] = useState<{ id: string; firstName: string; lastName: string }[]>([]);
  const [companies, setCompanies] = useState<{ id: string; name: string }[]>([]);
  const [users, setUsers] = useState<{ id: string; name: string }[]>([]);
  const [cfDefinitions, setCfDefinitions] = useState<CustomFieldDefinitionDto[]>([]);

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

  const STAGE_OPTIONS = useMemo(
    () => [
      { value: "QUALIFICATION", label: t("deals.stageQualification") },
      { value: "DISCOVERY", label: t("deals.stageDiscovery") },
      { value: "PROPOSAL", label: t("deals.stageProposal") },
      { value: "NEGOTIATION", label: t("deals.stageNegotiation") },
      { value: "CONTRACT", label: t("deals.stageContract") },
      { value: "CLOSED_WON", label: t("deals.stageClosedWon") },
      { value: "CLOSED_LOST", label: t("deals.stageClosedLost") },
    ],
    [t]
  );

  const dealFormSchemaResolved = useMemo(
    () => createOpportunityFormSchema(t, cfDefinitions),
    [t, cfDefinitions]
  );

  const mergedDefaults = useMemo(() => {
    const cf: Record<string, string> = {};
    for (const d of cfDefinitions) {
      cf[d.fieldName] = "";
    }
    return {
      title: "",
      value: 0,
      currency: "USD",
      stage: "QUALIFICATION" as const,
      probability: 10,
      closeDate: "",
      notes: "",
      assignedToId: "",
      accountId: "",
      contactId: contactIdFromQuery,
      lostReason: "",
      pipelineId: "",
      customFields: cf,
    } satisfies DealFormValues;
  }, [cfDefinitions, contactIdFromQuery]);

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

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

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

  const onSubmit = async (data: DealFormValues) => {
    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/deals", { 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("toast.dealCreated"));
      router.push(`/deals/${result.data.id}`);
    } catch (e: unknown) {
      toast.error(e instanceof Error ? e.message : t("toast.failed"));
    } finally { setIsLoading(false); }
  };

  return (
    <AppShell breadcrumbs={[{ label: t("nav.deals"), href: "/deals" }, { label: t("deals.new") }]}>
      <div className="w-full min-w-0">
        <div className="mb-6">
          <h1 className="text-xl font-bold">{t("deals.createTitle")}</h1>
          <p className="text-sm text-muted-foreground mt-0.5">{t("deals.createSubtitle")}</p>
        </div>
        <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          <Card>
            <CardHeader><CardTitle>{t("deals.cardInfo")}</CardTitle></CardHeader>
            <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Input label={t("deals.fieldTitle")} required placeholder={t("deals.fieldTitlePh")} className="sm:col-span-2" error={errors.title?.message} {...register("title")} />
              <Input label={t("deals.fieldValue")} required type="number" min={0} step={100} placeholder="50000" error={errors.value?.message} {...register("value", { valueAsNumber: true })} />
              <Select label={t("common.currency")} options={CURRENCY_OPTIONS} error={errors.currency?.message} {...register("currency")} />
              <Select label={t("deals.stage")} required options={STAGE_OPTIONS} error={errors.stage?.message} {...register("stage")} />
              <Input label={t("deals.probability")} type="number" min={0} max={100} error={errors.probability?.message} {...register("probability", { valueAsNumber: true })} />
              <Input label={t("deals.fieldClose")} type="date" error={errors.closeDate?.message} {...register("closeDate")} />
              <Select label={t("deals.fieldAssigned")} 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("deals.relatedTo")}</CardTitle></CardHeader>
            <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Select label={t("deals.fieldCustomer")} options={customers.map(c => ({ value: c.id, label: `${c.firstName} ${c.lastName}` }))} placeholder={t("deals.selectCustomer")} {...register("contactId")} />
              <Select label={t("deals.fieldCompany")} options={companies.map(c => ({ value: c.id, label: c.name }))} placeholder={t("deals.selectCompany")} {...register("accountId")} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader><CardTitle>{t("deals.cardNotes")}</CardTitle></CardHeader>
            <CardContent><Textarea placeholder={t("deals.notesPh")} rows={4} {...register("notes")} /></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("deals.createButton")}</Button>
          </div>
        </form>
      </div>
    </AppShell>
  );
}