import React from 'react';
import { Row, Col, Table } from 'react-bootstrap';
import {
    SipsResponse,
    ConsumoLuzRow,
    ConsumoGasRow,
    isLuzResponse,
    isGasResponse,
    isElectricityTipo,
    formatSipsNumber,
    consumoTotalLuz,
    consumoTotalGas,
    toNumber,
} from '../../types';

interface Props {
    result: SipsResponse | null;
    tipoServicio: string;
}

export const SipsResumenLecturas: React.FC<{ result: SipsResponse }> = ({ result }) => {
    if (isLuzResponse(result)) {
        const { lecturas } = result;
        return (
            <Row className="g-3">
                <Col md={3}>
                    <div className="border rounded p-3 bg-white h-100">
                        <small className="text-muted d-block">Consumo anual total</small>
                        <strong className="fs-5">{formatSipsNumber(lecturas.LastTotalYearkWh)} kWh</strong>
                    </div>
                </Col>
                {[1, 2, 3, 4, 5, 6].map((p) => {
                    const value = lecturas[`LastTotalYearkWh_p${p}` as keyof typeof lecturas];
                    if (toNumber(value as number) === 0 && p > 3) return null;
                    return (
                        <Col md={3} key={p}>
                            <div className="border rounded p-3 bg-white h-100">
                                <small className="text-muted d-block">Periodo P{p}</small>
                                <strong>{formatSipsNumber(value as number)} kWh</strong>
                            </div>
                        </Col>
                    );
                })}
            </Row>
        );
    }

    const { lecturas } = result;
    return (
        <Row className="g-3">
            <Col md={3}>
                <div className="border rounded p-3 bg-white h-100">
                    <small className="text-muted d-block">Consumo anual total</small>
                    <strong className="fs-5">{formatSipsNumber(lecturas.kWhAnual)} kWh</strong>
                </div>
            </Col>
            <Col md={3}>
                <div className="border rounded p-3 bg-white h-100">
                    <small className="text-muted d-block">Consumo P1</small>
                    <strong>{formatSipsNumber(lecturas.kWhAnual_p1)} kWh</strong>
                </div>
            </Col>
            <Col md={3}>
                <div className="border rounded p-3 bg-white h-100">
                    <small className="text-muted d-block">Consumo P2</small>
                    <strong>{formatSipsNumber(lecturas.kWhAnual_p2)} kWh</strong>
                </div>
            </Col>
            <Col md={3}>
                <div className="border rounded p-3 bg-white h-100">
                    <small className="text-muted d-block">Caudal máx. diario</small>
                    <strong>{formatSipsNumber(lecturas.Caudal_Max_Diario_Wh)} kWh/d</strong>
                </div>
            </Col>
            <Col md={3}>
                <div className="border rounded p-3 bg-white h-100">
                    <small className="text-muted d-block">Caudal máx. horario</small>
                    <strong>{formatSipsNumber(lecturas.Caudal_Max_Horario_Wh)} kWh/h</strong>
                </div>
            </Col>
        </Row>
    );
};

export const SipsTablaConsumo: React.FC<Props> = ({ result, tipoServicio }) => {
    const isLuz = result ? isLuzResponse(result) : isElectricityTipo(tipoServicio);
    const registrosLuz = result && isLuzResponse(result) ? result.selectFinal : [];
    const registrosGas = result && isGasResponse(result) ? result.selectFinal : [];

    if (!result) {
        return (
            <div className="table-responsive mt-4">
                <Table bordered className="align-middle mb-0">
                    <thead className="table-light">
                        <tr>
                            <th>Fecha Inicio</th>
                            <th>Fecha Fin</th>
                            <th>Consumo Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colSpan={3} className="text-center py-4 text-muted">
                                Ingrese un CUPS y consulte para ver el historial
                            </td>
                        </tr>
                    </tbody>
                </Table>
            </div>
        );
    }

    if (isLuz) {
        return (
            <div className="table-responsive mt-4">
                <Table bordered striped hover className="align-middle mb-0">
                    <thead className="table-light">
                        <tr>
                            <th>Fecha Inicio</th>
                            <th>Fecha Fin</th>
                            <th>Tarifa</th>
                            <th>P1</th>
                            <th>P2</th>
                            <th>P3</th>
                            <th>P4</th>
                            <th>P5</th>
                            <th>P6</th>
                            <th>Consumo Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {registrosLuz.length === 0 ? (
                            <tr>
                                <td colSpan={10} className="text-center py-4 text-muted">
                                    No hay registros de consumo para este CUPS.
                                </td>
                            </tr>
                        ) : (
                            (registrosLuz as ConsumoLuzRow[]).map((row) => (
                                <tr key={row.id}>
                                    <td>{row.FLectAntM1}</td>
                                    <td>{row.FLectM1}</td>
                                    <td>{row.Tarifa || '-'}</td>
                                    <td>{formatSipsNumber(row.CActP1M1)}</td>
                                    <td>{formatSipsNumber(row.CActP2M1)}</td>
                                    <td>{formatSipsNumber(row.CActP3M1)}</td>
                                    <td>{formatSipsNumber(row.CActP4M1)}</td>
                                    <td>{formatSipsNumber(row.CActP5M1)}</td>
                                    <td>{formatSipsNumber(row.CActP6M1)}</td>
                                    <td className="fw-semibold">{formatSipsNumber(consumoTotalLuz(row))}</td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </Table>
            </div>
        );
    }

    return (
        <div className="table-responsive mt-4">
            <Table bordered striped hover className="align-middle mb-0">
                <thead className="table-light">
                    <tr>
                        <th>Fecha Inicio</th>
                        <th>Fecha Fin</th>
                        <th>Peaje</th>
                        <th>Consumo P1</th>
                        <th>Consumo P2</th>
                        <th>Consumo Total</th>
                        <th>Caudal Medio</th>
                        <th>Caudal Máx. Día</th>
                        <th>% Nocturno</th>
                    </tr>
                </thead>
                <tbody>
                    {registrosGas.length === 0 ? (
                        <tr>
                            <td colSpan={9} className="text-center py-4 text-muted">
                                No hay registros de consumo para este CUPS.
                            </td>
                        </tr>
                    ) : (
                        (registrosGas as ConsumoGasRow[]).map((row) => (
                            <tr key={row.id}>
                                <td>{row.Fec_Ini_Consumo}</td>
                                <td>{row.Fec_Fin_consumo}</td>
                                <td>{row.Cod_Peaje || '-'}</td>
                                <td>{formatSipsNumber(row.Consumo_kWh_P1)}</td>
                                <td>{formatSipsNumber(row.Consumo_kWh_P2)}</td>
                                <td className="fw-semibold">{formatSipsNumber(consumoTotalGas(row))}</td>
                                <td>{formatSipsNumber(row.Caudal_Medio_kWhd)}</td>
                                <td>{formatSipsNumber(row.Caudal_Max_Dia_kWhd)}</td>
                                <td>{formatSipsNumber(row.Porcentaje_Consumo_Nocturno)}</td>
                            </tr>
                        ))
                    )}
                </tbody>
            </Table>
        </div>
    );
};