import React from 'react';
import type { BuildingGeometry, WindParameters } from '../types/wind';
import { calculateMeanRoofHeight } from '../lib/geometry';

interface PropertiesPanelProps {
    geometry: BuildingGeometry;
    parameters: WindParameters;
    selectedZone?: { zone: string; pressure: number } | null;
}

export const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ geometry, parameters, selectedZone }) => {
    const h = calculateMeanRoofHeight(geometry);

    return (
        <aside className="w-[320px] bg-slate-800 dark:bg-[#2d2d2d] panel-border-l overflow-y-auto custom-scrollbar">
            <div className="p-4">
                <h2 className="text-lg font-semibold text-slate-200 mb-4">Geometric Properties</h2>

                <div className="space-y-3">
                    <PropertyRow label="Area" value={geometry.B * geometry.L} unit="ft²" />
                    <PropertyRow label="Width (B)" value={geometry.B} unit="ft" />
                    <PropertyRow label="Length (L)" value={geometry.L} unit="ft" />
                    <PropertyRow label="Ridge Height (hr)" value={geometry.hr} unit="ft" />
                    <PropertyRow label="Eave Height (he)" value={geometry.he} unit="ft" />
                    <PropertyRow label="Mean Roof Height (h)" value={h.toFixed(2)} unit="ft" />
                </div>

                <div className="mt-6 pt-6 border-t border-slate-700 dark:border-[#404040]">
                    <h3 className="text-sm font-semibold text-slate-300 mb-3">Wind Parameters</h3>
                    <div className="space-y-3">
                        <PropertyRow label="Basic Wind Speed (V)" value={parameters.V} unit="mph" />
                        <PropertyRow label="Risk Category" value={parameters.riskCategory} />
                        <PropertyRow label="Exposure" value={parameters.exposureCategory} />
                        <PropertyRow label="Enclosure" value={parameters.enclosure} />
                        <PropertyRow label="Kzt" value={parameters.Kzt.toFixed(2)} />
                        <PropertyRow label="Ke" value={parameters.Ke.toFixed(2)} />
                    </div>
                </div>

                {selectedZone && (
                    <div className="mt-6 pt-6 border-t border-slate-700 dark:border-[#404040]">
                        <h3 className="text-sm font-semibold text-slate-300 mb-3">Selected Zone</h3>
                        <div className="space-y-3">
                            <PropertyRow label="Zone" value={selectedZone.zone} highlight />
                            <PropertyRow label="Pressure Coefficient" value={selectedZone.pressure.toFixed(3)} highlight />
                        </div>
                    </div>
                )}

                <div className="mt-6 pt-6 border-t border-slate-700 dark:border-[#404040]">
                    <h3 className="text-sm font-semibold text-slate-300 mb-3">Calculated Values</h3>
                    <div className="space-y-3">
                        <PropertyRow label="Velocity Pressure (qh)" value="31.4" unit="psf" />
                    </div>
                </div>
            </div>
        </aside>
    );
};

interface PropertyRowProps {
    label: string;
    value: string | number;
    unit?: string;
    highlight?: boolean;
}

const PropertyRow: React.FC<PropertyRowProps> = ({ label, value, unit, highlight = false }) => {
    return (
        <div className={`flex justify-between items-center text-sm ${highlight ? 'bg-blue-900/20 -mx-2 px-2 py-1 rounded' : ''}`}>
            <span className="text-slate-400">{label}</span>
            <span className={`font-mono ${highlight ? 'text-blue-400 font-semibold' : 'text-slate-200'}`}>
                {value} {unit && <span className="text-slate-500 text-xs ml-1">{unit}</span>}
            </span>
        </div>
    );
};
