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

import { Head, router, useForm } from "@inertiajs/react";
import { FileText } from "lucide-react";
import BreadCrumb from "../../../../Components/Common/BreadCrumb";
import FormDateInputEs from "../../../../Components/Common/FormDateInputEs";
import Layout from "../../../../Layouts";
import Swal from 'sweetalert2';
import { useLoading } from '../../../../LoadingContext';
import estilosFoco from '../../Contratos/Shared/estilosFocoAccesible.module.css';
import {
  validarCamposObligatoriosMaestro,
  mostrarModalValidacionYEnfocar,
  normalizarErroresServidor,
  PRODUCTO_CAMPOS_ORDEN,
  PRODUCTO_ETIQUETAS,
  PRODUCTO_IDS_DOM,
} from '../Shared/validacionFormularioMaestro';

interface Comercializadora {
  CodCom: number;
  RazSocCom: string;
  NumCifCom: string;
}

interface Producto {
  CodPro: number | null;
  DesPro: string;
  CodCom?: number | null;
  SerGas?: number;
  SerEle?: number;
  EstPro: number;
  FecIniPro?: string | null;
  CodigoServicio?: string;
  ObsPro?: string;
  comercializadora?: Comercializadora;
}

const EditarProducto = ({producto, comercializadoras}: { producto: Producto, comercializadoras: Comercializadora[] }) => {
  const [isProcessing, setIsProcessing] = useState(false);
  const [frontErrors, setFrontErrors] = useState<Record<string, string>>({});
  const { showLoading, hideLoading } = useLoading();

  // Imprimir datos recibidos para depuración
  useEffect(() => {
    console.log("Datos recibidos en EditarProducto:", producto);
    console.log("Comercializadoras:", comercializadoras);
  }, [producto, comercializadoras]);

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

  const { data, setData, put, processing, errors, clearErrors } = useForm<any>({
    DesPro: producto.DesPro || '',
    CodCom: producto.CodCom || '',
    SerGas: producto.SerGas || 0,
    SerEle: producto.SerEle || 0,
    EstPro: producto.EstPro || 1,
    FecIniPro: producto.FecIniPro ? producto.FecIniPro.split('T')[0] : '',
    CodigoServicio: producto.CodigoServicio || '',
    ObsPro: producto.ObsPro || '',
  });

  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: PRODUCTO_CAMPOS_ORDEN,
      mapaIdsDom: PRODUCTO_IDS_DOM,
      tituloModal: 'Faltan campos obligatorios',
    });
  };

  const validarCliente = async (): Promise<boolean> => {
    const errores = validarCamposObligatoriosMaestro(
      data,
      PRODUCTO_CAMPOS_ORDEN,
      PRODUCTO_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 isCreate = !producto?.CodPro;

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

    Swal.fire({
      title: isCreate ? 'Crear producto' : 'Guardar cambios',
      text: isCreate ? `¿Deseas crear el producto ${data.DesPro || '(sin nombre)'}?` : `¿Deseas guardar los cambios del producto ${data.DesPro}?`,
      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('productos.store'), data, {
          preserveScroll: true,
          onFinish: () => {
            hideLoading();
            setIsProcessing(false);
          },
          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('productos.update', producto.CodPro), {
            preserveScroll: true,
            onFinish: () => {
              hideLoading();
              setIsProcessing(false);
            },
            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'} Producto${producto?.DesPro ? `: ${producto.DesPro}` : ''}`} />
      <div className="page-content">
        <Container fluid>
          <BreadCrumb title={isCreate ? "Crear" : "Editar"} pageTitle="Producto" />
          <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 ? 'Nuevo Producto' : `Producto: ${producto.DesPro || ''}`}</h4>
                  <div className="d-flex gap-2">
                    <Button
                      variant="success"
                      size="sm"
                      onClick={handleSubmit}
                      disabled={isProcessing}
                    >
                      <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} formularioProducto`}>
                  <Form onSubmit={handleSubmit}>
                    <Row className="g-4">
                      <Col xs={12}><h5 className="mb-2">Información General</h5></Col>

                      <Col md={6}>
                        <Form.Group controlId="DesPro">
                          <Form.Label>Descripción del Producto <span className="text-danger">*</span></Form.Label>
                          <Form.Control
                            value={data.DesPro || ''}
                            onChange={handleTextChange('DesPro')}
                            isInvalid={!!errorCampo('DesPro')}
                          />
                          <Form.Control.Feedback type="invalid">{errorCampo('DesPro')}</Form.Control.Feedback>
                        </Form.Group>
                      </Col>

                      <Col md={6}>
                        <Form.Group controlId="CodigoServicio">
                          <Form.Label>Código de Servicio</Form.Label>
                          <Form.Control
                            value={data.CodigoServicio || ''}
                            onChange={handleTextChange('CodigoServicio')}
                            isInvalid={!!errorCampo('CodigoServicio')}
                          />
                          <Form.Control.Feedback type="invalid">{errorCampo('CodigoServicio')}</Form.Control.Feedback>
                        </Form.Group>
                      </Col>

                      <Col md={6}>
                        <Form.Group controlId="CodCom">
                          <Form.Label>Comercializadora <span className="text-danger">*</span></Form.Label>
                          <Form.Select
                            value={data.CodCom || ''}
                            onChange={handleSelectChange('CodCom', (value) => (value === '' ? '' : parseInt(value)))}
                            isInvalid={!!errorCampo('CodCom')}
                          >
                            <option value="">Seleccione una comercializadora...</option>
                            {comercializadoras.map(com => (
                              <option key={com.CodCom} value={com.CodCom}>
                                {com.RazSocCom} - {com.NumCifCom}
                              </option>
                            ))}
                          </Form.Select>
                          <Form.Control.Feedback type="invalid">{errorCampo('CodCom')}</Form.Control.Feedback>
                        </Form.Group>
                      </Col>

                      <Col md={6}>
                        <Form.Group controlId="EstPro">
                          <Form.Label>Estado</Form.Label>
                          <Form.Select
                            value={data.EstPro ?? ''}
                            onChange={handleSelectChange('EstPro', (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={6}>
                        <Form.Group controlId="FecIniPro">
                          <Form.Label>Fecha de Inicio</Form.Label>
                          <FormDateInputEs
                            id="FecIniPro"
                            value={data.FecIniPro || ''}
                            onChange={(iso) => {
                              setData('FecIniPro', iso);
                              if (errorCampo('FecIniPro')) {
                                limpiarErrorCampo('FecIniPro');
                              }
                            }}
                            isInvalid={!!errorCampo('FecIniPro')}
                          />
                          <Form.Control.Feedback type="invalid">{errorCampo('FecIniPro')}</Form.Control.Feedback>
                        </Form.Group>
                      </Col>

                      <Col xs={12}><hr className="my-2" /><h5 className="mb-2">Servicios Ofrecidos</h5></Col>

                      <Col md={6}>
                        <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={6}>
                        <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 xs={12}><hr className="my-2" /><h5 className="mb-2">Observaciones</h5></Col>

                      <Col xs={12}>
                        <Form.Group controlId="ObsPro">
                          <Form.Label>Observaciones</Form.Label>
                          <Form.Control
                            as="textarea"
                            rows={3}
                            value={data.ObsPro || ''}
                            onChange={handleTextChange('ObsPro')}
                          />
                        </Form.Group>
                      </Col>
                    </Row>

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

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