import { useState } from 'react';
import { useConnectionStore } from '../../store/connectionStore';
import type { SupportType } from '../../types/connection';
import { SteelDatabaseModal, type SteelShape } from '../SteelDatabaseModal';

export const SupportInput = () => {
    const { support, setSupport, materials, setMaterials } = useConnectionStore();
    const [isModalOpen, setIsModalOpen] = useState(false);

    const supportTypes: { value: SupportType; label: string }[] = [
        { value: 'column-flange', label: 'Column flange' },
        { value: 'hss-column', label: 'HSS Column' },
        { value: 'column-web', label: 'Column web' },
        { value: 'hss-beam', label: 'HSS Beam' },
        { value: 'beam-web', label: 'Beam web' },
    ];

    const handleShapeSelect = (shape: SteelShape) => {
        setSupport({
            designation: shape.designation,
            d: shape.d,
            tw: shape.tw,
            tf: shape.tf,
            bf: shape.bf,
        });
    };

    return (
        <>
            <div className="card">
                <div className="card-header">Support Type</div>

                <div className="radio-group" style={{ marginBottom: '16px' }}>
                    {supportTypes.map(({ value, label }) => (
                        <label key={value} className="radio-option">
                            <input
                                type="radio"
                                name="support-type"
                                checked={support.type === value}
                                onChange={() => setSupport({ type: value })}
                            />
                            {label}
                        </label>
                    ))}
                </div>

                <div className="input-group">
                    <input
                        type="text"
                        value={support.designation}
                        onChange={(e) => setSupport({ designation: e.target.value })}
                        className="input-field-wide"
                        style={{ maxWidth: '150px' }}
                    />
                    <button
                        className="steel-database-btn"
                        onClick={() => setIsModalOpen(true)}
                    >
                        Steel Database
                    </button>
                </div>

                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }}>
                    <input
                        type="checkbox"
                        checked={support.similarConnectionOtherSide}
                        onChange={(e) => setSupport({ similarConnectionOtherSide: e.target.checked })}
                    />
                    <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
                        Similar connection at the other side of support web
                    </span>
                </label>
                <div style={{ fontSize: '11px', color: 'var(--text-secondary)', marginLeft: '20px', marginTop: '-12px', marginBottom: '16px' }}>
                    (If checked, the support will have twice the load)
                </div>

                <div style={{ marginTop: '16px' }}>
                    <div className="input-group">
                        <span className="input-label">Yield Strength Fy</span>
                        <input
                            type="number"
                            value={materials.support.fy}
                            onChange={(e) => setMaterials({ support: { ...materials.support, fy: Number(e.target.value) } })}
                            className="input-field"
                        />
                        <span className="input-unit">ksi</span>
                    </div>

                    <div className="input-group">
                        <span className="input-label">Tensile Strength Fu</span>
                        <input
                            type="number"
                            value={materials.support.fu}
                            onChange={(e) => setMaterials({ support: { ...materials.support, fu: Number(e.target.value) } })}
                            className="input-field"
                        />
                        <span className="input-unit">ksi</span>
                    </div>
                </div>
            </div>

            <SteelDatabaseModal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                onSelect={handleShapeSelect}
                title="Select Support Shape"
            />
        </>
    );
};