import { Eye, EyeOff, Trash2 } from 'lucide-react';

export interface Measurement {
  id: string;
  type: 'distance' | 'angle';
  value: number;
  points: { x: number; y: number; z: number }[];
  visible: boolean;
}

interface MeasurePanelProps {
  measurements: Measurement[];
  totalArea: number;
  volume: number;
  isClosed: boolean;
  onToggleVisibility: (id: string) => void;
  onDeleteMeasurement: (id: string) => void;
}

export function MeasurePanel({
  measurements, totalArea, volume, isClosed,
  onToggleVisibility, onDeleteMeasurement,
}: MeasurePanelProps) {
  return (
    <div style={{
      borderTop: '1px solid #333', padding: 8, fontSize: 11, fontFamily: 'monospace', color: '#ccc',
    }}>
      <div style={{ fontWeight: 'bold', marginBottom: 4 }}>Measurements</div>

      {measurements.map((m) => (
        <div
          key={m.id}
          data-testid="measurement-item"
          style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }}
        >
          <button
            onClick={() => onToggleVisibility(m.id)}
            style={{ background: 'none', border: 'none', color: '#ccc', cursor: 'pointer', padding: 0 }}
          >
            {m.visible ? <Eye size={11} /> : <EyeOff size={11} />}
          </button>
          <span style={{ flex: 1 }}>
            {m.type === 'distance' ? '📏' : '📐'}{' '}
            {m.type === 'distance' ? m.value.toFixed(3) : `${m.value.toFixed(1)}°`}
          </span>
          <button
            onClick={() => onDeleteMeasurement(m.id)}
            style={{ background: 'none', border: 'none', color: '#888', cursor: 'pointer', padding: 0 }}
          >
            <Trash2 size={10} />
          </button>
        </div>
      ))}

      <div style={{ marginTop: 6, borderTop: '1px solid #444', paddingTop: 4, color: '#999' }}>
        <div data-testid="total-area">Area: {totalArea.toFixed(3)}</div>
        <div data-testid="volume">Volume: {volume.toFixed(3)}</div>
        <div data-testid="mesh-closed">{isClosed ? 'Closed mesh' : 'Open mesh'}</div>
      </div>
    </div>
  );
}
