import React from 'react';
import { useDesignStore } from '../../store/useDesignStore';
import { Square, Circle } from 'lucide-react';

export const GeometryInput: React.FC = () => {
    const { geometry, setGeometry } = useDesignStore();

    const handlePlateShape = (shape: 'rectangular' | 'circular') => {
        setGeometry({ plateShape: shape });
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        // Handle nested updates manually for now or flatten structure if needed
        // For simplicity, we'll assume flat updates for top-level, but we need to handle nested
        // This is a quick implementation, ideally we use a helper
        if (name.startsWith('support.')) {
            const key = name.split('.')[1];
            setGeometry({ support: { ...geometry.support, [key]: parseFloat(value) || 0 } });
        } else {
            // @ts-ignore
            setGeometry({ [name]: parseFloat(value) || 0 });
        }
    };

    return (
        <div className="card">
            <h3 className="mb-sm">Geometry</h3>

            {/* Plate Type Toggle */}
            <div className="flex-row gap-md mb-md align-center">
                <label>Plate Type</label>
                <div className="flex-row border rounded overflow-hidden">
                    <button
                        className={`p-sm ${geometry.plateShape === 'rectangular' ? 'bg-blue text-white' : 'bg-white'}`}
                        onClick={() => handlePlateShape('rectangular')}
                        style={{ border: 'none', cursor: 'pointer' }}
                    >
                        <Square size={20} />
                    </button>
                    <button
                        className={`p-sm ${geometry.plateShape === 'circular' ? 'bg-blue text-white' : 'bg-white'}`}
                        onClick={() => handlePlateShape('circular')}
                        style={{ border: 'none', cursor: 'pointer' }}
                    >
                        <Circle size={20} />
                    </button>
                </div>
            </div>

            {/* Column Properties */}
            <div className="mb-md">
                <h4 className="text-sm text-gray">Column Properties</h4>
                <div className="flex-row gap-md align-center">
                    <label>Profile</label>
                    <select
                        value={geometry.columnDetails.designation}
                        onChange={(e) => setGeometry({ columnDetails: { ...geometry.columnDetails, designation: e.target.value } })}
                        className="input-field"
                        style={{ width: '120px' }}
                    >
                        <option value="W10x49">W10x49</option>
                        <option value="W12x53">W12x53</option>
                        <option value="HSS10x10x1/2">HSS10x10x1/2</option>
                    </select>
                    {/* TODO: Add Steel Database Modal Trigger */}
                    <button className="btn-sm">Database</button>
                </div>
            </div>

            {/* Dimensions */}
            <div className="flex-col gap-sm">
                {geometry.plateShape === 'rectangular' ? (
                    <>
                        <div className="flex-row gap-md align-center">
                            <label style={{ width: '140px' }}>Plate Width Z</label>
                            <input type="number" name="widthZ" value={geometry.widthZ} onChange={handleChange} className="input-field" />
                            <span>in</span>
                        </div>
                        <div className="flex-row gap-md align-center">
                            <label style={{ width: '140px' }}>Plate Length X</label>
                            <input type="number" name="lengthX" value={geometry.lengthX} onChange={handleChange} className="input-field" />
                            <span>in</span>
                        </div>
                    </>
                ) : (
                    <div className="flex-row gap-md align-center">
                        <label style={{ width: '140px' }}>Plate Diameter</label>
                        <input type="number" name="diameter" value={geometry.diameter} onChange={handleChange} className="input-field" />
                        <span>in</span>
                    </div>
                )}

                <div className="flex-row gap-md align-center">
                    <label style={{ width: '140px' }}>Plate Thickness</label>
                    <input type="number" name="thickness" value={geometry.thickness} onChange={handleChange} className="input-field" />
                    <span>in</span>
                </div>

                <div className="flex-row gap-md align-center">
                    <label style={{ width: '140px' }}>Grout Thickness</label>
                    <input type="number" name="support.groutThickness" value={geometry.support.groutThickness} onChange={handleChange} className="input-field" />
                    <span>in</span>
                </div>
            </div>

            <style>{`
        .bg-blue { background-color: var(--primary-blue); }
        .text-white { color: white; }
        .bg-white { background-color: white; }
        .border { border: 1px solid var(--border-color); }
        .rounded { border-radius: 4px; }
        .overflow-hidden { overflow: hidden; }
        .p-sm { padding: 4px 8px; }
        .text-sm { font-size: var(--font-size-sm); }
        .text-gray { color: #666; }
        .mb-md { margin-bottom: 16px; }
        .btn-sm { padding: 2px 8px; font-size: 12px; }
      `}</style>
        </div>
    );
};