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

interface SummaryCardProps {
    geometry: BuildingGeometry;
    parameters: WindParameters;
}

export const SummaryCard: React.FC<SummaryCardProps> = ({ geometry, parameters }) => {
    // Calculate derived values
    const h = (geometry.hr + geometry.he) / 2; // Mean roof height
    const a = Math.min(0.1 * Math.min(geometry.B, geometry.L), 0.4 * geometry.he); // End zone

    return (
        <aside className="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col">
            <header className="px-4 py-3 border-b bg-slate-50">
                <h2 className="text-sm font-semibold tracking-wide text-slate-800 uppercase">
                    Summary
                </h2>
            </header>

            <div className="p-4 space-y-6 text-sm">
                {/* Geometric Properties */}
                <div>
                    <h3 className="text-xs font-semibold tracking-wide text-slate-500 uppercase mb-2 pb-1 border-b">
                        Geometric Properties
                    </h3>
                    <dl className="space-y-1.5">
                        <div className="flex justify-between py-1">
                            <dt className="text-slate-600">Width (B)</dt>
                            <dd className="font-semibold text-slate-900">{geometry.B.toFixed(1)} ft</dd>
                        </div>
                        <div className="flex justify-between py-1 bg-slate-50 px-2 -mx-2 rounded">
                            <dt className="text-slate-600">Length (L)</dt>
                            <dd className="font-semibold text-slate-900">{geometry.L.toFixed(1)} ft</dd>
                        </div>
                        <div className="flex justify-between py-1">
                            <dt className="text-slate-600">Ridge Height (hr)</dt>
                            <dd className="font-semibold text-slate-900">{geometry.hr.toFixed(1)} ft</dd>
                        </div>
                        <div className="flex justify-between py-1 bg-slate-50 px-2 -mx-2 rounded">
                            <dt className="text-slate-600">Eave Height (he)</dt>
                            <dd className="font-semibold text-slate-900">{geometry.he.toFixed(1)} ft</dd>
                        </div>
                        <div className="flex justify-between py-1">
                            <dt className="text-slate-600">Roof Type</dt>
                            <dd className="font-semibold text-slate-900">{geometry.roofType}</dd>
                        </div>
                        <div className="flex justify-between py-1 bg-slate-50 px-2 -mx-2 rounded">
                            <dt className="text-slate-600">Mean Roof Height (h)</dt>
                            <dd className="font-semibold text-indigo-600">{h.toFixed(2)} ft</dd>
                        </div>
                    </dl>
                </div>

                {/* Wind Parameters */}
                <div>
                    <h3 className="text-xs font-semibold tracking-wide text-slate-500 uppercase mb-2 pb-1 border-b">
                        Wind Parameters
                    </h3>
                    <dl className="space-y-1.5">
                        <div className="flex justify-between py-1">
                            <dt className="text-slate-600">Basic Wind Speed (V)</dt>
                            <dd className="font-semibold text-slate-900">{parameters.V.toFixed(1)} mph</dd>
                        </div>
                        <div className="flex justify-between py-1 bg-slate-50 px-2 -mx-2 rounded">
                            <dt className="text-slate-600">Risk Category</dt>
                            <dd className="font-semibold text-slate-900">{parameters.riskCategory}</dd>
                        </div>
                        <div className="flex justify-between py-1">
                            <dt className="text-slate-600">Exposure</dt>
                            <dd className="font-semibold text-slate-900">{parameters.exposureCategory}</dd>
                        </div>
                        <div className="flex justify-between py-1 bg-slate-50 px-2 -mx-2 rounded">
                            <dt className="text-slate-600">Enclosure</dt>
                            <dd className="font-semibold text-slate-900">{parameters.enclosure}</dd>
                        </div>
                        <div className="flex justify-between py-1">
                            <dt className="text-slate-600">Kzt</dt>
                            <dd className="font-semibold text-slate-900">{parameters.Kzt.toFixed(2)}</dd>
                        </div>
                        <div className="flex justify-between py-1 bg-slate-50 px-2 -mx-2 rounded">
                            <dt className="text-slate-600">Ke</dt>
                            <dd className="font-semibold text-slate-900">{parameters.Ke.toFixed(2)}</dd>
                        </div>
                    </dl>
                </div>

                {/* Calculated Values */}
                <div>
                    <h3 className="text-xs font-semibold tracking-wide text-slate-500 uppercase mb-2 pb-1 border-b">
                        Calculated Values
                    </h3>
                    <dl className="space-y-1.5">
                        <div className="flex justify-between py-1">
                            <dt className="text-slate-600">End Zone (a)</dt>
                            <dd className="font-semibold text-indigo-600">{a.toFixed(2)} ft</dd>
                        </div>
                        <div className="flex justify-between py-1 bg-indigo-50 px-2 -mx-2 rounded border-l-2 border-indigo-500">
                            <dt className="text-slate-600">Velocity Pressure (qh)</dt>
                            <dd className="font-bold text-indigo-700">23.1 psf</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </aside>
    );
};
