import { useState } from 'react';
import jsPDF from 'jspdf';
import { FileDown, AlertTriangle } from 'lucide-react';
import { demoMaterials, demoCase, RESIN_WARNING } from '@/lib/demoData';

const ProductsTable = () => {
  const [rows, setRows] = useState(demoMaterials.map(m => ({ ...m, used: m.price, stock: 'In stock' })));
  const total = rows.reduce((s, r) => s + r.price, 0);
  const exportPdf = () => {
    const pdf = new jsPDF();
    pdf.setFontSize(16); pdf.text('SHiRE Dental Studio — Materials Report', 14, 18);
    pdf.setFontSize(9); pdf.text(`Case: ${demoCase.case_id} · ${demoCase.patient}`, 14, 26);
    let y = 38;
    pdf.text('Product / Material', 14, y); pdf.text('Qty', 110, y); pdf.text('Unit', 130, y); pdf.text('AUD', 160, y);
    y += 4; pdf.line(14, y - 2, 196, y - 2); y += 4;
    rows.forEach(r => { pdf.text(r.name, 14, y); pdf.text(String(r.quantity), 110, y); pdf.text(r.unit, 130, y); pdf.text(`$${r.price}`, 160, y); y += 6 });
    y += 2; pdf.line(14, y, 196, y); y += 6;
    pdf.setFontSize(11); pdf.text(`Estimated Total: AUD $${total}`, 14, y);
    pdf.setFontSize(8); pdf.text('Estimates only. Final consumption depends on printer, orientation, supports & resin profile.', 14, y + 10);
    pdf.save('shire-materials-report.pdf');
  };
  return (
    <div className="glass-panel overflow-hidden">
      <div className="flex items-center justify-between border-b border-white/[.06] px-3 py-2">
        <div>
          <span className="text-[10px] uppercase tracking-[.18em] text-cyan-400">Products & Materials Needed</span>
          <p className="mt-0.5 text-[8px] text-slate-600">Estimated material consumption · editable estimates</p>
        </div>
        <button onClick={exportPdf} className="secondary-button"><FileDown /> Export PDF</button>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-left text-[10px]">
          <thead className="border-b border-white/[.06] bg-white/[.02] text-[8px] uppercase tracking-wider text-slate-500">
            <tr>
              <th className="px-3 py-2">Product / Material</th>
              <th className="px-3 py-2">Purpose / Use</th>
              <th className="px-3 py-2">Qty</th>
              <th className="px-3 py-2">Unit</th>
              <th className="px-3 py-2 text-right">Est. Price</th>
              <th className="px-3 py-2 text-right">Total</th>
              <th className="px-3 py-2">Supplier</th>
              <th className="px-3 py-2">Stock</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-white/[.04]">
            {rows.map((r, i) => (
              <tr key={i} className="hover:bg-white/[.02]">
                <td className="px-3 py-2 font-medium text-slate-200">{r.name}</td>
                <td className="px-3 py-2 text-slate-500">{r.purpose}</td>
                <td className="px-3 py-2 text-slate-300">{r.quantity}</td>
                <td className="px-3 py-2 text-slate-500">{r.unit}</td>
                <td className="px-3 py-2 text-right text-slate-400">${r.price.toFixed(2)}</td>
                <td className="px-3 py-2 text-right font-semibold text-cyan-300">${r.price.toFixed(2)}</td>
                <td className="px-3 py-2 text-slate-500">{r.supplier}</td>
                <td className="px-3 py-2"><span className="rounded border border-emerald-400/20 bg-emerald-400/10 px-1.5 py-0.5 text-[8px] text-emerald-300">{r.stock}</span></td>
              </tr>
            ))}
          </tbody>
          <tfoot className="border-t border-white/[.06] bg-white/[.02]">
            <tr>
              <td className="px-3 py-2" colSpan={5}>Estimated Total Material Cost</td>
              <td className="px-3 py-2 text-right text-[12px] font-bold text-cyan-300">AUD ${total}</td>
              <td className="px-3 py-2" colSpan={2} />
            </tr>
          </tfoot>
        </table>
      </div>
      <div className="flex items-start gap-2 border-t border-white/[.06] px-3 py-2 text-[8px] leading-snug text-amber-200/60">
        <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" />
        {RESIN_WARNING}
      </div>
    </div>
  );
};
export default ProductsTable;