import React, { useState, useEffect } from 'react';
import { Calculator, Droplets, ArrowUpRight, Gauge, AlertTriangle, Scale, Plus, Trash2, Layers, TableProperties, Download, Printer } from 'lucide-react';

const App = () => {
  // --- State Modal Notifikasi ---
  const [showModal, setShowModal] = useState(false);

  // --- Tab State ---
  const [activeTab, setActiveTab] = useState('hydraulic_route'); // 'hydraulic_route' | 'weight'

  // Fungsi pembuat ID unik yang aman
  const generateId = () => typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Date.now() + Math.random();

  // ==========================================
  // TAB 1: KALKULATOR RUTE HIDROLIK (DARI WORD)
  // ==========================================
  const [sourcePressure, setSourcePressure] = useState(11); // bar_g
  const [roughness, setRoughness] = useState(0.045); // Epsilon mm
  const [routingRows, setRoutingRows] = useState([
    { id: 'p1', name: 'P1', diameter: 202.7, length: 7.8, flow: 1000, minorLoss: 0.052 },
    { id: 'p2', name: 'P2', diameter: 202.7, length: 16, flow: 1000, minorLoss: 0.008 },
    { id: 'p3', name: 'P3', diameter: 202.7, length: 20, flow: 1000, minorLoss: 0.008 },
    { id: 'p4', name: 'P4', diameter: 202.7, length: 30, flow: 1000, minorLoss: 0.008 },
    { id: 'p5', name: 'P5', diameter: 202.7, length: 31, flow: 1000, minorLoss: 0.017 },
  ]);

  const addRoutingRow = () => {
    const lastRow = routingRows[routingRows.length - 1];
    setRoutingRows([...routingRows, { 
      id: generateId(), 
      name: `P${routingRows.length + 1}`, 
      diameter: lastRow ? lastRow.diameter : 202.7, 
      length: 10, 
      flow: lastRow ? lastRow.flow : 1000, 
      minorLoss: 0 
    }]);
  };

  const removeRoutingRow = (id) => setRoutingRows(routingRows.filter(row => row.id !== id));
  
  const updateRoutingRow = (id, field, value) => {
    setRoutingRows(routingRows.map(row => row.id === id ? { ...row, [field]: value } : row));
  };

  // Kalkulasi Sekuensial
  let currentEntryPressure = parseFloat(sourcePressure) || 0;
  const computedRoutingRows = routingRows.map((row) => {
    const Q_usgpm = parseFloat(row.flow) || 0;
    const Q_m3s = Q_usgpm * 0.0000630902; // Konversi USGPM ke m³/s
    const massFlow = Q_m3s * 1000; // kg/s (asumsi densitas air 1000 kg/m³)
    
    const D_m = (parseFloat(row.diameter) || 0) / 1000;
    const L = parseFloat(row.length) || 0;
    const minorLoss = parseFloat(row.minorLoss) || 0;
    const eps_m = parseFloat(roughness) / 1000;

    let velocity = 0;
    let frictionLossBar = 0;
    let totalLossBar = 0;
    let exitPressure = currentEntryPressure;

    if (D_m > 0 && Q_m3s > 0) {
      const area = (Math.PI / 4) * Math.pow(D_m, 2);
      velocity = Q_m3s / area;

      // Darcy-Weisbach & Swamee-Jain
      const Re = (velocity * D_m) / 1.004e-6; // Viskositas kinematik air ~20°C
      let f = 0;
      
      if (Re > 0) {
        if (Re < 2300) {
          f = 64 / Re;
        } else {
          const term1 = eps_m / (3.7 * D_m);
          const term2 = 5.74 / Math.pow(Re, 0.9);
          f = 0.25 / Math.pow(Math.log10(term1 + term2), 2);
        }
        
        const g = 9.81;
        const frictionLossM = f * (L / D_m) * (Math.pow(velocity, 2) / (2 * g));
        frictionLossBar = frictionLossM / 10.197; // Konversi meter head ke Bar
      }
    }

    totalLossBar = frictionLossBar + minorLoss;
    exitPressure = currentEntryPressure - totalLossBar;

    const result = {
      ...row,
      massFlow,
      velocity,
      frictionLossBar,
      totalLossBar,
      entryPressure: currentEntryPressure,
      exitPressure
    };

    currentEntryPressure = exitPressure; // Update untuk baris selanjutnya
    return result;
  });


  // ==========================================
  // TAB 2: KALKULATOR BEBAN PIPA (DARI EXCEL)
  // ==========================================
  const pipeSpecs = {
    25: { name: "DN25 (1\")", od: 33.4, t: 3.38 },
    32: { name: "DN32 (1 1/4\")", od: 42.2, t: 3.56 },
    40: { name: "DN40 (1 1/2\")", od: 48.3, t: 3.68 },
    50: { name: "DN50 (2\")", od: 60.3, t: 3.91 },
    65: { name: "DN65 (2 1/2\")", od: 73.0, t: 5.16 },
    80: { name: "DN80 (3\")", od: 88.9, t: 5.49 },
    100: { name: "DN100 (4\")", od: 114.3, t: 6.02 },
    150: { name: "DN150 (6\")", od: 168.3, t: 7.11 }
  };
  
  const [distanceBetweenPipes, setDistanceBetweenPipes] = useState(2.46);
  const [weightRows, setWeightRows] = useState([
    { id: 'w1', dn: 25, length: 8 },
    { id: 'w2', dn: 32, length: 4 }
  ]);

  const addWeightRow = () => setWeightRows([...weightRows, { id: generateId(), dn: 25, length: 1 }]);
  const removeWeightRow = (id) => setWeightRows(weightRows.filter(row => row.id !== id));
  const updateWeightRow = (id, field, value) => setWeightRows(weightRows.map(row => row.id === id ? { ...row, [field]: value } : row));

  const renderedWeightRows = weightRows.map(row => {
    const spec = pipeSpecs[row.dn];
    const id_mm = spec.od - (2 * spec.t);
    const pipeAreaM2 = (Math.PI / 4) * (Math.pow(spec.od / 1000, 2) - Math.pow(id_mm / 1000, 2));
    const pipeWeightM = pipeAreaM2 * 7850;
    const waterAreaM2 = (Math.PI / 4) * Math.pow(id_mm / 1000, 2);
    const waterWeightM = waterAreaM2 * 1000;
    const totalWeightM = pipeWeightM + waterWeightM;
    const totalWeightKg = totalWeightM * (parseFloat(row.length) || 0);
    const weightPerM2SF = (totalWeightM / parseFloat(distanceBetweenPipes || 1)) * 1.2;
    return { ...row, spec, id_mm, pipeWeightM, waterWeightM, totalWeightM, totalWeightKg, weightPerM2SF };
  });

  // Handle PDF Export
  const handlePrint = () => {
    try {
      // Periksa apakah window.print diblokir di iframe
      if (document.queryCommandSupported && !document.queryCommandSupported('print')) {
        setShowModal(true);
      } else {
        window.print();
      }
    } catch (e) {
      // Jika terjadi cross-origin iframe error atau sandbox block
      setShowModal(true);
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans p-4 md:p-8 print:p-0 print:bg-white relative">
      {/* CSS Khusus untuk Mode Cetak / PDF */}
      <style>{`
        @media print {
          body { 
            -webkit-print-color-adjust: exact; 
            print-color-adjust: exact; 
          }
          @page { 
            size: landscape; 
            margin: 10mm;
          }
          /* Hilangkan elemen spesifik saat cetak */
          .print-hidden { display: none !important; }
          /* Bersihkan tampilan input saat cetak */
          input, select {
            border: none !important;
            background: transparent !important;
            padding: 0 !important;
            box-shadow: none !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            color: black !important;
            font-weight: 600;
          }
          /* Hapus panah dropdown di select saat cetak */
          select::-ms-expand { display: none; }
        }
      `}</style>

      {/* MODAL NOTIFIKASI JIKA PRINT DIBLOKIR */}
      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm p-4 transition-opacity print-hidden">
          <div className="bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl">
            <div className="flex items-center gap-3 text-amber-500 mb-4">
              <AlertTriangle className="w-7 h-7" />
              <h3 className="text-xl font-bold text-slate-800">Pemberitahuan Sistem</h3>
            </div>
            <p className="text-slate-600 mb-6 leading-relaxed">
              Fungsi cetak otomatis diblokir oleh lingkungan <i>preview</i> browser ini demi keamanan. <br/><br/>
              Untuk menyimpan sebagai PDF, silakan gunakan tombol pintas (shortcut) berikut di keyboard Anda: <br/><br/>
              <span className="inline-block bg-slate-100 border border-slate-200 rounded-md px-2 py-1 font-mono font-bold text-slate-700">Ctrl + P</span> untuk Windows <br/>
              <span className="inline-block bg-slate-100 border border-slate-200 rounded-md px-2 py-1 font-mono font-bold text-slate-700 mt-2">Cmd ⌘ + P</span> untuk Mac
            </p>
            <div className="flex justify-end">
              <button 
                onClick={() => setShowModal(false)}
                className="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
              >
                Saya Mengerti
              </button>
            </div>
          </div>
        </div>
      )}

      <div className="max-w-7xl mx-auto space-y-6">
        
        {/* Header Section */}
        <header className="bg-slate-900 text-white p-6 rounded-2xl shadow-lg flex items-center justify-between gap-4 print:shadow-none print:rounded-none print:p-4 print:mb-4">
          <div className="flex items-center gap-4">
            <div className="bg-blue-500/20 p-3 rounded-full print:bg-slate-100">
              <Layers className="w-8 h-8 text-blue-400 print:text-slate-800" />
            </div>
            <div>
              <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Engineer Proteksi Kebakaran</h1>
              <p className="text-slate-300 mt-1 text-sm md:text-base print:text-slate-600">Laporan Kalkulasi {activeTab === 'hydraulic_route' ? 'Hidrolik Sekuensial' : 'Beban Pipa Schedule 40'}</p>
            </div>
          </div>

          {/* Tombol Cetak PDF */}
          <button 
            onClick={handlePrint}
            className="print-hidden flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-semibold transition-colors shadow-sm"
          >
            <Printer className="w-5 h-5" /> Download PDF
          </button>
        </header>

        {/* Navigation Tabs - Hidden on Print */}
        <div className="print-hidden flex flex-wrap gap-2 bg-slate-200/50 p-1.5 rounded-xl w-fit">
          <button 
            onClick={() => setActiveTab('hydraulic_route')} 
            className={`px-5 py-2.5 rounded-lg font-semibold flex items-center gap-2 transition-all ${activeTab === 'hydraulic_route' ? 'bg-white text-blue-700 shadow-sm' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-200'}`}
          >
            <TableProperties className="w-5 h-5" /> Rute Hidrolik (Word)
          </button>
          <button 
            onClick={() => setActiveTab('weight')} 
            className={`px-5 py-2.5 rounded-lg font-semibold flex items-center gap-2 transition-all ${activeTab === 'weight' ? 'bg-white text-blue-700 shadow-sm' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-200'}`}
          >
            <Scale className="w-5 h-5" /> Beban Pipa (Excel)
          </button>
        </div>

        {/* ================= TAB 1: KALKULATOR RUTE HIDROLIK ================= */}
        {activeTab === 'hydraulic_route' && (
          <div className="space-y-6 animate-in fade-in duration-300">
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 print:shadow-none print:border-none print:p-0">
              
              <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-6 pb-4 border-b border-slate-100 print:border-slate-800">
                <div className="flex items-center gap-2">
                  <Droplets className="w-6 h-6 text-blue-600 print:text-black" />
                  <h2 className="text-xl font-semibold text-slate-800 print:text-black">Sprinkler Hydraulic Calculation</h2>
                </div>
                
                {/* Global Settings */}
                <div className="flex flex-wrap items-center gap-4 bg-slate-50 p-3 rounded-lg border border-slate-200 print:border-none print:bg-transparent print:p-0">
                  <div className="flex items-center gap-2">
                    <label className="text-sm font-medium text-slate-600 print:text-black">Tekanan Awal (bar_g):</label>
                    <input
                      type="number" step="0.1"
                      value={sourcePressure}
                      onChange={(e) => setSourcePressure(e.target.value)}
                      className="w-24 px-3 py-1.5 bg-white border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 outline-none print:w-auto"
                    />
                  </div>
                  <div className="w-px h-6 bg-slate-300 hidden sm:block print-hidden"></div>
                  <div className="flex items-center gap-2">
                    <label className="text-sm font-medium text-slate-600 print:text-black">Kekasaran/ε (mm):</label>
                    <input
                      type="number" step="0.001"
                      value={roughness}
                      onChange={(e) => setRoughness(e.target.value)}
                      className="w-24 px-3 py-1.5 bg-white border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 outline-none print:w-auto"
                    />
                  </div>
                </div>
              </div>

              {/* Tabel Routing Hidrolik */}
              <div className="overflow-x-auto rounded-xl border border-slate-200 mb-4 shadow-inner print:shadow-none print:border-slate-800 print:rounded-none">
                <table className="w-full text-sm text-left whitespace-nowrap print:text-xs">
                  <thead className="bg-slate-800 text-slate-200 uppercase text-xs tracking-wider print:bg-slate-100 print:text-black">
                    <tr>
                      <th className="print-hidden p-3 font-semibold text-center border-r border-slate-700">Aksi</th>
                      <th className="p-3 font-semibold border-r border-slate-700 print:border-slate-300">Pipe Name</th>
                      <th className="p-3 font-semibold border-r border-slate-700 print:border-slate-300">ID (mm)</th>
                      <th className="p-3 font-semibold border-r border-slate-700 print:border-slate-300">Length (m)</th>
                      <th className="p-3 font-semibold border-r border-slate-700 print:border-slate-300">Vol Flow (USGPM)</th>
                      <th className="p-3 font-semibold text-slate-400 bg-slate-900 border-r border-slate-700 print:bg-white print:text-black print:border-slate-300">Mass Flow (kg/s)</th>
                      <th className="p-3 font-semibold text-slate-400 bg-slate-900 border-r border-slate-700 print:bg-white print:text-black print:border-slate-300">Velocity (m/s)</th>
                      <th className="p-3 font-semibold border-r border-slate-700 print:border-slate-300">dP MinorLoss (bar)</th>
                      <th className="p-3 font-semibold text-slate-400 bg-slate-900 border-r border-slate-700 print:bg-slate-100 print:text-black print:border-slate-300">dP TotalLoss (bar)</th>
                      <th className="p-3 font-semibold text-blue-300 bg-slate-900 border-r border-slate-700 print:bg-slate-100 print:text-black print:border-slate-300">Entry P. (bar_g)</th>
                      <th className="p-3 font-semibold text-emerald-300 bg-slate-900 print:bg-slate-100 print:text-black">Exit P. (bar_g)</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200 print:divide-slate-300">
                    {computedRoutingRows.map((row) => (
                      <tr key={row.id} className="hover:bg-blue-50/50 transition-colors print:hover:bg-transparent">
                        <td className="print-hidden p-2 text-center border-r border-slate-100">
                          <button 
                            onClick={() => removeRoutingRow(row.id)}
                            className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </td>
                        <td className="p-2 border-r border-slate-100 print:border-slate-300">
                          <input type="text" value={row.name} onChange={(e) => updateRoutingRow(row.id, 'name', e.target.value)} className="w-20 px-2 py-1.5 bg-transparent border-b border-dashed border-slate-300 focus:border-blue-500 outline-none print:w-auto" />
                        </td>
                        <td className="p-2 border-r border-slate-100 print:border-slate-300">
                          <input type="number" step="0.1" value={row.diameter} onChange={(e) => updateRoutingRow(row.id, 'diameter', e.target.value)} className="w-20 px-2 py-1.5 bg-white border border-slate-200 rounded focus:ring-1 focus:ring-blue-500 outline-none print:w-auto" />
                        </td>
                        <td className="p-2 border-r border-slate-100 print:border-slate-300">
                          <input type="number" step="0.1" value={row.length} onChange={(e) => updateRoutingRow(row.id, 'length', e.target.value)} className="w-20 px-2 py-1.5 bg-white border border-slate-200 rounded focus:ring-1 focus:ring-blue-500 outline-none print:w-auto" />
                        </td>
                        <td className="p-2 border-r border-slate-100 print:border-slate-300">
                          <input type="number" value={row.flow} onChange={(e) => updateRoutingRow(row.id, 'flow', e.target.value)} className="w-24 px-2 py-1.5 bg-white border border-slate-200 rounded focus:ring-1 focus:ring-blue-500 outline-none text-blue-700 font-medium print:w-auto" />
                        </td>
                        
                        {/* Auto Calculated Fields */}
                        <td className="p-3 bg-slate-50 border-r border-slate-100 print:border-slate-300 print:bg-white font-mono text-sm text-slate-600 print:text-black">
                          {row.massFlow.toFixed(3)}
                        </td>
                        <td className="p-3 bg-slate-50 border-r border-slate-100 print:border-slate-300 print:bg-white font-mono text-sm text-slate-600 print:text-black">
                          {row.velocity.toFixed(3)}
                        </td>

                        <td className="p-2 border-r border-slate-100 print:border-slate-300 bg-amber-50/30 print:bg-white">
                          <input type="number" step="0.001" value={row.minorLoss} onChange={(e) => updateRoutingRow(row.id, 'minorLoss', e.target.value)} className="w-20 px-2 py-1.5 bg-white border border-slate-200 rounded focus:ring-1 focus:ring-blue-500 outline-none print:w-auto" />
                        </td>

                        <td className="p-3 bg-slate-50 border-r border-slate-100 print:border-slate-300 print:bg-slate-50 font-mono text-sm font-semibold text-rose-600 print:text-black">
                          {row.totalLossBar.toFixed(3)}
                        </td>
                        <td className="p-3 bg-slate-100 border-r border-slate-100 print:border-slate-300 print:bg-slate-100 font-mono text-sm font-bold text-blue-700 print:text-black">
                          {row.entryPressure.toFixed(5)}
                        </td>
                        <td className="p-3 bg-slate-100 font-mono text-sm font-bold text-emerald-600 print:bg-slate-100 print:text-black">
                          {row.exitPressure.toFixed(5)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="flex justify-between items-center mt-4">
                <button 
                  onClick={addRoutingRow}
                  className="print-hidden flex items-center gap-2 px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition-colors text-sm font-medium"
                >
                  <Plus className="w-4 h-4" /> Tambah Segmen Pipa
                </button>
                <div className="text-right text-sm text-slate-500 print:text-black">
                  Total Pressure Drop: <span className="font-bold text-rose-600 print:text-black">{(currentEntryPressure ? (parseFloat(sourcePressure) - currentEntryPressure) : 0).toFixed(3)} bar</span>
                </div>
              </div>

            </div>

            <div className="print-hidden bg-blue-50 border border-blue-200 p-4 rounded-xl flex gap-3 text-blue-800 text-sm">
              <AlertTriangle className="w-5 h-5 shrink-0 text-blue-600" />
              <p>
                <strong>Cara Kerja Node-to-Node:</strong> Tabel ini menghitung kehilangan tekanan secara berurutan. <em>Exit Pressure</em> dari baris di atasnya secara otomatis menjadi <em>Entry Pressure</em> untuk baris di bawahnya. <strong>Velocity</strong> dan <strong>Friction Loss</strong> dihitung otomatis secara akurat menggunakan formula Darcy-Weisbach.
              </p>
            </div>
          </div>
        )}

        {/* ================= TAB 2: KALKULATOR BEBAN PIPA ================= */}
        {activeTab === 'weight' && (
          <div className="space-y-6 animate-in fade-in duration-300">
            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 print:shadow-none print:border-none print:p-0">
              
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 pb-4 border-b border-slate-100 print:border-slate-800">
                <div className="flex items-center gap-2">
                  <Scale className="w-6 h-6 text-blue-600 print:text-black" />
                  <h2 className="text-xl font-semibold text-slate-800 print:text-black">Perhitungan Berat Pipa (Schedule 40)</h2>
                </div>
                
                <div className="flex items-center gap-3 bg-slate-50 p-3 rounded-lg border border-slate-200 print:border-none print:bg-transparent print:p-0">
                  <label className="text-sm font-medium text-slate-600 whitespace-nowrap print:text-black">Jarak Antar Pipa (m):</label>
                  <input
                    type="number" step="0.01" min="0.1"
                    value={distanceBetweenPipes}
                    onChange={(e) => setDistanceBetweenPipes(e.target.value)}
                    className="w-24 px-3 py-1.5 bg-white border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 outline-none print:w-auto"
                  />
                </div>
              </div>

              <div className="overflow-x-auto rounded-xl border border-slate-200 mb-4 print:border-slate-800 print:rounded-none">
                <table className="w-full text-sm text-left print:text-xs">
                  <thead className="bg-slate-100 text-slate-600 border-b border-slate-200 uppercase text-xs tracking-wider print:border-slate-800 print:text-black">
                    <tr>
                      <th className="p-4 font-semibold print:p-2 border-r print:border-slate-300">Ukuran (DN)</th>
                      <th className="p-4 font-semibold print:p-2 border-r print:border-slate-300">OD / t / ID (mm)</th>
                      <th className="p-4 font-semibold print:p-2 border-r print:border-slate-300">Berat Pipa + Air (kg/m)</th>
                      <th className="p-4 font-semibold w-32 print:p-2 border-r print:border-slate-300">Panjang (m)</th>
                      <th className="p-4 font-semibold print:p-2 border-r print:border-slate-300">Beban Area + SF 20% (kg/m²)</th>
                      <th className="p-4 font-semibold print:p-2 border-r print:border-slate-300">Total Berat (kg)</th>
                      <th className="print-hidden p-4 font-semibold text-center w-16">Aksi</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 print:divide-slate-300">
                    {renderedWeightRows.map((row) => (
                      <tr key={row.id} className="hover:bg-slate-50 transition-colors print:hover:bg-transparent">
                        <td className="p-4 print:p-2 border-r print:border-slate-300">
                          <select 
                            value={row.dn} 
                            onChange={(e) => updateWeightRow(row.id, 'dn', parseInt(e.target.value))}
                            className="w-full bg-transparent border-b border-slate-300 py-1 focus:border-blue-500 outline-none font-medium text-slate-700 print:text-black print:border-none"
                          >
                            {Object.keys(pipeSpecs).map(dnKey => (
                              <option key={dnKey} value={dnKey}>{pipeSpecs[dnKey].name}</option>
                            ))}
                          </select>
                        </td>
                        <td className="p-4 print:p-2 text-slate-500 print:text-black font-mono text-xs border-r print:border-slate-300">
                          {row.spec.od} / {row.spec.t} / {row.id_mm.toFixed(2)}
                        </td>
                        <td className="p-4 print:p-2 border-r print:border-slate-300">
                          <span className="font-medium text-slate-700 print:text-black">{row.totalWeightM.toFixed(2)}</span>
                          <div className="text-xs text-slate-400 print:text-slate-600 mt-1">Pipa: {row.pipeWeightM.toFixed(2)} | Air: {row.waterWeightM.toFixed(2)}</div>
                        </td>
                        <td className="p-4 print:p-2 border-r print:border-slate-300">
                          <input 
                            type="number" min="0" step="0.1"
                            value={row.length} 
                            onChange={(e) => updateWeightRow(row.id, 'length', e.target.value)} 
                            className="w-full px-3 py-1.5 bg-white border border-slate-300 rounded focus:ring-2 focus:ring-blue-500 outline-none print:w-auto" 
                          />
                        </td>
                        <td className="p-4 print:p-2 font-semibold text-emerald-600 print:text-black border-r print:border-slate-300">
                          {row.weightPerM2SF.toFixed(2)}
                        </td>
                        <td className="p-4 print:p-2 font-semibold text-slate-800 print:text-black border-r print:border-slate-300">
                          {row.totalWeightKg.toFixed(2)}
                        </td>
                        <td className="print-hidden p-4 text-center">
                          <button 
                            onClick={() => removeWeightRow(row.id)}
                            className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <button 
                onClick={addWeightRow}
                className="print-hidden flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium"
              >
                <Plus className="w-4 h-4" /> Tambah Baris
              </button>
            </div>
          </div>
        )}

      </div>
    </div>
  );
};

export default App;