import { useState } from 'react';
import steelShapes from '../data/steelShapes.json';

interface SteelDatabaseModalProps {
    isOpen: boolean;
    onClose: () => void;
    onSelect: (shape: SteelShape) => void;
    title?: string;
}

export interface SteelShape {
    designation: string;
    d: number;
    tw: number;
    bf: number;
    tf: number;
    type: string;
}

export const SteelDatabaseModal = ({ isOpen, onClose, onSelect, title = "Select Steel Shape" }: SteelDatabaseModalProps) => {
    const [searchTerm, setSearchTerm] = useState('');
    const shapes = steelShapes['W-Shapes'] as SteelShape[];

    const filteredShapes = shapes.filter(shape =>
        shape.designation.toLowerCase().includes(searchTerm.toLowerCase())
    );

    if (!isOpen) return null;

    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <div className="modal-header">
                    <h2>{title}</h2>
                    <button className="modal-close" onClick={onClose}>×</button>
                </div>

                <div className="modal-body">
                    <input
                        type="text"
                        placeholder="Search shapes (e.g., W14, W12X26)..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        className="search-input"
                        autoFocus
                    />

                    <div className="shapes-table-container">
                        <table className="shapes-table">
                            <thead>
                                <tr>
                                    <th>Designation</th>
                                    <th>d (in)</th>
                                    <th>tw (in)</th>
                                    <th>bf (in)</th>
                                    <th>tf (in)</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {filteredShapes.map((shape) => (
                                    <tr key={shape.designation}>
                                        <td><strong>{shape.designation}</strong></td>
                                        <td>{shape.d.toFixed(2)}</td>
                                        <td>{shape.tw.toFixed(3)}</td>
                                        <td>{shape.bf.toFixed(3)}</td>
                                        <td>{shape.tf.toFixed(3)}</td>
                                        <td>
                                            <button
                                                className="select-btn"
                                                onClick={() => {
                                                    onSelect(shape);
                                                    onClose();
                                                }}
                                            >
                                                Select
                                            </button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
};