import React, { useState } from 'react';
import { Head, usePage } from '@inertiajs/react';
import { Container, Row, Col, Spinner } from 'react-bootstrap';
import Swal from 'sweetalert2';
import Layout from '../../../Layouts';
import BreadCrumb from '../../../Components/Common/BreadCrumb';
import { Can } from '../../../Components/Auth/Can';
import { formatCalendarDateEs } from '../../../utils/serverCalendarDate';
import { useActivaciones } from './hooks/useActivaciones';
import ListadoContratosModal from './components/ListadoContratosModal';
import FormularioContrato from './components/FormularioContrato';
import ContratoRapidoModal from './components/ContratoRapidoModal';
import {
    ActivacionesPageProps,
    ContratoActivacion,
    FormularioActivacion,
    TIPO_ELECTRICO,
    comercializadoraNombre,
} from './types';
import { Zap, Flame, Search, FileText, Plus, Check, Copy, Building2, MapPin } from 'lucide-react';
import '../Dashboard/Dashboard.css';

const ActivacionesIndex = () => {
    const {
        comercializadoras = [],
        productos = [],
        anexos = [],
        tiposPrecio = [],
        tarifasElectricas = [],
        tarifasGas = [],
    } = usePage<ActivacionesPageProps>().props;

    const { busqueda, buscando, guardando, sincronizando, buscar, actualizar, actualizarFechas, contratoRapido } = useActivaciones();
    const [cups, setCups] = useState('');
    const [mostrarListado, setMostrarListado] = useState(false);
    const [mostrarContratoRapido, setMostrarContratoRapido] = useState(false);
    const [seleccionadoId, setSeleccionadoId] = useState<number | null>(null);
    const [copiedCups, setCopiedCups] = useState(false);

    const seleccionado = busqueda?.contratos.find((c) => c.CodProComCup === seleccionadoId) ?? null;

    const comercializadoraDe = (codCom: number | null) =>
        comercializadoras.find((c) => String(c.CodCom) === String(codCom ?? '')) ?? null;

    const consultar = async (event: React.FormEvent) => {
        event.preventDefault();
        const trimmed = cups.trim();
        if (!trimmed) return;
        setSeleccionadoId(null);
        const resultado = await buscar(trimmed);
        if (resultado) {
            setMostrarListado(true);
        }
    };

    const handleCopyCups = (text: string) => {
        if (!navigator?.clipboard) return;
        void navigator.clipboard.writeText(text);
        setCopiedCups(true);
        setTimeout(() => setCopiedCups(false), 1800);
    };

    const seleccionar = (contrato: ContratoActivacion) => {
        setSeleccionadoId(contrato.CodProComCup);
        setMostrarListado(false);
    };

    const sincronizarFechas = async (contrato: ContratoActivacion) => {
        const comercializadora = comercializadoraDe(contrato.CodCom);
        if (!comercializadora) {
            await Swal.fire({
                icon: 'warning',
                title: 'Comercializadora',
                text: 'Este contrato no tiene comercializadora. No se puede consultar el servicio de fechas.',
            });
            return;
        }
        if (!comercializadora.fechas_provider) {
            await Swal.fire({
                icon: 'warning',
                title: 'Sin servicio de fechas',
                text: `${comercializadoraNombre(comercializadora)} no tiene consulta de fechas. Ahora mismo solo ADX y AUDAX.`,
            });
            return;
        }

        const confirmacion = await Swal.fire({
            icon: 'question',
            title: 'Actualizar fechas',
            text: `Se consultará ${comercializadoraNombre(comercializadora)} y se sustituirán la fecha de activación y vencimiento del contrato ${contrato.CodConCom ?? contrato.CodProComCup}.`,
            showCancelButton: true,
            confirmButtonText: 'Actualizar',
            cancelButtonText: 'Cancelar',
        });
        if (!confirmacion.isConfirmed) {
            return;
        }

        const resultado = await actualizarFechas(contrato);
        if (resultado) {
            await Swal.fire({
                icon: 'success',
                title: 'Fechas actualizadas',
                html: `Activación: <b>${formatCalendarDateEs(resultado.contrato.FecActCUPs)}</b><br/>Vencimiento: <b>${formatCalendarDateEs(resultado.contrato.FecVenCUPs)}</b>`,
            });
        }
    };

    const guardar = (form: FormularioActivacion, periodos: number) => {
        if (seleccionado) {
            void actualizar(seleccionado, form, periodos);
        }
    };

    const isElectrico = busqueda?.cups.TipCups === TIPO_ELECTRICO;

    return (
        <React.Fragment>
            <Head title="Activaciones por CUPS" />
            <div className="page-content dashboard-shell">
                <Container fluid className="pt-1 pb-4 px-1 px-md-3">
                    <BreadCrumb title="Activaciones" pageTitle="Gestión comercial" />

                    {/* Hero Header & Search Bar estilo Apple Mac / Dashboard */}
                    <div className="mb-4 text-center">
                        <div
                            className="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill mb-3"
                            style={{
                                background: '#eff6ff',
                                border: '1px solid #dbeafe',
                                color: '#2563eb',
                                fontSize: '0.75rem',
                                fontWeight: 600,
                            }}
                        >
                            <Zap size={13} />
                            <span>Módulo de Activaciones y Suministros</span>
                        </div>
                        <h2 className="saas-title mb-2" style={{ fontSize: '1.75rem' }}>
                            Activaciones por CUPS
                        </h2>
                        <p
                            style={{
                                fontSize: '0.875rem',
                                color: '#64748b',
                                maxWidth: '580px',
                                margin: '0 auto 1.5rem',
                                lineHeight: 1.5,
                            }}
                        >
                            Consulta el historial técnico y contractual del punto de suministro, sincroniza fechas de activación y vencimiento con las comercializadoras o genera un contrato rápido.
                        </p>

                        {/* Search Input Bar */}
                        <form
                            onSubmit={consultar}
                            style={{
                                position: 'relative',
                                width: '100%',
                                maxWidth: '640px',
                                margin: '0 auto',
                            }}
                        >
                            <div
                                style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    backgroundColor: '#ffffff',
                                    border: '1px solid #cbd5e1',
                                    borderRadius: '14px',
                                    padding: '4px 6px 4px 16px',
                                    boxShadow: '0 2px 6px -1px rgba(15, 23, 42, 0.08), 0 1px 3px -1px rgba(15, 23, 42, 0.04)',
                                    transition: 'all 0.2s ease',
                                }}
                                className="search-input-shell"
                            >
                                <div style={{ color: '#94a3b8', display: 'flex', alignItems: 'center', marginRight: '10px' }}>
                                    <Search size={18} />
                                </div>
                                <input
                                    id="activaciones-cups"
                                    type="text"
                                    value={cups}
                                    maxLength={30}
                                    placeholder="ES0021000000029526CZ0P1"
                                    onChange={(e) => setCups(e.target.value.toUpperCase().replace(/\s+/g, ''))}
                                    autoComplete="off"
                                    spellCheck={false}
                                    style={{
                                        flex: 1,
                                        border: 'none',
                                        outline: 'none',
                                        backgroundColor: 'transparent',
                                        fontSize: '0.925rem',
                                        fontWeight: 600,
                                        color: '#0f172a',
                                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
                                        letterSpacing: '0.04em',
                                    }}
                                />
                                {cups && (
                                    <button
                                        type="button"
                                        onClick={() => setCups('')}
                                        style={{
                                            border: 'none',
                                            background: 'transparent',
                                            color: '#94a3b8',
                                            padding: '4px 8px',
                                            cursor: 'pointer',
                                            fontSize: '0.85rem',
                                        }}
                                        title="Limpiar"
                                    >
                                        ×
                                    </button>
                                )}
                                <button
                                    type="submit"
                                    disabled={buscando || !cups.trim()}
                                    className="saas-btn-primary ms-2"
                                    style={{
                                        borderRadius: '10px',
                                        padding: '0.55rem 1.15rem',
                                        fontWeight: 600,
                                    }}
                                >
                                    {buscando ? (
                                        <>
                                            <Spinner size="sm" animation="border" className="me-1" />
                                            <span>Consultando…</span>
                                        </>
                                    ) : (
                                        <>
                                            <Search size={15} />
                                            <span>Consultar</span>
                                        </>
                                    )}
                                </button>
                            </div>
                            <div className="dash-search-hint mt-2">
                                Escribe los 20 o 22 caracteres del código CUPS para consultar contratos y datos SIPS.
                            </div>
                        </form>
                    </div>

                    {/* Resumen del CUPS Activo */}
                    {busqueda && (
                        <Row className="justify-content-center mb-4">
                            <Col lg={10} xl={9}>
                                <div className="saas-card">
                                    <div className="saas-card-header">
                                        <div className="d-flex align-items-center gap-2">
                                            <span className={`saas-icon-badge ${isElectrico ? 'primary' : 'rose'}`}>
                                                {isElectrico ? <Zap size={16} /> : <Flame size={16} />}
                                            </span>
                                            <div>
                                                <div className="d-flex align-items-center gap-2">
                                                    <span className="saas-title h6 mb-0" style={{ letterSpacing: '0.03em', fontFamily: 'ui-monospace, SFMono-Regular, monospace' }}>
                                                        {busqueda.cups.CUPs}
                                                    </span>
                                                    <button
                                                        type="button"
                                                        onClick={() => handleCopyCups(busqueda.cups.CUPs)}
                                                        className="saas-copy-btn"
                                                        title="Copiar CUPS"
                                                    >
                                                        {copiedCups ? <Check size={14} className="text-success" /> : <Copy size={14} />}
                                                    </button>
                                                    <span
                                                        className={`saas-badge-status ${isElectrico ? 'active' : 'danger'}`}
                                                        style={{ textTransform: 'capitalize' }}
                                                    >
                                                        {isElectrico ? 'Eléctrico' : 'Gas'}
                                                    </span>
                                                </div>
                                                <span className="text-muted small">Punto de Suministro Encontrado</span>
                                            </div>
                                        </div>

                                        <div className="d-flex align-items-center gap-2">
                                            <button
                                                type="button"
                                                className="saas-btn-outline"
                                                onClick={() => setMostrarListado(true)}
                                            >
                                                <FileText size={14} />
                                                <span>Ver contratos ({busqueda.contratos.length})</span>
                                            </button>
                                            <Can permission="activaciones.quick-contract">
                                                <button
                                                    type="button"
                                                    className="saas-btn-primary"
                                                    disabled={!busqueda.cups.CodCli}
                                                    title={busqueda.cups.CodCli ? undefined : 'El CUPS no tiene un cliente titular accesible'}
                                                    onClick={() => setMostrarContratoRapido(true)}
                                                >
                                                    <Plus size={14} />
                                                    <span>Contrato rápido</span>
                                                </button>
                                            </Can>
                                        </div>
                                    </div>

                                    <div className="saas-card-body">
                                        <div className="saas-section-box">
                                            <Row className="g-3 align-items-center">
                                                <Col md={5}>
                                                    <div className="saas-kv">
                                                        <div className="saas-kv-label d-flex align-items-center gap-1">
                                                            <Building2 size={13} />
                                                            <span>Titular Actual</span>
                                                        </div>
                                                        <div className="saas-kv-value fw-semibold text-truncate" title={busqueda.cups.RazSocCli ?? 'Sin titular'}>
                                                            {busqueda.cups.RazSocCli ?? <span className="text-muted fst-italic">Sin titular registrado</span>}
                                                        </div>
                                                    </div>
                                                </Col>

                                                <Col md={3}>
                                                    <div className="saas-kv">
                                                        <div className="saas-kv-label">CIF / NIF</div>
                                                        <div className="saas-kv-value">
                                                            {busqueda.cups.NumCifCli ? (
                                                                <span className="saas-cif-badge">{busqueda.cups.NumCifCli}</span>
                                                            ) : (
                                                                <span className="text-muted">—</span>
                                                            )}
                                                        </div>
                                                    </div>
                                                </Col>

                                                <Col md={4}>
                                                    <div className="saas-kv">
                                                        <div className="saas-kv-label d-flex align-items-center gap-1">
                                                            <MapPin size={13} />
                                                            <span>Dirección de Suministro</span>
                                                        </div>
                                                        <div className="saas-kv-value text-truncate small text-secondary" title={busqueda.cups.direccion ?? '—'}>
                                                            {busqueda.cups.direccion ?? '—'}
                                                        </div>
                                                    </div>
                                                </Col>
                                            </Row>
                                        </div>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    )}

                    {/* Formulario de Contrato Seleccionado */}
                    {busqueda && seleccionado && (
                        <Row className="justify-content-center">
                            <Col lg={10} xl={9}>
                                <FormularioContrato
                                    cups={busqueda.cups}
                                    contrato={seleccionado}
                                    comercializadoras={comercializadoras}
                                    productos={productos}
                                    anexos={anexos}
                                    tiposPrecio={tiposPrecio}
                                    tarifasElectricas={tarifasElectricas}
                                    tarifasGas={tarifasGas}
                                    guardando={guardando}
                                    onGuardar={guardar}
                                    onCerrar={() => setSeleccionadoId(null)}
                                />
                            </Col>
                        </Row>
                    )}
                </Container>
            </div>

            {/* Modal de Listado de Contratos */}
            <ListadoContratosModal
                show={mostrarListado}
                busqueda={busqueda}
                sincronizando={sincronizando}
                onHide={() => setMostrarListado(false)}
                onSeleccionar={seleccionar}
                onActualizarFechas={sincronizarFechas}
            />

            {/* Modal de Contrato Rápido */}
            {busqueda && (
                <ContratoRapidoModal
                    show={mostrarContratoRapido}
                    cups={busqueda.cups}
                    comercializadoraBusqueda={null}
                    comercializadoras={comercializadoras}
                    productos={productos}
                    anexos={anexos}
                    tiposPrecio={tiposPrecio}
                    tarifasElectricas={tarifasElectricas}
                    tarifasGas={tarifasGas}
                    guardando={guardando}
                    onHide={() => setMostrarContratoRapido(false)}
                    onGenerar={contratoRapido}
                />
            )}
        </React.Fragment>
    );
};

ActivacionesIndex.layout = (page: React.ReactNode) => <Layout children={page} />;

export default ActivacionesIndex;