import { RotateCw } from "lucide-react";
import { candidatesOf, needsPicker, orderZoneOptions, type ZoneCheck } from "../../utils/locationTimeZoneCheck";
import { ComboboxControl } from "../ui/combobox-control";
import { Button } from "../ui/button";
import { Spinner } from "../ui/spinner";
import { FieldError } from "../ui/field";

type LocationTimeZoneFieldProps = {
  id: string;
  check: ZoneCheck;
  options: { label: string; value: string }[];
  help: string;
  error?: string;
  disabled?: boolean;
  onCorrect: (timeZone: string) => void;
  onRetry: () => void;
};

const NOTICE: Partial<Record<ZoneCheck["state"], string>> = {
  ambiguous: "This address could be in more than one time zone. Choose the right one.",
  unverified: "We could not match this address, so its time zone was not looked up. Choose it below.",
  failed: "The time zone could not be looked up just now. Choose it below, or try again.",
};

// A location's time zone, derived from its address (Spencer, 2026-09-23). The derived zone is shown
// for confirmation; the picker appears only when the address is ambiguous, unmatched, the lookup
// failed, or the admin chooses to change it.
const LocationTimeZoneField = ({
  id,
  check,
  options,
  help,
  error,
  disabled,
  onCorrect,
  onRetry,
}: LocationTimeZoneFieldProps) => {
  const labelOf = (zone: string) => options.find((o) => o.value === zone)?.label ?? zone;
  const notice = NOTICE[check.state];

  return (
    <div className="space-y-2">
      <span className="ak-label block">Time zone</span>
      {check.state === "unchecked" && (
        <div className="ak-field-help">We look this up once the address is complete.</div>
      )}
      {check.state === "checking" && (
        <div className="ak-field-help flex items-center gap-2" role="status">
          <Spinner />
          Looking up the time zone
        </div>
      )}
      {check.state === "derived" && (
        <div className="ak-body flex flex-wrap items-baseline gap-x-3" role="status">
          <span>
            <span className="font-medium">{labelOf(check.timeZone)}</span>
            {check.address && <span className="text-muted-foreground"> · from {check.address}</span>}
          </span>
          <Button type="button" variant="link" size="sm" className="h-auto p-0" disabled={disabled} onClick={() => onCorrect(check.timeZone)}>
            <span className="text-primary">Change</span>
          </Button>
        </div>
      )}
      {notice && (
        <div className="ak-body flex flex-wrap items-center gap-x-3 text-amber-ink" role="status">
          {notice}
          {check.state === "failed" && (
            <Button type="button" variant="link" size="sm" className="h-auto p-0" disabled={disabled} onClick={onRetry}>
              <RotateCw className="text-primary" />
          <span className="text-primary">Try again</span>
            </Button>
          )}
        </div>
      )}
      {needsPicker(check) && (
        <ComboboxControl
          id={id}
          label="Time zone"
          hideLabelFromVision
          options={orderZoneOptions(options, candidatesOf(check))}
          value={check.state === "corrected" ? check.timeZone : null}
          onChange={(zone) => zone && onCorrect(zone)}
          placeholder="Start typing a city or region"
          disabled={disabled}
        />
      )}
      <div className="ak-field-help">{help}</div>
      {error && <FieldError>{error}</FieldError>}
    </div>
  );
};

export default LocationTimeZoneField;