/**
 * Task CAD-9 – Stuecklisten-Dialog fuer Traversen-Systeme.
 *
 * Zeigt die gruppierte Stueckliste (Traversen + Eck-Traversen)
 * als Tabelle mit Summenzeile; CSV-Download als Datei.
 */
import React, { useMemo } from 'react';
import { buildBOM, exportBOMCsv } from '../services/bomService';

interface BOMDialogProps {
  elements: import('../types/cad.types').CADElement[];
  onClose: () => void;
}

const BOMDialog: React.FC<BOMDialogProps> = ({ elements, onClose }) => {
  const bom = useMemo(() => buildBOM(elements), [elements]);

  const handleDownload = () => {
    const csv = exportBOMCsv(bom);
    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `stueckliste-traversen-${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="bom-dialog-overlay" onClick={onClose}>
      <div className="bom-dialog" onClick={(e) => e.stopPropagation()}>
        <div className="bom-dialog-header">
          <h3>Stückliste – Traversen</h3>
          <button className="bom-close" onClick={onClose} title="Schließen">✕
          </button>
        </div>
        {bom.rows.length === 0 ? (
          <div className="bom-empty">
            Keine Traversen oder Eck-Traversen in der Zeichnung gefunden.
            <br />
            Platziere zuerst Traversen mit dem Traverse- oder Eck-Traverse-Werkzeug.
          </div>
        ) : (
          <>
            <table className="bom-table">
              <thead>
                <tr>
                  <th>Pos</th>
                  <th>Typ</th>
                  <th>Länge (cm)</th>
                  <th>Breite (cm)</th>
                  <th>Anzahl</th>
                  <th>Gesamt</th>
                </tr>
              </thead>
              <tbody>
                {bom.rows.map((r) => (
                  <tr key={`${r.pos}-${r.label}`}>
                    <td>{r.pos}</td>
                    <td>{r.type}</td>
                    <td>{r.length}</td>
                    <td>{r.width}</td>
                    <td>{r.count}</td>
                    <td>{(r.totalCm / 100).toFixed(2)} m</td>
                  </tr>
                ))}
                <tr className="bom-sum-row">
                  <td colSpan={5}>
                    <strong>SUMME</strong>
                  </td>
                  <td>
                    <strong>{bom.totalLengthM.toFixed(2)} m</strong>
                  </td>
                </tr>
              </tbody>
            </table>
            <div className="bom-dialog-actions">
              <button className="bom-btn-primary" onClick={handleDownload}>
                CSV herunterladen
              </button>
              <button className="bom-btn-secondary" onClick={onClose}>
                Schließen
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default BOMDialog;