import React, { useRef, useState, useEffect } from "react";
import {
    Card,
    Col,
    Container,
    Row, Button, Form,
    InputGroup
} from "react-bootstrap";

import { Head, router, useForm } from "@inertiajs/react";
import 'react-bootstrap-typeahead/css/Typeahead.css';
import { FileText } from "lucide-react";
import BreadCrumb from "../../../../Components/Common/BreadCrumb";
import Layout from "../../../../Layouts";
import Swal from 'sweetalert2';
import axios from 'axios';
import { Typeahead } from 'react-bootstrap-typeahead';
import { useLoading } from '../../../../LoadingContext';
import { Localidad } from "../../Contratos/Interfaces/Interfaces";
import estilosFoco from "../../Contratos/Shared/estilosFocoAccesible.module.css";
import {
  validarCamposObligatoriosMaestro,
  mostrarModalValidacionYEnfocar,
  normalizarErroresServidor,
  COMERCIALIZADORA_CAMPOS_ORDEN,
  COMERCIALIZADORA_ETIQUETAS,
  COMERCIALIZADORA_IDS_DOM,
} from '../Shared/validacionFormularioMaestro';

interface Comercializadora {
  CodCom: number;
  RazSocCom: string;
  NomComCom?: string;
  NumCifCom: string;
  EstCom: number;
  TelFijCom?: string;
  EmaCom?: string;
  PagWebCom?: string;
  NomConCom?: string;
  CarConCom?: string;
  NomViaDirCom?: string;
  NumViaDirCom?: string;
  CPLoc?: string;
  SerGas?: number;
  SerEle?: number;
  SerEsp?: number;
  ObsCom?: string;
  CodTipVia?: number;
  CodLoc?: number;
  tipoVia?: {
    DesTipVia: string;
  };
  localidad?: {
    DesLoc: string;
    provincia?: {
      DesPro: string;
    };
  };
}

const EditarComercializadora = ({comercializadora, localidades}: { comercializadora: Comercializadora, localidades: Localidad[] }) => {
  const [activeKey, setActiveKey] = useState<string>("0");
  const printRef = useRef<HTMLDivElement>(null);

  const [formErrors, setFormErrors] = useState<{ [key: string]: string }>({});
  const [showErrors, setShowErrors] = useState(false);
  const [frontErrors, setFrontErrors] = useState<Record<string, string>>({});
  const [disabled, setDisabled] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [isFormValid, setIsFormValid] = useState(true);
  const { showLoading, hideLoading } = useLoading();

  // Imprimir datos recibidos para depuración
  useEffect(() => {
    console.log("Datos recibidos en EditarComercializadora:", comercializadora);
    console.log(localidades);
  }, [comercializadora]);

  const handleBack = () => {
    showLoading();
    router.visit(route('comercializadoras.index'), {
      onFinish: () => hideLoading()
    });
  };

  const getSelectedTypeaheadValue = (options: any[], value: string, labelKey: string) => {
    if (value && options.length > 0) {
        const found = options.find(opt => opt[labelKey] === value);
        return found ? [found] : [];
    }
    return [];
  };

  const { data, setData, put, processing, errors, clearErrors } = useForm<any>({
    RazSocCom: comercializadora.RazSocCom,
    NomComCom: comercializadora.NomComCom,
    NumCifCom: comercializadora.NumCifCom,
    TelFijCom: comercializadora.TelFijCom,
    EmaCom: comercializadora.EmaCom,
    PagWebCom: comercializadora.PagWebCom,
    NomConCom: comercializadora.NomConCom,
    CarConCom: comercializadora.CarConCom,
    EstCom: comercializadora.EstCom,
    CPLoc: comercializadora.CPLoc || null,
    CodLoc: comercializadora.CodLoc || null,
    CodTipVia: comercializadora.CodTipVia,
    NomViaDirCom: comercializadora.NomViaDirCom,
    NumViaDirCom: comercializadora.NumViaDirCom,
    SerGas: comercializadora.SerGas,
    SerEle: comercializadora.SerEle,
    SerEsp: comercializadora.SerEsp,
    ObsCom: comercializadora.ObsCom,
    localidad: comercializadora.localidad?.DesLoc || '',
    provincia: comercializadora.localidad?.provincia?.DesPro || '',
  });

  // Opciones y dependientes
  const [tiposVia, setTiposVia] = useState<{ CodTipVia: number; DesTipVia: string; IniTipVia: string }[]>([]);
  const [selectedLoc, setSelectedLoc] = useState<any | null>(comercializadora.localidad || null);
  const [bLocalidad, setbLocalidad] = useState<boolean>(false);

  useEffect(() => {
    axios.get(route('tipo-via.listar') as unknown as string)
      .then(res => setTiposVia(res.data?.data || []))
      .catch(() => {});
  }, []);

  const isCreate = !comercializadora?.CodCom;

  const errorCampo = (campo: string): string | undefined =>
    frontErrors[campo] || (errors as Record<string, string>)[campo];

  const limpiarErrorCampo = (field: string) => {
    clearErrors(field as keyof typeof errors);
    setFrontErrors((prev) => {
      if (!prev[field]) {
        return prev;
      }
      const next = { ...prev };
      delete next[field];
      return next;
    });
  };

  const manejarErroresValidacion = async (erroresValidacion: Record<string, string>) => {
    setFrontErrors(erroresValidacion);
    await mostrarModalValidacionYEnfocar({
      errores: erroresValidacion,
      camposOrdenados: COMERCIALIZADORA_CAMPOS_ORDEN,
      mapaIdsDom: COMERCIALIZADORA_IDS_DOM,
      tituloModal: 'Faltan campos obligatorios',
    });
  };

  const validarCliente = async (): Promise<boolean> => {
    const errores = validarCamposObligatoriosMaestro(
      data,
      COMERCIALIZADORA_CAMPOS_ORDEN,
      COMERCIALIZADORA_ETIQUETAS,
    );
    if (Object.keys(errores).length === 0) {
      return true;
    }
    await manejarErroresValidacion(errores);
    return false;
  };

  const handleTextChange = (field: string) => (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setData(field, e.target.value);
    limpiarErrorCampo(field);
  };

  const handleSelectChange = (field: string, parser?: (value: string) => any) => (
    e: React.ChangeEvent<HTMLSelectElement>
  ) => {
    const value = parser ? parser(e.target.value) : e.target.value;
    setData(field, value);
    limpiarErrorCampo(field);
  };

  const guardar = async () => {
    const clienteValido = await validarCliente();
    if (!clienteValido) {
      return;
    }

    Swal.fire({
      title: isCreate ? 'Crear comercializadora' : 'Guardar cambios',
      text: isCreate ? `¿Deseas crear la comercializadora ${data.RazSocCom || '(sin nombre)'}?` : `¿Deseas guardar los cambios de la comercializadora ${data.RazSocCom}?`,
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: isCreate ? 'Sí, crear' : 'Sí, guardar',
      cancelButtonText: 'Cancelar'
    }).then(result => {
      if (result.isConfirmed) {
        setIsProcessing(true);
        showLoading();

        if (isCreate) {
          router.post(route('comercializadoras.store'), data, {
          preserveScroll: true,
          onFinish: () => {
            setIsProcessing(false);
            hideLoading();
          },
          onSuccess: (page) => {
            const flash: any = (page as any).props?.flash || {};
            const title = flash.message || flash.error || 'Creado';
            const icon = flash.type || (flash.error ? 'error' : 'success');
            Swal.fire({ title, icon, timer: 1500, showConfirmButton: false });
          },
          onError: (serverErrors) => {
            void manejarErroresValidacion(normalizarErroresServidor(serverErrors));
          }
          });
        } else {
          put(route('comercializadoras.update', comercializadora.CodCom), {
            preserveScroll: true,
            onFinish: () => {
              setIsProcessing(false);
              hideLoading();
            },
            onSuccess: (page) => {
              const flash: any = (page as any).props?.flash || {};
              const title = flash.message || flash.error || 'Actualizado';
              const icon = flash.type || (flash.error ? 'error' : 'success');
              Swal.fire({ title, icon, timer: 1500, showConfirmButton: false });
            },
            onError: (serverErrors) => {
              void manejarErroresValidacion(normalizarErroresServidor(serverErrors));
            }
          });
        }
      }
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    guardar();
  };

  return (
    <React.Fragment>
  <Head title={`${isCreate ? 'Crear' : 'Editar'} Comercializadora${comercializadora?.RazSocCom ? `: ${comercializadora.RazSocCom}` : ''}`} />
      <div className="page-content">
        <Container fluid>
          <BreadCrumb title={isCreate ? "Crear" : "Editar"} pageTitle="Comercializadora" />
          <Row>
            <Col xl={12}>
              <Card>
                <Card.Header className="d-flex justify-content-between align-items-center bg-light">
                  <h4 className="card-title mb-0">{isCreate ? 'Nueva Comercializadora' : `Comercializadora: ${comercializadora.NumCifCom || ''}`}</h4>
                  <div className="d-flex gap-2">
                    <Button
                      variant="success"
                      size="sm"
                      onClick={handleSubmit}
                      disabled={disabled || isProcessing || !isFormValid}
                    >
                      <i className="fas fa-save me-2"></i>
                      {isCreate ? 'Crear' : 'Guardar'}
                    </Button>
                    <Button
                      variant="secondary"
                      size="sm"
                      onClick={handleBack}
                    >
                      <FileText size={14} className="me-1" />
                      Volver
                    </Button>
                  </div>
                </Card.Header>
                <Card.Body>
                  <div className={`${estilosFoco.contenedorAccesibleContratos} formularioComercializadora`}>
                  <Form onSubmit={handleSubmit}>
                    <Row className="g-4">
                      <Col xs={12}><h5 className="mb-2">Información General</h5></Col>
                      <Col md={4}>
                        <Form.Group controlId="NumCifCom">
                          <Form.Label>NIF/CIF <span className="text-danger">*</span></Form.Label>
                          <Form.Control value={data.NumCifCom || ''} onChange={handleTextChange('NumCifCom')} isInvalid={!!errorCampo('NumCifCom')} />
                          <Form.Control.Feedback type="invalid">{errorCampo('NumCifCom')}</Form.Control.Feedback>
                        </Form.Group>
                      </Col>
                      <Col md={4}>
                        <Form.Group controlId="RazSocCom">
                          <Form.Label>Razón Social <span className="text-danger">*</span></Form.Label>
                          <Form.Control value={data.RazSocCom || ''} onChange={handleTextChange('RazSocCom')} isInvalid={!!errorCampo('RazSocCom')} />
                          <Form.Control.Feedback type="invalid">{errorCampo('RazSocCom')}</Form.Control.Feedback>
                        </Form.Group>
                      </Col>
                      <Col md={4}>
                        <Form.Group controlId="NomComCom">
                          <Form.Label>Nombre Comercial</Form.Label>
                          <Form.Control value={data.NomComCom || ''} onChange={handleTextChange('NomComCom')} />
                        </Form.Group>
                      </Col>

                      <Col md={4}>
                        <Form.Group controlId="EstCom">
                          <Form.Label>Estado</Form.Label>
                          <Form.Select value={data.EstCom ?? ''} onChange={handleSelectChange('EstCom', (value) => (value === '' ? undefined : parseInt(value)))}>
                            <option value="">Seleccione…</option>
                            <option value="1">Activo</option>
                            <option value="0">Suspendido</option>
                          </Form.Select>
                        </Form.Group>
                      </Col>
                      <Col md={4}>
                        <Form.Group controlId="TelFijCom">
                          <Form.Label>Teléfono</Form.Label>
                          <Form.Control value={data.TelFijCom || ''} onChange={handleTextChange('TelFijCom')} />
                        </Form.Group>
                      </Col>
                      <Col md={4}>
                        <Form.Group controlId="EmaCom">
                          <Form.Label>Email</Form.Label>
                          <Form.Control type="email" value={data.EmaCom || ''} onChange={handleTextChange('EmaCom')} />
                        </Form.Group>
                      </Col>
                      <Col md={6}>
                        <Form.Group controlId="PagWebCom">
                          <Form.Label>Página Web</Form.Label>
                          <Form.Control value={data.PagWebCom || ''} onChange={handleTextChange('PagWebCom')} />
                        </Form.Group>
                      </Col>
                      <Col md={6}>
                        <Form.Group controlId="ObsCom">
                          <Form.Label>Observaciones</Form.Label>
                          <Form.Control as="textarea" rows={3} value={data.ObsCom || ''} onChange={handleTextChange('ObsCom')} />
                        </Form.Group>
                      </Col>

                      <Col xs={12}><hr className="my-2" /><h5 className="mb-2">Servicios Ofrecidos</h5></Col>
                      <Col md={4}>
                        <Form.Group controlId="SerGas">
                          <Form.Label>Servicio de Gas</Form.Label>
                          <Form.Select value={data.SerGas ?? ''} onChange={handleSelectChange('SerGas', (value) => (value === '' ? undefined : parseInt(value)))}>
                            <option value="">Seleccione…</option>
                            <option value="1">Sí</option>
                            <option value="0">No</option>
                          </Form.Select>
                        </Form.Group>
                      </Col>
                      <Col md={4}>
                        <Form.Group controlId="SerEle">
                          <Form.Label>Servicio Eléctrico</Form.Label>
                          <Form.Select value={data.SerEle ?? ''} onChange={handleSelectChange('SerEle', (value) => (value === '' ? undefined : parseInt(value)))}>
                            <option value="">Seleccione…</option>
                            <option value="1">Sí</option>
                            <option value="0">No</option>
                          </Form.Select>
                        </Form.Group>
                      </Col>
                      <Col md={4}>
                        <Form.Group controlId="SerEsp">
                          <Form.Label>Servicios Especiales</Form.Label>
                          <Form.Select value={data.SerEsp ?? ''} onChange={handleSelectChange('SerEsp', (value) => (value === '' ? undefined : parseInt(value)))}>
                            <option value="">Seleccione…</option>
                            <option value="1">Sí</option>
                            <option value="0">No</option>
                          </Form.Select>
                        </Form.Group>
                      </Col>

                      <Col xs={12}><hr className="my-2" /><h5 className="mb-2">Persona de Contacto</h5></Col>
                      <Col md={6}>
                        <Form.Group controlId="NomConCom">
                          <Form.Label>Nombre del Contacto</Form.Label>
                          <Form.Control value={data.NomConCom || ''} onChange={handleTextChange('NomConCom')} />
                        </Form.Group>
                      </Col>
                      <Col md={6}>
                        <Form.Group controlId="CarConCom">
                          <Form.Label>Cargo</Form.Label>
                          <Form.Control value={data.CarConCom || ''} onChange={handleTextChange('CarConCom')} />
                        </Form.Group>
                      </Col>

                      <Col xs={12}><hr className="my-2" /><h5 className="mb-2">Dirección</h5></Col>
                      <Col md={4}>
                        <Form.Group controlId="CodTipVia">
                          <Form.Label>Tipo de Vía</Form.Label>
                          <Form.Select value={data.CodTipVia || ''} onChange={handleSelectChange('CodTipVia', (value) => (value ? parseInt(value) : undefined))}>
                            <option value="">Seleccione…</option>
                            {tiposVia.map(tv => (
                              <option key={tv.CodTipVia} value={tv.CodTipVia}>{tv.DesTipVia}</option>
                            ))}
                          </Form.Select>
                        </Form.Group>
                      </Col>
                      <Col md={5}>
                        <Form.Group controlId="NomViaDirCom">
                          <Form.Label>Nombre de la vía</Form.Label>
                          <Form.Control value={data.NomViaDirCom || ''} onChange={handleTextChange('NomViaDirCom')} />
                        </Form.Group>
                      </Col>
                      <Col md={3}>
                        <Form.Group controlId="NumViaDirCom">
                          <Form.Label>Número</Form.Label>
                          <Form.Control value={data.NumViaDirCom || ''} onChange={handleTextChange('NumViaDirCom')} />
                        </Form.Group>
                      </Col>

                      {/* Código Postal */}
                      <Col lg={3} md={6} sm={12}>
                        <Form.Label htmlFor="codigoPostal" className="form-label">
                            Código Postal
                        </Form.Label>
                        {!data.CPLoc && (
                        <InputGroup hasValidation>
                            <Typeahead
                                labelKey="CPLoc"
                                id="codigoPostal"
                                options={localidades}
                                selected={getSelectedTypeaheadValue(localidades, data.CPLoc, 'CPLoc')}
                                onChange={(selected) => {
                                    if (selected.length > 0) {
                                        const localidad = selected[0] as Localidad;
                                        setData((prev: any) => ({
                                            ...prev,
                                            CPLoc: localidad.CPLoc,
                                            localidad: localidad.DesLoc,
                                            provincia: localidad.provincia.DesPro
                                        }));
                                        clearErrors('CPLoc');
                                        setbLocalidad(true);
                                    } else {
                                        setData((prev: any) => ({
                                            ...prev,
                                            CPLoc: '',
                                            localidad: '',
                                            provincia: ''
                                        }));
                                        clearErrors('CPLoc');
                                    }
                                }}
                                placeholder="Buscar por Código Postal.."
                                isLoading={false}
                                minLength={1}
                                isInvalid={showErrors && !!formErrors.CPLoc}
                            />
                            <Form.Control.Feedback type="invalid">
                                {formErrors.CPLoc}
                            </Form.Control.Feedback>
                        </InputGroup>
                        )}
                        {data.CPLoc && (
                            <Form.Control
                                type="text"
                                id="codigoPostal"
                                name="CPLoc"
                                value={data.CPLoc}
                                onChange={handleTextChange('CPLoc')}
                                placeholder="Código Postal"
                                isInvalid={showErrors && !!formErrors.CPLoc}
                            />
                        )}
                        <Form.Control.Feedback type="invalid">
                            {formErrors.CPLoc}
                        </Form.Control.Feedback>
                      </Col>

                      {/* Localidad */}
                      <Col lg={4} md={6} sm={12}>
                        <Form.Label htmlFor="localidad" className="form-label">
                            Localidad
                        </Form.Label>
                        <Form.Control
                            type="text"
                            id="localidad"
                            name="localidad"
                            onChange={(e) => setData('localidad', e.target.value)}
                            disabled
                            value={data.localidad}
                            placeholder="Localidad"
                            isInvalid={showErrors && !!formErrors.localidad}
                        />
                        <Form.Control.Feedback type="invalid">
                            {formErrors.localidad}
                        </Form.Control.Feedback>
                      </Col>

                      {/* Provincia */}
                      <Col lg={5} md={12} sm={12}>
                        <Form.Label htmlFor="provincia" className="form-label">
                            Provincia
                        </Form.Label>
                        <Form.Control
                            type="text"
                            id="provincia"
                            name="provincia"
                            onChange={(e) => setData('provincia', e.target.value)}
                            disabled
                            value={data.provincia}
                            placeholder="Provincia"
                            isInvalid={showErrors && !!formErrors.provincia}
                        />
                        <Form.Control.Feedback type="invalid">
                            {formErrors.provincia}
                        </Form.Control.Feedback>
                      </Col>
                    </Row>

                  </Form>
                  </div>
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    </React.Fragment>
  );
};

EditarComercializadora.layout = (page: any) => <Layout children={page} />;
export default EditarComercializadora;