"use client";

import { useEffect, useMemo, useState } from "react";
import { AlertTriangle, ArrowUpRight } from "lucide-react";
import type {
  FarmerType,
  Gender,
  PreferredLanguage,
  StepFarmProfileData,
  StepKycData,
} from "@/lib/api-types";
import { enumLabel, t, type WizardLocale } from "@/lib/i18n/wizard-labels";
import { findRegionForDistrict } from "@/lib/reference-data/regions";
import {
  getFarmProfileMissingFields,
  isFarmProfileComplete,
  type FarmProfileRequiredField,
} from "@/lib/farm-profile-validation";
import { useReferenceOptions } from "../hooks/useReferenceOptions";

interface Props {
  data: Partial<StepFarmProfileData>;
  kycData?: Partial<StepKycData>;
  loading: boolean;
  locale?: WizardLocale;
  onSave: (data: StepFarmProfileData) => Promise<unknown>;
  onSaveDraft: (data: Partial<StepFarmProfileData>) => Promise<unknown>;
}

const FARMER_TYPES: FarmerType[] = ["owner", "tenant", "family_farm", "cooperative_member"];

function fieldLabelKey(field: FarmProfileRequiredField): `farmProfile.${FarmProfileRequiredField}` {
  return `farmProfile.${field}`;
}

function kycPrefill(kyc?: Partial<StepKycData>) {
  return {
    fullName: kyc?.fullNameOfficial ?? "",
    dateOfBirth: kyc?.dateOfBirthOfficial ?? "",
    gender: (kyc?.genderOfficial ?? "") as Gender | "",
  };
}

export default function StepFarmProfile({ data, kycData, loading, locale = "uz", onSave }: Props) {
  const officialPrefill = useMemo(() => kycPrefill(kycData), [kycData]);
  const hasOfficialPrefill = Boolean(
    kycData?.fullNameOfficial || kycData?.dateOfBirthOfficial || kycData?.genderOfficial,
  );

  const [region, setRegion] = useState(data?.region ?? "");
  const { options: regions, loading: regionsLoading, error: regionsError } = useReferenceOptions("regions", "UZ", {
    locale,
  });
  const { options: districts, loading: districtsLoading, error: districtsError } = useReferenceOptions("districts", "UZ", {
    region: region || undefined,
    locale,
  });

  const [form, setForm] = useState({
    fullName: data?.fullName ?? officialPrefill.fullName,
    dateOfBirth: data?.dateOfBirth ?? officialPrefill.dateOfBirth,
    gender: (data?.gender ?? officialPrefill.gender) as Gender | "",
    district: data?.district ?? "",
    householdSize: data?.householdSize?.toString() ?? "",
    education: data?.education ?? "",
    yearsFarming: data?.yearsFarming?.toString() ?? "",
    primaryLanguage: (data?.primaryLanguage ?? locale) as PreferredLanguage,
    farmerType: data?.farmerType ?? ("" as FarmerType | ""),
  });

  const [overridesOfficial, setOverridesOfficial] = useState({
    fullName: false,
    dateOfBirth: false,
    gender: false,
  });

  useEffect(() => {
    if (!form.district || region) return;
    const inferred = findRegionForDistrict(form.district);
    if (inferred) setRegion(inferred);
  }, [form.district, region]);

  useEffect(() => {
    if (data?.fullName || data?.dateOfBirth || data?.gender) return;
    if (!hasOfficialPrefill) return;
    setForm((prev) => ({
      ...prev,
      fullName: prev.fullName || officialPrefill.fullName,
      dateOfBirth: prev.dateOfBirth || officialPrefill.dateOfBirth,
      gender: prev.gender || officialPrefill.gender,
    }));
  }, [data, hasOfficialPrefill, officialPrefill]);

  const update = (field: keyof typeof form, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));

    if (!hasOfficialPrefill) return;
    if (field === "fullName" && officialPrefill.fullName) {
      setOverridesOfficial((o) => ({ ...o, fullName: value !== officialPrefill.fullName }));
    }
    if (field === "dateOfBirth" && officialPrefill.dateOfBirth) {
      setOverridesOfficial((o) => ({ ...o, dateOfBirth: value !== officialPrefill.dateOfBirth }));
    }
    if (field === "gender" && officialPrefill.gender) {
      setOverridesOfficial((o) => ({ ...o, gender: value !== officialPrefill.gender }));
    }
  };

  const handleRegionChange = (value: string) => {
    setRegion(value);
    setForm((prev) => ({ ...prev, district: "" }));
  };

  const hasOverrideWarning =
    hasOfficialPrefill &&
    (overridesOfficial.fullName || overridesOfficial.dateOfBirth || overridesOfficial.gender);

  const isValid = isFarmProfileComplete({
    fullName: form.fullName,
    dateOfBirth: form.dateOfBirth,
    gender: form.gender,
    region,
    district: form.district,
    farmerType: form.farmerType,
    householdSize: form.householdSize,
    yearsFarming: form.yearsFarming,
    education: form.education,
  });

  const missingFields = getFarmProfileMissingFields({
    fullName: form.fullName,
    dateOfBirth: form.dateOfBirth,
    gender: form.gender,
    region,
    district: form.district,
    farmerType: form.farmerType,
    householdSize: form.householdSize,
    yearsFarming: form.yearsFarming,
    education: form.education,
  });

  const waitingForDistricts = Boolean(region && !form.district && districtsLoading);
  const submitDisabled = !isValid || loading || regionsLoading || waitingForDistricts;

  const handleSave = () => {
    onSave({
      fullName: form.fullName,
      dateOfBirth: form.dateOfBirth,
      gender: form.gender as Gender,
      primaryLanguage: form.primaryLanguage,
      region,
      district: form.district,
      householdSize: Number(form.householdSize),
      yearsFarming: Number(form.yearsFarming),
      farmerType: form.farmerType as FarmerType,
      education: form.education as StepFarmProfileData["education"],
    });
  };

  const inputClass =
    "w-full px-4 py-3 rounded-xl border border-border bg-surface font-inter text-sm text-ink placeholder:text-muted/70 focus:outline-none focus:border-green-deep/40 focus:ring-1 focus:ring-green-deep/20 transition-colors";
  const selectClass = `${inputClass} appearance-none cursor-pointer`;

  return (
    <div className="space-y-5">
      <div>
        <h2 className="font-onest text-2xl font-semibold text-ink">{t("farmProfile.title", locale)}</h2>
        <p className="mt-1 font-inter text-sm text-ink-soft">{t("farmProfile.subtitle", locale)}</p>
      </div>

      {hasOverrideWarning && (
        <div className="rounded-2xl border border-amber-200 bg-amber-50 dark:border-amber-700/30 dark:bg-amber-900/20 p-4 flex items-start gap-3">
          <AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 shrink-0" />
          <p className="font-inter text-sm text-amber-900 leading-relaxed">
            You changed fields that were prefilled from your official OneID record. Manual review may
            be required before approval.
          </p>
        </div>
      )}

      {(regionsError || districtsError) && (
        <div className="rounded-xl border border-red-200 bg-red-50 dark:border-red-700/30 dark:bg-red-900/20 px-4 py-3 text-sm text-red-700 dark:text-red-400 font-inter">
          {regionsError ?? districtsError}
        </div>
      )}

      <div>
        <label htmlFor="fullName" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          {t("farmProfile.fullName", locale)} *
          {hasOfficialPrefill && officialPrefill.fullName && (
            <span className="ml-2 inline-flex items-center rounded-full bg-green-deep/10 px-2 py-0.5 text-xs font-normal text-green-deep">
              from KYC
            </span>
          )}
        </label>
        <input
          id="fullName"
          type="text"
          placeholder={t("farmProfile.fullNamePlaceholder", locale)}
          value={form.fullName}
          onChange={(e) => update("fullName", e.target.value)}
          className={inputClass}
        />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label htmlFor="dateOfBirth" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("farmProfile.dateOfBirth", locale)} *
            {hasOfficialPrefill && officialPrefill.dateOfBirth && (
              <span className="ml-2 inline-flex items-center rounded-full bg-green-deep/10 px-2 py-0.5 text-xs font-normal text-green-deep">
                from KYC
              </span>
            )}
          </label>
          <input
            id="dateOfBirth"
            type="date"
            value={form.dateOfBirth}
            onChange={(e) => update("dateOfBirth", e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label htmlFor="gender" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("farmProfile.gender", locale)} *
            {hasOfficialPrefill && officialPrefill.gender && (
              <span className="ml-2 inline-flex items-center rounded-full bg-green-deep/10 px-2 py-0.5 text-xs font-normal text-green-deep">
                from KYC
              </span>
            )}
          </label>
          <select
            id="gender"
            value={form.gender}
            onChange={(e) => update("gender", e.target.value)}
            className={selectClass}
          >
            <option value="" disabled>{t("common.select", locale)}</option>
            <option value="male">{enumLabel("gender", "male", locale)}</option>
            <option value="female">{enumLabel("gender", "female", locale)}</option>
          </select>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label htmlFor="region" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("farmProfile.region", locale)} *
          </label>
          <select
            id="region"
            value={region}
            onChange={(e) => handleRegionChange(e.target.value)}
            className={selectClass}
          >
            <option value="" disabled>{t("farmProfile.selectRegion", locale)}</option>
            {regions.map((r) => (
              <option key={r.value} value={r.value}>{r.label}</option>
            ))}
          </select>
        </div>
        <div>
          <label htmlFor="district" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("farmProfile.district", locale)} *
          </label>
          <select
            id="district"
            value={form.district}
            onChange={(e) => update("district", e.target.value)}
            disabled={!region}
            className={`${selectClass} disabled:opacity-50`}
          >
            <option value="" disabled>{t("farmProfile.selectDistrict", locale)}</option>
            {districts.map((d) => (
              <option key={d.value} value={d.value}>{d.label}</option>
            ))}
          </select>
        </div>
      </div>

      <div>
        <label htmlFor="farmerType" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
          {t("farmProfile.farmerType", locale)} *
        </label>
        <select
          id="farmerType"
          value={form.farmerType}
          onChange={(e) => update("farmerType", e.target.value)}
          className={selectClass}
        >
          <option value="" disabled>{t("common.select", locale)}</option>
          {FARMER_TYPES.map((ft) => (
            <option key={ft} value={ft}>{enumLabel("farmerType", ft, locale)}</option>
          ))}
        </select>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div>
          <label htmlFor="householdSize" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("farmProfile.householdSize", locale)} *
          </label>
          <input
            id="householdSize"
            type="number"
            min="1"
            placeholder="5"
            value={form.householdSize}
            onChange={(e) => update("householdSize", e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label htmlFor="education" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("farmProfile.education", locale)} *
          </label>
          <select
            id="education"
            value={form.education}
            onChange={(e) => update("education", e.target.value)}
            className={selectClass}
          >
            <option value="" disabled>
              {t("common.select", locale)}
            </option>
            {(["none", "primary", "secondary", "vocational", "university"] as const).map((ed) => (
              <option key={ed} value={ed}>{enumLabel("education", ed, locale)}</option>
            ))}
          </select>
        </div>
        <div>
          <label htmlFor="yearsFarming" className="block font-inter text-sm font-medium text-ink-soft mb-1.5">
            {t("farmProfile.yearsFarming", locale)} *
          </label>
          <input
            id="yearsFarming"
            type="number"
            min="0"
            placeholder="10"
            value={form.yearsFarming}
            onChange={(e) => update("yearsFarming", e.target.value)}
            className={inputClass}
          />
        </div>
      </div>

      {waitingForDistricts && (
        <p className="font-inter text-sm text-ink/60">{t("farmProfile.loadingDistricts", locale)}</p>
      )}

      {!isValid && missingFields.length > 0 && !loading && !waitingForDistricts && (
        <div className="rounded-xl border border-amber-200 bg-amber-50 dark:border-amber-700/30 dark:bg-amber-900/20 px-4 py-3">
          <p className="font-inter text-sm font-medium text-amber-900">
            {t("farmProfile.completeRequiredHint", locale)}
          </p>
          <ul className="mt-2 list-disc list-inside font-inter text-sm text-amber-800 space-y-0.5">
            {missingFields.map((field) => (
              <li key={field}>{t(fieldLabelKey(field), locale)}</li>
            ))}
          </ul>
        </div>
      )}

      <button
        type="button"
        onClick={handleSave}
        disabled={submitDisabled}
        className="w-full flex items-center justify-center gap-2 py-3.5 rounded-full bg-green-deep text-white font-inter font-medium text-base hover:bg-green-deep/90 transition-colors disabled:opacity-50 cursor-pointer"
      >
        {loading ? t("common.saving", locale) : t("common.saveContinue", locale)}
        <ArrowUpRight className="w-4 h-4" />
      </button>
    </div>
  );
}