import React from 'react';
import { Col, Row } from 'react-bootstrap';
import {
    FormularioActivacion,
    PERIODOS,
    TarifaElectricaOption,
    TarifaGasOption,
    TIPO_ELECTRICO,
    periodosTarifa,
} from '../types';
import { Gauge, Zap, Flame } from 'lucide-react';

interface Props {
    prefijoId: string;
    tipCups: number;
    form: FormularioActivacion;
    tarifasElectricas: TarifaElectricaOption[];
    tarifasGas: TarifaGasOption[];
    disabled?: boolean;
    onChange: (campo: keyof FormularioActivacion, valor: string) => void;
}

const TarifaPotenciasConsumo: React.FC<Props> = ({
    prefijoId,
    tipCups,
    form,
    tarifasElectricas,
    tarifasGas,
    disabled = false,
    onChange,
}) => {
    const electrico = tipCups === TIPO_ELECTRICO;
    const periodos = electrico ? periodosTarifa(tarifasElectricas, form.CodTar) : 0;

    return (
        <div className="saas-section-box mb-3">
            <div className="d-flex align-items-center gap-2 mb-2 pb-1 border-bottom border-slate-200">
                <span className="text-primary d-flex align-items-center">
                    {electrico ? <Zap size={15} /> : <Flame size={15} />}
                </span>
                <span className="saas-kv-label mb-0 text-slate-700" style={{ letterSpacing: '0.04em' }}>
                    Parámetros Técnicos · {electrico ? 'Electricidad' : 'Gas'}
                </span>
            </div>

            <Row className="g-3">
                <Col md={6}>
                    <div className="saas-form-group mb-0">
                        <label htmlFor={`${prefijoId}-tarifa`} className="saas-form-label">
                            <span>Tarifa de Acceso</span>
                        </label>
                        <select
                            id={`${prefijoId}-tarifa`}
                            className="saas-form-select"
                            value={form.CodTar}
                            disabled={disabled}
                            onChange={(e) => onChange('CodTar', e.target.value)}
                        >
                            <option value="">Seleccione una tarifa</option>
                            {electrico
                                ? tarifasElectricas.map((t) => (
                                      <option key={t.CodTarEle} value={t.CodTarEle}>
                                          {t.NomTarEle}
                                      </option>
                                  ))
                                : tarifasGas.map((t) => (
                                      <option key={t.CodTarGas} value={t.CodTarGas}>
                                          {t.NomTarGas}
                                      </option>
                                  ))}
                        </select>
                    </div>
                </Col>

                <Col md={6}>
                    <div className="saas-form-group mb-0">
                        <label htmlFor={`${prefijoId}-consumo`} className="saas-form-label">
                            <Gauge size={13} />
                            <span>Consumo Anual ({electrico ? 'kWh' : 'kWh gas'})</span>
                        </label>
                        <input
                            id={`${prefijoId}-consumo`}
                            type="text"
                            className="saas-form-control"
                            inputMode="decimal"
                            value={form.ConCup}
                            disabled={disabled}
                            placeholder="0"
                            onChange={(e) => onChange('ConCup', e.target.value)}
                        />
                    </div>
                </Col>

                {electrico && periodos > 0 && (
                    <Col xs={12} className="pt-1">
                        <label className="saas-form-label text-muted mb-1.5" style={{ fontSize: '0.6875rem' }}>
                            POTENCIAS CONTRATADAS POR PERIODO (kW)
                        </label>
                        <div
                            style={{
                                display: 'grid',
                                gridTemplateColumns: `repeat(${Math.min(periodos, 6)}, minmax(0, 1fr))`,
                                gap: '8px',
                            }}
                        >
                            {PERIODOS.filter((p) => p <= periodos).map((p) => {
                                const campo = `PotEleConP${p}` as keyof FormularioActivacion;
                                return (
                                    <div
                                        key={p}
                                        style={{
                                            backgroundColor: '#ffffff',
                                            border: '1px solid #cbd5e1',
                                            borderRadius: '8px',
                                            padding: '4px 8px',
                                            display: 'flex',
                                            flexDirection: 'column',
                                        }}
                                    >
                                        <span
                                            style={{
                                                fontSize: '0.65rem',
                                                fontWeight: 700,
                                                color: '#2563eb',
                                                letterSpacing: '0.04em',
                                            }}
                                        >
                                            P{p}
                                        </span>
                                        <input
                                            id={`${prefijoId}-p${p}`}
                                            type="text"
                                            inputMode="decimal"
                                            value={String(form[campo] ?? '')}
                                            disabled={disabled}
                                            placeholder="0.00"
                                            onChange={(e) => onChange(campo, e.target.value)}
                                            style={{
                                                border: 'none',
                                                outline: 'none',
                                                fontSize: '0.8125rem',
                                                fontWeight: 600,
                                                color: '#0f172a',
                                                padding: '2px 0',
                                                width: '100%',
                                                backgroundColor: 'transparent',
                                            }}
                                        />
                                    </div>
                                );
                            })}
                        </div>
                    </Col>
                )}
            </Row>
        </div>
    );
};

export default TarifaPotenciasConsumo;