"use client";

import { useAtom } from "jotai";
import { Section } from "../section";
import { formAtom, auctionConfigAtom } from "@/components/state/autionAtoms";
import { Input, Textarea, Select, SelectItem } from "@heroui/react";
import { useTranslations } from "next-intl";
import { useLocale } from "next-intl";
import { useMemo, useState, useEffect } from "react";
import { PhoneNumber } from "@/components";
import type { VaccinationStatusValue } from "@/lib/animalVaccinationStatus";
import { vaccinationStatusFromLegacyFormFields } from "@/lib/animalVaccinationStatus";

export function Step4({
  onValidChange,
  showErrors = false,
}: {
  onValidChange?: (valid: boolean) => void;
  showErrors?: boolean;
}) {
  const t = useTranslations("ADD_LISTING.STEP4");
  const tVax = useTranslations("ANIMAL_VACCINATION_STATUS");
  const locale = useLocale();
  const requestLang = String(locale || "")
    .toLowerCase()
    .startsWith("ar")
    ? "ar"
    : "en";
  const [form, setForm] = useAtom(formAtom);
  const [config] = useAtom(auctionConfigAtom);
  const [errors, setErrors] = useState<Record<string, string>>({});

  useEffect(() => {
    setForm((p) => {
      if (p.vaccination_status !== undefined) return p;
      const isBreedingFemale =
        p.gender === "female" && p.type === "breeding_female";
      if (!isBreedingFemale) return p;
      const migrated = vaccinationStatusFromLegacyFormFields({
        vaccination_status: p.vaccination_status,
        isPregnant: (p as Record<string, unknown>).isPregnant,
      });
      if (migrated === undefined) return p;
      return { ...p, vaccination_status: migrated };
    });
  }, [setForm]);

  useEffect(() => {
    if (form.animal_type !== "camel") return;
    if (form.height === undefined) return;
    setForm((p) => ({ ...p, height: undefined }));
  }, [form.animal_type, form.height, setForm]);

  const typeOptions = useMemo(() => {
    const isCamel = form.animal_type === "camel";
    const isHorse = form.animal_type === "horse";

    if (form.gender === "female") {
      const base = [
        {
          value: "breeding_female",
          label: isCamel
            ? t("type_options.camel_breeding_female")
            : t("type_options.horse_breeding_female"),
        },
        {
          value: "non_breeding_female",
          label: isCamel
            ? t("type_options.camel_non_breeding_female")
            : t("type_options.horse_non_breeding_female"),
        },
      ];

      if (isHorse) {
        base.push({
          value: "foal_female",
          label: t("type_options.foal_female"),
        });
      }

      return base;
    }

    if (form.gender === "male") {
      const base = [
        { value: "male", label: t("type_options.male") },
        { value: "castrated", label: t("type_options.castrated") },
      ];

      if (isHorse) {
        base.push({
          value: "foal_male",
          label: t("type_options.foal_male"),
        });
      }

      return base;
    }

    return [];
  }, [form.animal_type, form.gender, t]);

  const shouldShowNagehField = useMemo(() => {
    return form.gender === "female" && form.type === "breeding_female";
  }, [form.gender, form.type]);

  const maxBirthDate = useMemo(() => {
    const d = new Date();
    d.setDate(d.getDate() - 1);
    return d.toISOString().slice(0, 10);
  }, []);

  const validateForm = () => {
    const newErrors: Record<string, string> = {};
    if (!form.title) newErrors.title = t("errors.title_required");
    if (!form.nm) newErrors.nm = t("errors.name_required");
    if (!form.breed) newErrors.breed = t("errors.breed_required");
    if (!form.gender) newErrors.gender = t("errors.gender_required");
    if (!form.animal_color_id) newErrors.color = t("errors.color_required");
    if (
      form.animal_type === "camel" &&
      (config?.ages?.length ?? 0) > 0 &&
      !form.animal_age_id
    ) {
      newErrors.animal_age_id = t("errors.age_category_required");
    }
    if (!form.type) newErrors.type = t("errors.type_required");
    if (form.animal_type !== "camel" && !form.date_of_birth) {
      newErrors.date_of_birth = t("errors.birth_required");
    } else if (form.date_of_birth) {
      const selected = new Date(form.date_of_birth);
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      if (selected >= today)
        newErrors.date_of_birth = t("errors.birth_invalid");
    }
    /*  if (!form.height || form.height <= 0)
      newErrors.height = t("errors.height_invalid");
 */
    if (shouldShowNagehField && form.vaccination_status === undefined) {
      newErrors.vaccination_status = t("errors.vaccination_status_required");
    }

    if (form.auction_type === "annual") {
      const ownerPhoneRaw = (form.ownerPhone || "").trim();
      const cleaned = ownerPhoneRaw.replace(/\D/g, "");
      // Optional field: treat empty / default SA picker-only as "no number".
      const isOnlyDefaultSaPlaceholder =
        cleaned === "" ||
        cleaned === "966" ||
        cleaned === "9660";
      const hasRealPhone =
        cleaned.length > 0 && !isOnlyDefaultSaPlaceholder;
      // E.164: max 15 digits; allow any country (not only Saudi 966).
      if (
        hasRealPhone &&
        (cleaned.length < 10 || cleaned.length > 15)
      ) {
        newErrors.ownerPhone = t("errors.owner_phone_invalid");
      }
    }

    setErrors(newErrors);
    const isValid = Object.keys(newErrors).length === 0;
    onValidChange?.(isValid);
    return isValid;
  };

  useEffect(() => {
    validateForm();
  }, [form, config?.ages]);

  const colorOptions = useMemo(() => {
    return (
      config?.colors?.map((color) => ({
        id: color.id,
        name: color.name,
      })) || []
    );
  }, [config]);

  const ageCategoryOptions = useMemo(() => {
    return (
      config?.ages?.map((row) => ({
        id: row.id,
        name: row.name,
      })) || []
    );
  }, [config]);

  const stateOptions = useMemo(() => {
    return (
      config?.states?.map((s: any) => ({
        id: s.id,
        name: s.name,
      })) || []
    );
  }, [config]);

  return (
    <Section title={t("title")}>
      <div className="grid sm:grid-cols-3 gap-4 text-start">
        <Input
          label={t("listing_title")}
          placeholder={t("listing_title_placeholder")}
          value={form.title || ""}
          onValueChange={(v) => setForm((p) => ({ ...p, title: v }))}
          className="sm:col-span-3"
          isRequired
          isInvalid={showErrors && !!errors.title}
          errorMessage={showErrors ? errors.title : undefined}
        />
        <Input
          label={t("name")}
          isInvalid={showErrors && !!errors.nm}
          errorMessage={showErrors ? errors.nm : undefined}
          value={form.nm || ""}
          onValueChange={(v) => setForm((p) => ({ ...p, nm: v }))}
          isRequired
        />
        <Input
          label={t("father_name")}
          value={form.father_name || ""}
          onValueChange={(v) => setForm((p) => ({ ...p, father_name: v }))}
        />
        <Input
          label={t("mother_name")}
          value={form.mother_name || ""}
          onValueChange={(v) => setForm((p) => ({ ...p, mother_name: v }))}
        />
        <Input
          label={t("mother_father_name")}
          value={form.mother_father_name || ""}
          onValueChange={(v) =>
            setForm((p) => ({ ...p, mother_father_name: v }))
          }
        />
        <Input
          label={t("breed")}
          isInvalid={showErrors && !!errors.breed}
          errorMessage={showErrors ? errors.breed : undefined}
          value={form.breed || ""}
          onValueChange={(v) => setForm((p) => ({ ...p, breed: v }))}
          isRequired
        />
        <Select
          label={t("gender_placeholder")}
          selectedKeys={form.gender ? [form.gender] : []}
          isInvalid={showErrors && !!errors.gender}
          errorMessage={showErrors ? errors.gender : undefined}
          isRequired
          onSelectionChange={(keys) => {
            const gender = Array.from(keys)[0] as "male" | "female";
            setForm((p) => ({
              ...p,
              gender,
              type: undefined,
              vaccination_status: undefined,
            }));
          }}
        >
          <SelectItem key="male">{t("male")}</SelectItem>
          <SelectItem key="female">{t("female")}</SelectItem>
        </Select>
        <div className="flex gap-2 sm:col-span-2">
          <Input
            type="date"
            lang={requestLang}
            label={t("age")}
            placeholder={t("age_placeholder")}
            max={maxBirthDate}
            isInvalid={showErrors && !!errors.date_of_birth}
            errorMessage={showErrors ? errors.date_of_birth : undefined}
            value={form.date_of_birth || ""}
            onValueChange={(v) =>
              setForm((p) => ({
                ...p,
                date_of_birth: v || undefined,
              }))
            }
            isRequired={form.animal_type !== "camel"}
          />
        </div>
        <Select
          label={t("color")}
          placeholder={t("color_placeholder")}
          selectedKeys={form.animal_color_id ? [form.animal_color_id] : []}
          isInvalid={showErrors && !!errors.color}
          errorMessage={showErrors ? errors.color : undefined}
          isRequired
          onSelectionChange={(keys) => {
            const colorId = Array.from(keys)[0] as string;
            const selectedColor = colorOptions.find((c) => c.id === colorId);
            setForm((p) => ({
              ...p,
              color: selectedColor?.name || "",
              animal_color_id: colorId,
            }));
          }}
        >
          {colorOptions.map((color) => (
            <SelectItem key={color.id}>{color.name}</SelectItem>
          ))}
        </Select>
        {form.animal_type === "camel" && ageCategoryOptions.length > 0 ? (
          <Select
            label={t("age_category")}
            placeholder={t("age_category_placeholder")}
            selectedKeys={form.animal_age_id ? [form.animal_age_id] : []}
            isInvalid={showErrors && !!errors.animal_age_id}
            errorMessage={showErrors ? errors.animal_age_id : undefined}
            isRequired
            onSelectionChange={(keys) => {
              const id = Array.from(keys)[0] as string;
              setForm((p) => ({
                ...p,
                animal_age_id: id,
              }));
            }}
          >
            {ageCategoryOptions.map((row) => (
              <SelectItem key={row.id}>{row.name}</SelectItem>
            ))}
          </Select>
        ) : null}
        {form.animal_type !== "camel" ? (
          <Input
            type="number"
            min={1}
            label={t("height")}
            placeholder={t("height_placeholder")}
            /*   isInvalid={!!errors.height}
            errorMessage={errors.height} */
            value={String(form.height ?? "")}
            onValueChange={(v) =>
              setForm((p) => ({
                ...p,
                height: v ? Number(v) : undefined,
              }))
            }
          />
        ) : null}
        {typeOptions.length > 0 && (
          <Select
            label={t("type_label")}
            placeholder={t("type_placeholder")}
            selectedKeys={form.type ? [form.type] : []}
            isInvalid={showErrors && !!errors.type}
            errorMessage={showErrors ? errors.type : undefined}
            isRequired
            onSelectionChange={(keys) => {
              const type = Array.from(keys)[0] as string;
              setForm((p) => ({
                ...p,
                type,
                vaccination_status: undefined,
              }));
            }}
          >
            {typeOptions.map((opt) => (
              <SelectItem key={opt.value}>{opt.label}</SelectItem>
            ))}
          </Select>
        )}

        {shouldShowNagehField && (
          <Select
            className="sm:col-span-3"
            label={tVax("label")}
            placeholder={t("vaccination_status_placeholder")}
            selectedKeys={
              form.vaccination_status ? [form.vaccination_status] : []
            }
            isInvalid={showErrors && !!errors.vaccination_status}
            errorMessage={showErrors ? errors.vaccination_status : undefined}
            isRequired
            onSelectionChange={(keys) => {
              const v = Array.from(keys)[0] as VaccinationStatusValue | undefined;
              setForm((p) => ({
                ...p,
                vaccination_status: v,
              }));
            }}
          >
            <SelectItem key="vaccinated">{tVax("vaccinated")}</SelectItem>
            <SelectItem key="unvaccinated">{tVax("unvaccinated")}</SelectItem>
            <SelectItem key="unsure">{tVax("unsure")}</SelectItem>
          </Select>
        )}

        <div className="sm:col-span-3">
          <Textarea
            label={t("short_desc")}
            placeholder={t("short_desc_placeholder")}
            value={form.shortDesc || ""}
            onValueChange={(v) => setForm((p) => ({ ...p, shortDesc: v }))}
          />
        </div>

        {form.auction_type === "annual" && (
          <>
            {/* Owner info - only for annual auctions */}
            <Input
              label={t("owner_name")}
              value={form.ownerName || ""}
              onValueChange={(v) => setForm((p) => ({ ...p, ownerName: v }))}
            />
            <div>
              {/* <div className="text-sm font-medium text-default-600">
                {t("owner_phone")}
              </div> */}
              <PhoneNumber
                phoneValue={form.ownerPhone || ""}
                setPhoneValue={(v) =>
                  setForm((p) => ({
                    ...p,
                    ownerPhone: typeof v === "string" ? v : "",
                  }))
                }
                error={showErrors ? errors.ownerPhone : undefined}
              />
              {showErrors && errors.ownerPhone && (
                <div className="text-red-500 text-sm mt-1">
                  {errors.ownerPhone}
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </Section>
  );
}