import React, { useState } from 'react';

type DeadLoadItem = {
    category: string;
    description: string;
    multiplier: number;
    psfMax: number;
    psfMin: number;
};

// Mock Data
const ITEM_DB: Record<string, DeadLoadItem[]> = {
    Flooring: [
        { category: 'Flooring', description: 'Carpet & pad', multiplier: 1, psfMax: 1.0, psfMin: 1.0 },
        { category: 'Flooring', description: 'Ceramic tile', multiplier: 1, psfMax: 12.0, psfMin: 12.0 },
    ],
    Topping: [
        { category: 'Topping', description: 'Concrete regular per 1"', multiplier: 1, psfMax: 12.5, psfMin: 12.0 }, // 145pcf / 12 ~ 12
    ],
    Decking: [
        { category: 'Decking', description: 'Metal Floor deck - 2", 20ga', multiplier: 1, psfMax: 2.0, psfMin: 1.5 },
    ],
    Framing: [
        { category: 'Framing', description: 'Steel floor bms/joists & girders', multiplier: 1, psfMax: 8.0, psfMin: 5.0 },
    ],
    Ceiling: [
        { category: 'Ceiling', description: 'Suspended acoustical tile', multiplier: 1, psfMax: 1.8, psfMin: 1.0 },
    ],
    Sprinklers: [
        { category: 'Sprinklers', description: 'Sprinklers', multiplier: 1, psfMax: 2.0, psfMin: 0.0 }, // Wet 3.0? Screenshot uses 2.0
    ],
    'Mech & Elec': [
        { category: 'Mech & Elec', description: 'Mech. & Elec.', multiplier: 1, psfMax: 2.0, psfMin: 0.0 },
    ],
    Misc: [
        { category: 'Misc', description: 'Misc.', multiplier: 1, psfMax: 0.5, psfMin: 0.0 },
    ]
};

const KLL_OPTIONS = [
    { label: 'Interior columns', value: 4 },
    { label: 'Exterior columns', value: 4 },
    { label: 'Corner columns', value: 4 },
    { label: 'Interior beams', value: 2 },
    { label: 'Precast T', value: 1 }, // Often 1 or 2 check code
    { label: 'One-way slabs', value: 1 },
];

export const FloorDesignLoadsSheet: React.FC = () => {
    // --- State ---
    const [selectedItems, setSelectedItems] = useState<{ [key: string]: DeadLoadItem | null }>({
        Flooring: ITEM_DB.Flooring[0],
        Topping: ITEM_DB.Topping[0],
        Decking: ITEM_DB.Decking[0],
        Framing: ITEM_DB.Framing[0],
        Ceiling: ITEM_DB.Ceiling[0],
        Sprinklers: ITEM_DB.Sprinklers[0],
        'Mech & Elec': ITEM_DB['Mech & Elec'][0],
        Misc: ITEM_DB.Misc[0],
    });

    const [multipliers] = useState<{ [key: string]: number }>({
        Topping: 3.5, // 3.5 inches?
    });

    const [overrideDL, setOverrideDL] = useState({ enabled: true, value: 80.0, valueMin: 65.0 });
    const [usePartitions, setUsePartitions] = useState(true);
    const [liveLoadUnreduced, setLiveLoadUnreduced] = useState(50.0);

    // Reduction State
    const [reduction1, setReduction1] = useState({ kll: 2, at: 300 });
    const [reduction2, setReduction2] = useState({ kll: 4, at: 500 });

    // --- Calculations ---

    // 1. Dead Load
    let dlMax = 0;
    let dlMin = 0;
    const rows = Object.keys(ITEM_DB);
    rows.forEach(key => {
        const item = selectedItems[key];
        const mult = multipliers[key] || 1;
        if (item) {
            dlMax += item.psfMax * mult;
            dlMin += item.psfMin * mult;
        }
    });

    const finalDL = overrideDL.enabled ? overrideDL.value : dlMax;
    // const finalDL_Min = overrideDL.enabled ? overrideDL.valueMin : dlMin;

    // 2. Live Load
    const partitions = usePartitions ? 15.0 : 0.0;
    const totalLL = liveLoadUnreduced + partitions;
    const totalLoad = finalDL + totalLL;

    // 3. Live Load Reduction (Standard)
    // L = Lo(0.25 + 15 / sqrt(Kll * At))
    const calcReduced = (Lo: number, Kll: number, At: number, limitFactor: number) => {
        // Limits:
        // Not allowed if (Kll * At) < 400? ASCE 7-10 4.7.2: KllAt >= 400 for reduction.
        // If Kll*At < 400, no reduction allowed (Reduction Factor = 1.0) generally? usually checked.

        if (Kll * At < 400) return Lo;

        const multiplier = 0.25 + 15 / Math.sqrt(Kll * At);
        let L = Lo * multiplier;

        // Limits
        const minL = limitFactor * Lo;

        return Math.max(L, minL);
    };

    const reduced1 = calcReduced(liveLoadUnreduced, reduction1.kll, reduction1.at, 0.5); // 1 floor
    const reduced2 = calcReduced(liveLoadUnreduced, reduction2.kll, reduction2.at, 0.4); // 2+ floors

    // 4. IBC Alternate
    // R = 0.08(A - 150)
    // R <= 40% (1 floor), R <= 60% (>=2 floors).
    // R <= 23.1(1 + D/Lo)

    const calcIBC = (Lo: number, At: number, DL: number, supportDescription: '1_floor' | '2_plus_floors') => {
        const R_area = 0.08 * (At - 150);
        const R_structure = 23.1 * (1 + DL / Lo);

        let maxR = 0;
        if (supportDescription === '1_floor') maxR = 40;
        else maxR = 60;

        // R is smallest of these
        const R = Math.max(0, Math.min(R_area, R_structure, maxR));

        const L = Lo * (1 - R / 100);
        return { R, L };
    };

    // For IBC alternate, usually we check Tributary Area > 150.
    // Screenshot calculation for R=23.1(1+D/L) uses what DL?
    // "Actual DL" is 61.1, Override is 80.0.
    // R = 23.1 * (1 + 80 / 50) = 23.1 * (1 + 1.6) = 23.1 * 2.6 = 60.06 -> 60.1%. Matches screenshot.

    const ibc1 = calcIBC(liveLoadUnreduced, reduction1.at, finalDL, '1_floor');
    const ibc2 = calcIBC(liveLoadUnreduced, reduction2.at, finalDL, '2_plus_floors');

    const handleItemChange = (key: string, e: React.ChangeEvent<HTMLSelectElement>) => {
        const selectedDescription = e.target.value;
        const selectedItem = ITEM_DB[key].find(item => item.description === selectedDescription);
        if (selectedItem) {
            setSelectedItems(prev => ({ ...prev, [key]: selectedItem }));
        }
    };

    return (
        <div className="sheet-content fade-in" style={{ padding: '20px', background: '#e0f7fa', minHeight: '100vh', fontSize: '0.9em' }}>
            <h2 style={{ textAlign: 'center', fontWeight: 'bold' }}>Floor Design Loads</h2>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '20px' }}>
                {/* Left Column */}
                <div>
                    <table style={{ width: '100%', borderCollapse: 'collapse', background: 'white', border: '1px solid #ccc' }}>
                        <thead style={{ background: '#b2dfdb' }}>
                            <tr>
                                <th style={{ textAlign: 'left', padding: '5px' }}>Items</th>
                                <th style={{ textAlign: 'left', padding: '5px' }}>Description</th>
                                <th style={{ textAlign: 'center', padding: '5px' }}>Multiple</th>
                                <th style={{ textAlign: 'center', padding: '5px' }}>psf (max)</th>
                                <th style={{ textAlign: 'center', padding: '5px' }}>psf (min)</th>
                            </tr>
                        </thead>
                        <tbody>
                            {rows.map(key => {
                                const item = selectedItems[key];
                                return (
                                    <tr key={key} style={{ borderBottom: '1px solid #eee' }}>
                                        <td style={{ padding: '5px' }}>
                                            <select style={{ width: '100%' }} value={item?.description} onChange={(e) => handleItemChange(key, e)}>
                                                {ITEM_DB[key].map((dbItem, i) => <option key={i} value={dbItem.description}>{dbItem.description}</option>)}
                                            </select>
                                        </td>
                                        <td style={{ padding: '5px', color: 'red' }}>{item?.description}</td>
                                        <td style={{ padding: '5px', textAlign: 'center' }}>
                                            {multipliers[key] ? <div style={{ color: 'red' }}>x {multipliers[key].toFixed(1)}</div> : ''}
                                        </td>
                                        <td style={{ padding: '5px', textAlign: 'center' }}>
                                            {(item!.psfMax * (multipliers[key] || 1)).toFixed(1)}
                                        </td>
                                        <td style={{ padding: '5px', textAlign: 'center' }}>
                                            {(item!.psfMin * (multipliers[key] || 1)).toFixed(1)}
                                        </td>
                                    </tr>
                                )
                            })}
                            <tr style={{ borderTop: '2px solid black' }}>
                                <td colSpan={3} style={{ textAlign: 'right', padding: '5px' }}>Actual Dead Load</td>
                                <td style={{ textAlign: 'center', fontWeight: 'bold' }}>{dlMax.toFixed(1)}</td>
                                <td style={{ textAlign: 'center', fontWeight: 'bold' }}>{dlMin.toFixed(1)}</td>
                            </tr>
                            <tr>
                                <td colSpan={3} style={{ textAlign: 'right', padding: '5px' }}>
                                    <label style={{ marginRight: '10px' }}>Use this DL instead</label>
                                    <input type="radio" checked={overrideDL.enabled} onChange={() => setOverrideDL({ ...overrideDL, enabled: true })} />
                                </td>
                                <td style={{ textAlign: 'center' }}>
                                    <input type="number" value={overrideDL.value} onChange={e => setOverrideDL({ ...overrideDL, value: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red', fontWeight: 'bold' }} />
                                </td>
                                <td style={{ textAlign: 'center' }}>
                                    <input type="number" value={overrideDL.valueMin} onChange={e => setOverrideDL({ ...overrideDL, valueMin: parseFloat(e.target.value) })} style={{ width: '60px', color: 'red', fontWeight: 'bold' }} />
                                </td>
                            </tr>
                            <tr>
                                <td colSpan={3} style={{ textAlign: 'right', padding: '5px' }}>
                                    <select value={usePartitions ? 'Partitions' : 'No Partitions'} onChange={e => setUsePartitions(e.target.value === 'Partitions')}>
                                        <option value="Partitions">Partitions</option>
                                        <option value="No Partitions">No Partitions</option>
                                    </select>
                                </td>
                                <td style={{ textAlign: 'center', background: '#d0f0c0' }}>{partitions.toFixed(1)}</td>
                                <td style={{ textAlign: 'center', background: '#d0f0c0' }}>0.0</td>
                            </tr>
                            <tr>
                                <td colSpan={3} style={{ textAlign: 'right', padding: '5px' }}>Live Load</td>
                                <td style={{ textAlign: 'center', background: '#d0f0c0' }}>
                                    <input type="number" value={liveLoadUnreduced} onChange={e => setLiveLoadUnreduced(parseFloat(e.target.value))} style={{ width: '50px', background: 'transparent', border: 'none', textAlign: 'center', textDecoration: 'underline' }} />
                                </td>
                                <td style={{ textAlign: 'center', background: '#d0f0c0' }}>0.0</td>
                            </tr>
                            <tr style={{ borderTop: '1px solid black' }}>
                                <td colSpan={3} style={{ textAlign: 'right', padding: '5px' }}>Total Live Load</td>
                                <td style={{ textAlign: 'center' }}>{totalLL.toFixed(1)}</td>
                                <td style={{ textAlign: 'center' }}>0.0</td>
                            </tr>
                            <tr style={{ fontWeight: 'bold' }}>
                                <td colSpan={3} style={{ textAlign: 'right', padding: '5px' }}>Total Load</td>
                                <td style={{ textAlign: 'center' }}>{totalLoad.toFixed(1)}</td>
                                <td style={{ textAlign: 'center' }}>{dlMin.toFixed(1)}</td>
                            </tr>
                        </tbody>
                    </table>

                    {/* Standard Reduction */}
                    <div style={{ marginTop: '20px' }}>
                        <div style={{ fontWeight: 'bold', textDecoration: 'underline' }}>FLOOR LIVE LOAD REDUCTION (not including partitions)</div>
                        <div style={{ fontSize: '0.8em', margin: '5px 0', fontStyle: 'italic', maxWidth: '500px' }}>
                            NOTE: Not allowed for assembly occupancy or LL&gt;100psf or passenger car garages, except may reduce members supporting 2 or more floors &amp; non-assembly 20%.
                        </div>

                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginTop: '10px' }}>
                            <div>L = Lo(0.25+15/&radic;(K<sub>LL</sub>A<sub>T</sub>))</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
                            <div>Unreduced design live load: Lo = {liveLoadUnreduced} psf</div>
                        </div>

                        {/* Member & 1 Floor */}
                        <div style={{ display: 'grid', gridTemplateColumns: '250px 100px 200px', gap: '5px', alignItems: 'center', marginBottom: '10px' }}>
                            <div style={{ textAlign: 'right', fontWeight: 'bold' }}>Floor member & 1 floor cols K<sub>LL</sub> =</div>
                            <div style={{ textAlign: 'right' }}>{reduction1.kll}</div>
                            <select value={reduction1.kll} onChange={e => setReduction1({ ...reduction1, kll: parseInt(e.target.value) })}>
                                {KLL_OPTIONS.map(opt => <option key={opt.label} value={opt.value}>{opt.label}</option>)}
                            </select>

                            <div style={{ textAlign: 'right' }}>Tributary Area A<sub>T</sub> =</div>
                            <input type="number" value={reduction1.at} onChange={e => setReduction1({ ...reduction1, at: parseFloat(e.target.value) })} style={{ width: '80px', color: 'red' }} />
                            <div>sf</div>

                            <div style={{ textAlign: 'right' }}>Reduced live load: L =</div>
                            <div style={{ textAlign: 'right' }}>{reduced1.toFixed(1)} psf</div>
                        </div>

                        {/* Cols 2 or more floors */}
                        <div style={{ display: 'grid', gridTemplateColumns: '250px 100px 200px', gap: '5px', alignItems: 'center' }}>
                            <div style={{ textAlign: 'right', fontWeight: 'bold' }}>Columns (2 or more floors) K<sub>LL</sub> =</div>
                            <div style={{ textAlign: 'right' }}>{reduction2.kll}</div>
                            <select value={reduction2.kll} onChange={e => setReduction2({ ...reduction2, kll: parseInt(e.target.value) })}>
                                {KLL_OPTIONS.map(opt => <option key={opt.label} value={opt.value}>{opt.label}</option>)}
                            </select>

                            <div style={{ textAlign: 'right' }}>Tributary Area A<sub>T</sub> =</div>
                            <input type="number" value={reduction2.at} onChange={e => setReduction2({ ...reduction2, at: parseFloat(e.target.value) })} style={{ width: '80px', color: 'red' }} />
                            <div>sf</div>

                            <div style={{ textAlign: 'right' }}>Reduced live load: L =</div>
                            <div style={{ textAlign: 'right' }}>{reduced2.toFixed(1)} psf</div>
                        </div>
                    </div>
                </div>

                {/* Right Column: IBC Alternate */}
                <div>
                    <div style={{ fontSize: '0.9em', color: 'blue', marginBottom: '10px' }}>
                        Edit default weights
                    </div>

                    <div style={{ marginTop: '250px' }}>
                        <div style={{ fontWeight: 'bold', textDecoration: 'underline' }}>IBC alternate procedure</div>
                        <div style={{ fontSize: '0.9em' }}>Smallest of:</div>

                        <div style={{ fontSize: '0.9em', marginTop: '5px' }}>R = .08%(SF - 150)</div>
                        <div style={{ fontSize: '0.9em' }}>R = 23.1(1+D/L) = <span style={{ float: 'right' }}>{ibc1.R.toFixed(1)}%</span></div>
                        <div style={{ fontSize: '0.9em' }}>R = 40% member supports 1 floor</div>
                        <div style={{ fontSize: '0.9em' }}>R = 60% member supports ≥2 floors</div>

                        <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-between' }}>
                            <span>R =</span>
                            <span>{ibc1.R.toFixed(1)}%</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid black', paddingBottom: '5px' }}>
                            <span>Reduced live load: L =</span>
                            <span>{ibc1.L.toFixed(1)} psf</span>
                        </div>

                        <div style={{ marginTop: '45px', display: 'flex', justifyContent: 'space-between' }}>
                            <span>R =</span>
                            <span>{ibc2.R.toFixed(1)}%</span>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span>Reduced live load: L =</span>
                            <span>{ibc2.L.toFixed(1)} psf</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};