"use client";
// src/app/customers/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 { createContactFormSchema, type ContactFormValues } 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";

function CustomerForm({
  customFieldDefinitions,
  onSubmit,
  isLoading,
  submitLabel,
}: {
  customFieldDefinitions: CustomFieldDefinitionDto[];
  onSubmit: (data: ContactFormValues) => Promise<void>;
  isLoading?: boolean;
  submitLabel: string;
}) {
  const [companies, setCompanies] = useState<{ id: string; name: string }[]>([]);
  const { t } = useLanguage();
  const contactFormSchemaResolved = useMemo(
    () => createContactFormSchema(t, customFieldDefinitions),
    [t, customFieldDefinitions]
  );

  const mergedDefaults = useMemo(() => {
    const cf: Record<string, string> = {};
    for (const d of customFieldDefinitions) {
      cf[d.fieldName] = "";
    }
    return {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      mobile: "",
      whatsapp: "",
      jobTitle: "",
      department: "",
      accountId: "",
      preferredLanguage: "ar" as const,
      isDecisionMaker: false,
      doNotEmail: false,
      doNotCall: false,
      country: "",
      city: "",
      notes: "",
      customFields: cf,
    } satisfies ContactFormValues;
  }, [customFieldDefinitions]);

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

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

  useEffect(() => {
    fetch("/api/companies?pageSize=100").then(r => r.json())
      .then(d => setCompanies(d.data?.items ?? [])).catch(() => {});
  }, []);

  return (
    <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-y-6 w-full min-w-0">
      <Card>
        <CardHeader><CardTitle>{t("customers.formPersonal")}</CardTitle></CardHeader>
        <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <Input label={t("leads.firstName")} required placeholder={t("customers.phFirstName")} error={errors.firstName?.message} {...register("firstName")} />
          <Input label={t("leads.lastName")} required placeholder={t("customers.phLastName")} error={errors.lastName?.message} {...register("lastName")} />
          <Input label={t("common.email")} required type="email" placeholder={t("customers.phEmail")} error={errors.email?.message} {...register("email")} />
          <Input label={t("common.phone")} type="tel" placeholder={t("customers.phPhone")} error={errors.phone?.message} {...register("phone")} />
          <Input label={t("common.jobTitle")} placeholder={t("customers.phJobTitle")} error={errors.jobTitle?.message} {...register("jobTitle")} />
          <Select label={t("common.company")} options={companies.map(c => ({ value: c.id, label: c.name }))}
            placeholder={t("customers.selectAccount")} error={errors.accountId?.message} {...register("accountId")} />
          <EntityCustomFieldsFormInputs definitions={customFieldDefinitions} register={register} errors={errors} />
        </CardContent>
      </Card>
      <Card>
        <CardHeader><CardTitle>{t("customers.formLocation")}</CardTitle></CardHeader>
        <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <Input label={t("common.city")} placeholder={t("companies.phCity")} {...register("city")} />
          <Input label={t("common.country")} placeholder={t("companies.phCountry")} {...register("country")} />
        </CardContent>
      </Card>
      <Card>
        <CardHeader><CardTitle>{t("customers.formNotes")}</CardTitle></CardHeader>
        <CardContent>
          <Textarea placeholder={t("customers.notesPlaceholder")} rows={4} {...register("notes")} />
        </CardContent>
      </Card>
      <div className="flex justify-end gap-3">
        <Button type="button" variant="outline" onClick={() => window.history.back()} disabled={isLoading}>{t("common.cancel")}</Button>
        <Button type="submit" loading={isLoading}>{submitLabel}</Button>
      </div>
    </form>
  );
}

export default function NewCustomerPage() {
  const router = useRouter();
  const { t } = useLanguage();
  const [isLoading, setIsLoading] = useState(false);
  const [cfDefinitions, setCfDefinitions] = useState<CustomFieldDefinitionDto[]>([]);

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

  const handleSubmit = async (data: ContactFormValues) => {
    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/customers", { 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.customerCreated"));
      router.push(`/customers/${result.data.id}`);
    } catch (e: any) { toast.error(e.message); }
    finally { setIsLoading(false); }
  };

  return (
    <AppShell breadcrumbs={[{ label: t("nav.customers"), href: "/customers" }, { label: t("contacts.new") }]}>
      <div className="mb-6 w-full min-w-0">
        <h1 className="text-xl font-bold text-foreground">{t("customers.pageNewTitle")}</h1>
        <p className="text-sm text-muted-foreground mt-0.5">{t("customers.pageNewSubtitle")}</p>
      </div>
      <CustomerForm
        customFieldDefinitions={cfDefinitions}
        onSubmit={handleSubmit}
        isLoading={isLoading}
        submitLabel={t("customers.create")}
      />
    </AppShell>
  );
}