"use client";

import { useMemo, useState } from "react";
import { getAllStates, getDistricts } from "india-state-district";

const OTHER = "__other__";

export default function StateDistrictPicker({
  defaultState,
  defaultDistrict,
}: {
  defaultState?: string | null;
  defaultDistrict?: string | null;
}) {
  const states = useMemo(() => getAllStates(), []);
  const stateNames = useMemo(() => states.map((s) => s.name), [states]);

  const [stateName, setStateName] = useState(() =>
    defaultState && stateNames.includes(defaultState) ? defaultState : defaultState ? OTHER : ""
  );
  const [customState, setCustomState] = useState(() => (defaultState && !stateNames.includes(defaultState) ? defaultState : ""));

  const stateCode = states.find((s) => s.name === stateName)?.code;
  const districts = useMemo(() => (stateCode ? getDistricts(stateCode) : []), [stateCode]);

  const [districtName, setDistrictName] = useState(() =>
    defaultDistrict && districts.includes(defaultDistrict) ? defaultDistrict : defaultDistrict ? OTHER : ""
  );
  const [customDistrict, setCustomDistrict] = useState(() => (defaultDistrict && !districts.includes(defaultDistrict) ? defaultDistrict : ""));

  return (
    <>
      <div>
        <select
          value={stateName}
          onChange={(e) => {
            setStateName(e.target.value);
            setDistrictName("");
            setCustomDistrict("");
          }}
          required={stateName !== OTHER}
          className="block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm text-stone-700"
        >
          <option value="" disabled>
            State
          </option>
          {states.map((s) => (
            <option key={s.code} value={s.name}>
              {s.name}
            </option>
          ))}
          <option value={OTHER}>Other (enter manually)</option>
        </select>
        {stateName === OTHER ? (
          <input
            name="state"
            value={customState}
            onChange={(e) => setCustomState(e.target.value)}
            required
            maxLength={100}
            placeholder="Enter state"
            className="mt-1 block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm"
          />
        ) : (
          <input type="hidden" name="state" value={stateName} />
        )}
      </div>
      <div>
        <select
          value={districtName}
          onChange={(e) => setDistrictName(e.target.value)}
          disabled={!stateName}
          required={districtName !== OTHER}
          className="block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm text-stone-700 disabled:bg-stone-50 disabled:text-stone-400"
        >
          <option value="" disabled>
            {stateName ? "District" : "Select a state first"}
          </option>
          {districts.map((d) => (
            <option key={d} value={d}>
              {d}
            </option>
          ))}
          {stateName && <option value={OTHER}>Other (enter manually)</option>}
        </select>
        {districtName === OTHER ? (
          <input
            name="district"
            value={customDistrict}
            onChange={(e) => setCustomDistrict(e.target.value)}
            required
            maxLength={100}
            placeholder="Enter district"
            className="mt-1 block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm"
          />
        ) : (
          <input type="hidden" name="district" value={districtName} />
        )}
      </div>
    </>
  );
}