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

import { Head, router, useForm, usePage } from "@inertiajs/react";
import { Save, ArrowLeft } 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 { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import CupsHistorialTab from './Shared/CupsHistorialTab';
import { useHistorialCups } from './hooks/useHistorialCups';
import { EneonDatosHistoricoTabs } from '../Shared/Tabs';

const EditarCups = () => {
    const { cups, tipo, tarifas, puntosSuministro } = usePage().props as any;
    const { showLoading, hideLoading } = useLoading();
    const [isProcessing, setIsProcessing] = useState(false);
    const [activeTab, setActiveTab] = useState<'datos' | 'historico'>('datos');

    const tarifasMap: Record<number, string> = (tarifas ?? []).reduce(
        (acc: Record<number, string>, t: any) => {
            const id = t.CodTarEle ?? t.CodTarGas ?? t.id;
            const nombre = t.DesTarEle ?? t.DesTarGas ?? t.nombre ?? String(id);
            if (id != null) acc[id] = nombre;
            return acc;
        },
        {}
    );

    const isElectrico = tipo === 'Electrico';
    const isCreate = !cups[isElectrico ? 'CodCupsEle' : 'CodCupGas'];

    const codCupsHistorial = isCreate
        ? null
        : (isElectrico ? cups.CodCupsEle : cups.CodCupGas);

    const historialCups = useHistorialCups(
        codCupsHistorial,
        isElectrico ? 'electrico' : 'gas',
        tipo,
    );

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

    // Inicializar formulario según el tipo
    const initialData = isElectrico ? {
        CodPunSum: cups.CodPunSum || null,
        CodDis: cups.CodDis || null,
        CUPsEle: cups.CUPsEle || '',
        CodTarElec: cups.CodTarElec || null,
        PotConP1: cups.PotConP1 || null,
        PotConP2: cups.PotConP2 || null,
        PotConP3: cups.PotConP3 || null,
        PotConP4: cups.PotConP4 || null,
        PotConP5: cups.PotConP5 || null,
        PotConP6: cups.PotConP6 || null,
        PotMaxBie: cups.PotMaxBie || null,
        FecAltCup: cups.FecAltCup || '',
        FecUltLec: cups.FecUltLec || '',
        ConAnuCup: cups.ConAnuCup || 0,
        DerAccKW: cups.DerAccKW || null,
        EstCUPs: cups.EstCUPs ?? 1,
        tipo: 'Electrico'
    } : {
        CodPunSum: cups.CodPunSum || null,
        CupsGas: cups.CupsGas || '',
        CodTarGas: cups.CodTarGas || null,
        CodDis: cups.CodDis || null,
        FecAltCup: cups.FecAltCup || '',
        FecUltLec: cups.FecUltLec || '',
        ConAnuCup: cups.ConAnuCup || null,
        DerAccKW: cups.DerAccKW || null,
        EstCUPs: cups.EstCUPs ?? 1,
        caudaldiario: cups.caudaldiario || null,
        tipo: 'Gas'
    };

    const { data, setData, post, put, processing, errors, clearErrors } = useForm<any>(initialData);

    const [selectedPuntoSum, setSelectedPuntoSum] = useState<any[]>(
        cups.punto_suministro ? [cups.punto_suministro] : []
    );

    const handleTextChange = (field: string) => (
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
        setData(field, e.target.value);
        if ((errors as any)?.[field]) {
            clearErrors(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);
        if ((errors as any)?.[field]) {
            clearErrors(field);
        }
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        
        if (isProcessing) return;
        setIsProcessing(true);

        const submitData = { ...data };

        const onSuccess = () => {
            setIsProcessing(false);
            if (!isCreate && codCupsHistorial) {
                void historialCups.refetchHistorial();
            }
            Swal.fire({
                title: isCreate ? 'CUPS creado correctamente' : 'CUPS actualizado correctamente',
                icon: 'success',
                timer: 1500,
                showConfirmButton: false
            });
        };

        const onError = (errors: any) => {
            setIsProcessing(false);
            Swal.fire({
                title: 'Error',
                text: 'Por favor revisa los campos del formulario',
                icon: 'error'
            });
        };

        if (isCreate) {
            post(route('cups.store'), {
                onSuccess,
                onError,
                onFinish: () => setIsProcessing(false)
            });
        } else {
            const cupsId = isElectrico ? cups.CodCupsEle : cups.CodCupGas;
            put(route('cups.update', { id: cupsId, tipo }), {
                onSuccess,
                onError,
                onFinish: () => setIsProcessing(false)
            });
        }
    };

    return (
        <React.Fragment>
            <Head title={isCreate ? `Crear CUPS ${tipo}` : `Editar CUPS ${tipo}`} />
            <div className="page-content">
                <Container fluid>
                    <BreadCrumb
                        title={isCreate ? `Crear CUPS ${tipo}` : `Editar CUPS ${tipo}`}
                        pageTitle="CUPS"
                    />

                    <Row>
                        <Col lg={12}>
                            <Card>
                                <Card.Header className="d-flex justify-content-between align-items-center">
                                    <h5 className="card-title mb-0">
                                        {isCreate ? `Nuevo CUPS ${tipo}` : `Editar CUPS ${tipo}`}
                                    </h5>
                                    <Button
                                        variant="secondary"
                                        size="sm"
                                        onClick={handleBack}
                                    >
                                        <ArrowLeft size={16} className="me-1" />
                                        Volver
                                    </Button>
                                </Card.Header>
                                <Card.Body>
                                    {!isCreate && (
                                        <EneonDatosHistoricoTabs
                                            activeTab={activeTab}
                                            onTabChange={setActiveTab}
                                            ariaLabel={`CUPS ${tipo}`}
                                            variant={isElectrico ? 'electrico' : 'gas'}
                                            datosCount={1}
                                            historicoCount={
                                                historialCups.codCupsActivo === codCupsHistorial
                                                    ? (historialCups.data?.pagination.total ?? 0)
                                                    : 0
                                            }
                                            panelIdDatos="panel-cups-datos"
                                            panelIdHistorico="panel-cups-historico"
                                            className="mb-3"
                                        />
                                    )}

                                    {activeTab === 'historico' && !isCreate ? (
                                        <CupsHistorialTab
                                            tipo={isElectrico ? 'electrico' : 'gas'}
                                            variant={isElectrico ? 'electrico' : 'gas'}
                                            codCups={codCupsHistorial}
                                            panelId="panel-cups-historico"
                                            historial={historialCups}
                                        />
                                    ) : (
                                    <Form onSubmit={handleSubmit} id="panel-cups-datos" role="tabpanel" tabIndex={0}>
                                        <Row className="g-3">
                                            {/* Punto de Suministro */}
                                            <Col md={6}>
                                                <Form.Group>
                                                    <Form.Label>Punto de Suministro <span className="text-danger">*</span></Form.Label>
                                                    <Typeahead
                                                        id="punto-suministro-typeahead"
                                                        labelKey={(option: any) => 
                                                            `${option.CodPunSum} - ${option.cliente?.RazSocCli || 'Sin cliente'}`
                                                        }
                                                        options={puntosSuministro || []}
                                                        placeholder="Buscar punto de suministro..."
                                                        selected={selectedPuntoSum}
                                                        onChange={(selected: any[]) => {
                                                            setSelectedPuntoSum(selected);
                                                            setData('CodPunSum', selected[0]?.CodPunSum || null);
                                                        }}
                                                        isInvalid={!!errors.CodPunSum}
                                                    />
                                                    {errors.CodPunSum && (
                                                        <Form.Control.Feedback type="invalid" className="d-block">
                                                            {errors.CodPunSum}
                                                        </Form.Control.Feedback>
                                                    )}
                                                </Form.Group>
                                            </Col>

                                            {/* CUPS */}
                                            <Col md={6}>
                                                <Form.Group>
                                                    <Form.Label>
                                                        CUPS {isElectrico ? 'Eléctrico' : 'Gas'} <span className="text-danger">*</span>
                                                    </Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        value={data[isElectrico ? 'CUPsEle' : 'CupsGas']}
                                                        onChange={handleTextChange(isElectrico ? 'CUPsEle' : 'CupsGas')}
                                                        isInvalid={!!errors[isElectrico ? 'CUPsEle' : 'CupsGas']}
                                                        placeholder={`Ingrese el CUPS ${isElectrico ? 'eléctrico' : 'de gas'}`}
                                                    />
                                                    <Form.Control.Feedback type="invalid">
                                                        {errors[isElectrico ? 'CUPsEle' : 'CupsGas']}
                                                    </Form.Control.Feedback>
                                                </Form.Group>
                                            </Col>

                                            {/* Tarifa */}
                                            <Col md={6}>
                                                <Form.Group>
                                                    <Form.Label>Tarifa <span className="text-danger">*</span></Form.Label>
                                                    <Form.Select
                                                        value={data[isElectrico ? 'CodTarElec' : 'CodTarGas'] || ''}
                                                        onChange={handleSelectChange(isElectrico ? 'CodTarElec' : 'CodTarGas', parseInt)}
                                                        isInvalid={!!errors[isElectrico ? 'CodTarElec' : 'CodTarGas']}
                                                    >
                                                        <option value="">Seleccione una tarifa</option>
                                                        {tarifas?.map((tarifa: any) => (
                                                            <option 
                                                                key={isElectrico ? tarifa.CodTarEle : tarifa.CodTarGas} 
                                                                value={isElectrico ? tarifa.CodTarEle : tarifa.CodTarGas}
                                                            >
                                                                {isElectrico ? tarifa.DesTarEle : tarifa.DesTarGas}
                                                            </option>
                                                        ))}
                                                    </Form.Select>
                                                    <Form.Control.Feedback type="invalid">
                                                        {errors[isElectrico ? 'CodTarElec' : 'CodTarGas']}
                                                    </Form.Control.Feedback>
                                                </Form.Group>
                                            </Col>

                                            {/* Código Distribuidora */}
                                            <Col md={6}>
                                                <Form.Group>
                                                    <Form.Label>Código Distribuidora</Form.Label>
                                                    <Form.Control
                                                        type="number"
                                                        value={data.CodDis || ''}
                                                        onChange={handleTextChange('CodDis')}
                                                        isInvalid={!!errors.CodDis}
                                                    />
                                                    <Form.Control.Feedback type="invalid">
                                                        {errors.CodDis}
                                                    </Form.Control.Feedback>
                                                </Form.Group>
                                            </Col>

                                            {/* Potencias (solo para Eléctrico) */}
                                            {isElectrico && (
                                                <>
                                                    <Col md={12}>
                                                        <hr />
                                                        <h6>Potencias Contratadas (kW)</h6>
                                                    </Col>
                                                    {[1, 2, 3, 4, 5, 6].map(periodo => (
                                                        <Col md={2} key={periodo}>
                                                            <Form.Group>
                                                                <Form.Label>P{periodo}</Form.Label>
                                                                <Form.Control
                                                                    type="number"
                                                                    step="0.001"
                                                                    value={data[`PotConP${periodo}`] || ''}
                                                                    onChange={handleTextChange(`PotConP${periodo}`)}
                                                                    placeholder="0.000"
                                                                />
                                                            </Form.Group>
                                                        </Col>
                                                    ))}
                                                    <Col md={6}>
                                                        <Form.Group>
                                                            <Form.Label>Potencia Máxima BIE</Form.Label>
                                                            <Form.Control
                                                                type="number"
                                                                step="0.01"
                                                                value={data.PotMaxBie || ''}
                                                                onChange={handleTextChange('PotMaxBie')}
                                                                placeholder="0.00"
                                                            />
                                                        </Form.Group>
                                                    </Col>
                                                </>
                                            )}

                                            {/* Caudal Diario (solo para Gas) */}
                                            {!isElectrico && (
                                                <Col md={6}>
                                                    <Form.Group>
                                                        <Form.Label>Caudal Diario</Form.Label>
                                                        <Form.Control
                                                            type="number"
                                                            value={data.caudaldiario || ''}
                                                            onChange={handleTextChange('caudaldiario')}
                                                        />
                                                    </Form.Group>
                                                </Col>
                                            )}

                                            {/* Fechas y Consumo */}
                                            <Col md={12}>
                                                <hr />
                                                <h6>Información Adicional</h6>
                                            </Col>

                                            <Col md={4}>
                                                <Form.Group>
                                                    <Form.Label>Fecha de Alta</Form.Label>
                                                    <FormDateInputEs
                                                        value={data.FecAltCup || ''}
                                                        onChange={(iso) => {
                                                            setData('FecAltCup', iso);
                                                            if ((errors as any)?.FecAltCup) {
                                                                clearErrors('FecAltCup');
                                                            }
                                                        }}
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={4}>
                                                <Form.Group>
                                                    <Form.Label>Fecha Última Lectura</Form.Label>
                                                    <FormDateInputEs
                                                        value={data.FecUltLec || ''}
                                                        onChange={(iso) => {
                                                            setData('FecUltLec', iso);
                                                            if ((errors as any)?.FecUltLec) {
                                                                clearErrors('FecUltLec');
                                                            }
                                                        }}
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={4}>
                                                <Form.Group>
                                                    <Form.Label>Consumo Anual (kWh)</Form.Label>
                                                    <Form.Control
                                                        type="number"
                                                        step="0.01"
                                                        value={data.ConAnuCup || ''}
                                                        onChange={handleTextChange('ConAnuCup')}
                                                        placeholder="0.00"
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={6}>
                                                <Form.Group>
                                                    <Form.Label>Derechos de Acceso (kW)</Form.Label>
                                                    <Form.Control
                                                        type="number"
                                                        step="0.01"
                                                        value={data.DerAccKW || ''}
                                                        onChange={handleTextChange('DerAccKW')}
                                                        placeholder="0.00"
                                                    />
                                                </Form.Group>
                                            </Col>

                                            <Col md={6}>
                                                <Form.Group>
                                                    <Form.Label>Estado</Form.Label>
                                                    <Form.Select
                                                        value={data.EstCUPs}
                                                        onChange={handleSelectChange('EstCUPs', parseInt)}
                                                    >
                                                        <option value={1}>Activo</option>
                                                        <option value={0}>Inactivo</option>
                                                    </Form.Select>
                                                </Form.Group>
                                            </Col>

                                            {/* Botones */}
                                            <Col md={12}>
                                                <hr />
                                                <div className="d-flex justify-content-end gap-2">
                                                    <Button
                                                        variant="secondary"
                                                        onClick={handleBack}
                                                        disabled={isProcessing}
                                                    >
                                                        Cancelar
                                                    </Button>
                                                    <Button
                                                        variant="primary"
                                                        type="submit"
                                                        disabled={isProcessing}
                                                    >
                                                        <Save size={16} className="me-1" />
                                                        {isProcessing ? 'Guardando...' : 'Guardar'}
                                                    </Button>
                                                </div>
                                            </Col>
                                        </Row>
                                    </Form>
                                    )}
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                </Container>
            </div>
        </React.Fragment>
    );
};

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