import { useState } from 'react';
import { Loader2, MapPin, Search, Check, AlertCircle } from 'lucide-react';
import { listQlsServicepointsForCheckout } from '@/lib/qls.functions';
import { useT } from '@/lib/i18n';

interface QlsServicePoint {
  servicepoint_code: string;
  name: string;
  address: {
    street: string;
    housenumber: string;
    postalcode: string;
    locality: string;
    country: string;
  };
}

export interface SelectedServicepoint {
  code: string;
  name: string;
  carrier: string | null;
  address: string;
}

interface Props {
  country: string;
  postalCode: string;
  value: SelectedServicepoint | null;
  onChange: (sp: SelectedServicepoint | null) => void;
}

export function ServicepointPicker({ country, postalCode, value, onChange }: Props) {
  const t = useT();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [points, setPoints] = useState<QlsServicePoint[]>([]);
  const [carrier, setCarrier] = useState<string | null>(null);
  const [postcode, setPostcode] = useState(postalCode);

  const fetchPoints = async (pc: string) => {
    setLoading(true);
    setError(null);
    try {
      const res = await listQlsServicepointsForCheckout({
        data: { country, postalCode: pc },
      });
      setCarrier(res.carrier);
      setPoints(res.points);
      if (!res.points.length) {
        setError(t('Geen pakketpunten gevonden voor deze postcode.', 'No pickup points found for this postcode.'));
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : t('Pakketpunten konden niet worden geladen.', 'Pickup points could not be loaded.'));
    } finally {
      setLoading(false);
    }
  };

  const handleOpen = async () => {
    setOpen(true);
    if (postcode && points.length === 0) await fetchPoints(postcode);
  };

  const fmtAddress = (sp: QlsServicePoint) => {
    const a = sp.address;
    return `${a.street} ${a.housenumber}, ${a.postalcode} ${a.locality}`;
  };

  return (
    <div className="rounded-lg border border-border bg-card p-4">
      <div className="flex items-start gap-3">
        <MapPin className="w-5 h-5 text-primary shrink-0 mt-0.5" />
        <div className="flex-1 min-w-0">
          <p className="font-medium text-sm">{t('Afhalen bij een pakketpunt', 'Pick up from a collection point')}</p>
          {value ? (
            <div className="mt-1">
              <p className="text-sm font-semibold">{value.name}</p>
              <p className="text-xs text-muted-foreground">{value.address}</p>
              {value.carrier && (
                <p className="text-xs text-muted-foreground mt-0.5">{t('Vervoerder', 'Carrier')}: {value.carrier}</p>
              )}
            </div>
          ) : (
            <p className="text-xs text-muted-foreground mt-0.5">
              {t('Kies een afhaalpunt in de buurt in plaats van bezorging aan huis.', 'Choose a nearby collection point instead of home delivery.')}
            </p>
          )}
        </div>
        <div className="flex flex-col gap-1">
          <button
            type="button"
            onClick={handleOpen}
            className="text-xs font-medium px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors"
          >
            {value ? t('Wijzigen', 'Change') : t('Kies punt', 'Choose point')}
          </button>
          {value && (
            <button
              type="button"
              onClick={() => onChange(null)}
              className="text-xs text-muted-foreground hover:text-destructive"
            >
              {t('Verwijderen', 'Remove')}
            </button>
          )}
        </div>
      </div>

      {open && (
        <div className="mt-4 border-t border-border pt-4 space-y-3">
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (postcode.trim()) fetchPoints(postcode.trim());
            }}
            className="flex gap-2"
          >
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
              <input
                value={postcode}
                onChange={(e) => setPostcode(e.target.value)}
                placeholder={t('Postcode', 'Postcode')}
                className="w-full pl-9 pr-3 py-2 text-sm border border-border rounded-md bg-background outline-none focus:ring-2 focus:ring-ring"
              />
            </div>
            <button
              type="submit"
              disabled={loading || !postcode.trim()}
              className="px-3 py-2 text-sm border border-border rounded-md hover:bg-muted transition-colors font-medium disabled:opacity-50"
            >
              {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : t('Zoeken', 'Search')}
            </button>
          </form>

          {error && (
            <div className="flex items-center gap-2 p-2 bg-destructive/10 border border-destructive/20 rounded text-xs text-destructive">
              <AlertCircle className="w-3.5 h-3.5 shrink-0" />
              {error}
            </div>
          )}

          {carrier && points.length > 0 && (
            <p className="text-xs text-muted-foreground">
              {t('Vervoerder', 'Carrier')}: <span className="font-medium">{carrier}</span> — {t(`${points.length} punten gevonden`, `${points.length} points found`)}
            </p>
          )}

          {!loading && points.length > 0 && (
            <div className="max-h-72 overflow-y-auto divide-y divide-border border border-border rounded-md">
              {points.map((sp) => {
                const selected = value?.code === sp.servicepoint_code;
                return (
                  <button
                    key={sp.servicepoint_code}
                    type="button"
                    onClick={() => {
                      onChange({
                        code: sp.servicepoint_code,
                        name: sp.name,
                        carrier,
                        address: fmtAddress(sp),
                      });
                      setOpen(false);
                    }}
                    className={`w-full text-left p-3 hover:bg-muted/50 transition-colors flex items-start gap-2 ${
                      selected ? 'bg-primary/5' : ''
                    }`}
                  >
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate">{sp.name}</p>
                      <p className="text-xs text-muted-foreground">{fmtAddress(sp)}</p>
                    </div>
                    {selected && <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />}
                  </button>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}