import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Card, Row, Col, Form, Button } from 'react-bootstrap';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import axios from 'axios';

type LocalidadOption = {
  CodLoc: number;
  DesLoc: string;
  CPLoc: string;
  CodPro: number;
  provincia?: { CodPro: number; DesPro: string };
};

interface ClienteDireccionYGuardarProps {
  // Valores iniciales/externos
  codigoPostal?: string;
  localidad?: string; // nombre
  provincia?: string; // nombre
  disabled?: boolean;

  // Guardar
  onGuardar: () => void;
  isProcessing?: boolean;
  isFormValid?: boolean;

  // Callback al cambiar selección de localidad/CP
  onDireccionChange?: (payload: {
    codigoPostal: string;
    localidad: string;
    provincia: string;
    codLocalidad?: number;
    codProvincia?: number;
  }) => void;
}

const ClienteDireccionYGuardar: React.FC<ClienteDireccionYGuardarProps> = ({
  codigoPostal = '',
  localidad = '',
  provincia = '',
  disabled = false,
  onGuardar,
  isProcessing = false,
  isFormValid = true,
  onDireccionChange,
}) => {
  const [options, setOptions] = useState<LocalidadOption[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [selected, setSelected] = useState<LocalidadOption[]>([]);

  // Construye etiqueta como en contratos: "Nombre (CP)"
  const labelFor = useCallback((opt: LocalidadOption) => `${opt.DesLoc} (${opt.CPLoc})`, []);

  // Carga de opciones remota (localidades.buscar) por CP o nombre
  const buscarLocalidades = useCallback(async (q: string) => {
    if (!q || q.trim().length < 1) {
      setOptions([]);
      return;
    }
    try {
      setIsLoading(true);
      // route() suele estar expuesto globalmente en el proyecto
      const url = (route('localidades.buscar') as unknown) as string;
      const res = await axios.get(url, { params: { q } });
      const data = Array.isArray(res.data) ? res.data : res.data?.data || [];
      setOptions(data);
    } catch (e) {
      setOptions([]);
    } finally {
      setIsLoading(false);
    }
  }, []);

  // Efecto para bootstrap inicial desde props
  useEffect(() => {
    if (codigoPostal || localidad) {
      // Intentar precargar coincidencia rápida mínima por CP
      const preload = async () => {
        const q = codigoPostal || localidad;
        await buscarLocalidades(q);
        // Seleccionar la primera que coincida por CP si existe
        const found = options.find(o => o.CPLoc === codigoPostal) || undefined;
        if (found) {
          setSelected([found]);
        }
      };
      preload();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Al seleccionar opción, propagar cambios para CP/Localidad/Provincia
  const handleChange = (items: LocalidadOption[]) => {
    setSelected(items);
    const loc = items[0];
    if (loc) {
      const payload = {
        codigoPostal: loc.CPLoc,
        localidad: loc.DesLoc,
        provincia: loc.provincia?.DesPro || provincia || '',
        codLocalidad: loc.CodLoc,
        codProvincia: loc.CodPro,
      };
      onDireccionChange?.(payload);
    } else {
      onDireccionChange?.({ codigoPostal: '', localidad: '', provincia: '' });
    }
  };

  // Selected value derivado desde props si no hay selección interna
  const derivedSelected = useMemo(() => {
    if (selected.length > 0) return selected;
    if (!codigoPostal && !localidad) return [];
    return [
      {
        CodLoc: 0,
        DesLoc: localidad || '',
        CPLoc: codigoPostal || '',
        CodPro: 0,
        provincia: provincia ? { CodPro: 0, DesPro: provincia } : undefined,
      },
    ];
  }, [selected, codigoPostal, localidad, provincia]);

  return (
    <Card>
      <Card.Body>
        <Row className="g-3 align-items-end">
          <Col md={4}>
            <div className="d-flex justify-content-end">
              <div className="d-grid" style={{ minWidth: 280 }}>
        <Button
                  variant="success"
                  size="lg"
                  onClick={onGuardar}
                  disabled={disabled || isProcessing || !isFormValid}
                >
                  {isProcessing ? (
                    <>
                      <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
          Guardando...
                    </>
                  ) : (
                    <>
                      <i className="fas fa-save me-2"></i>
          Guardar Cliente
                    </>
                  )}
                </Button>
                {!isFormValid && (
                  <small className="text-danger mt-1 d-block">
                    <i className="fas fa-exclamation-triangle me-1"></i>
                    Complete todos los campos requeridos
                  </small>
                )}
              </div>
            </div>
          </Col>
        </Row>

        <Row className="mt-4">
          <Col>
            <div className="alert alert-info">
              <h6 className="alert-heading">
                <i className="fas fa-info-circle me-2"></i>
                Instrucciones
              </h6>
              <ul className="mb-0">
                <li>Busque por código postal o nombre de localidad y seleccione una opción.</li>
                <li>La Localidad y Provincia se rellenan automáticamente tras la selección.</li>
                <li>Revise que el resto del formulario esté completo antes de guardar.</li>
              </ul>
            </div>
          </Col>
        </Row>
      </Card.Body>
    </Card>
  );
};

export default ClienteDireccionYGuardar;