import React from 'react';
import type { MwfrsSurfaceResult } from '../../../utils/mwfrsLogic';

interface PressureTableProps {
    data: MwfrsSurfaceResult[];
    title: string;
    description?: string;
}

export const PressureSummaryTable: React.FC<PressureTableProps> = ({ data, title, description }) => {
    return (
        <div style={{ marginBottom: '20px' }}>
            <div style={{ fontWeight: 'bold', borderBottom: '2px solid #000', marginBottom: '2px', textAlign: 'center', background: '#e0f7fa', padding: '4px' }}>
                {title}
            </div>
            {description && <div style={{ fontSize: '0.8em', textAlign: 'center', marginBottom: '4px' }}>{description}</div>}

            <table className="analysis-table" style={{ width: '100%', fontSize: '0.9em' }}>
                <thead>
                    <tr style={{ background: '#f0f0f0' }}>
                        <th style={{ textAlign: 'left' }}>Surface</th>
                        {/* <th style={{ textAlign: 'center' }}>Dist.*</th> Not strictly a column header in screenshot, part of row */}
                        <th style={{ textAlign: 'center', width: '60px' }}>Cp</th>
                        <th style={{ textAlign: 'center', width: '80px' }}>qhGCp</th>
                        <th style={{ textAlign: 'center', width: '80px' }}>w/+qiGCpi</th>
                        <th style={{ textAlign: 'center', width: '80px' }}>w/-qiGCpi</th>
                    </tr>
                </thead>
                <tbody>
                    {data.map((row, idx) => (
                        <tr key={idx} style={{ background: idx % 2 === 0 ? '#fff' : '#f9f9f9' }}>
                            <td style={{ textAlign: 'left' }}>
                                {row.surface}
                                {row.dist && <span style={{ marginLeft: '10px', fontSize: '0.85em', color: '#555' }}>{row.dist}</span>}
                            </td>
                            <td style={{ textAlign: 'center' }}>{row.cp === 0 && row.dist === '**' ? '**' : row.cp.toFixed(2)}</td>
                            <td style={{ textAlign: 'center' }}>{row.q_GCp !== 0 ? row.q_GCp.toFixed(1) : ''}</td>
                            <td style={{ textAlign: 'center' }}>{row.total_pos !== 0 ? row.total_pos.toFixed(1) : ''}</td>
                            <td style={{ textAlign: 'center' }}>{row.total_neg !== 0 ? row.total_neg.toFixed(1) : ''}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};