import { useState } from 'react';
import PageTitle from '@/components/studio/PageTitle';
import ProductsTable from '@/components/studio/ProductsTable';
import MaterialCalculator from '@/components/studio/MaterialCalculator';
import { demoMaterials } from '@/lib/demoData';
import { Plus, AlertTriangle, Package } from 'lucide-react';

const seedStock = demoMaterials.map((m, i) => ({
  name: m.name,
  current: [420, 180, 600, 250, 320, 110, 6, 9][i],
  reserved: 250,
  threshold: 100,
  reorder: 200,
  lot: `LOT-${2400 + i}`,
  expiry: '2027-03-14',
  status: 'ok'
}));

const StockTable = () => {
  const [rows, setRows] = useState(seedStock);
  const toggleExpire = i => setRows(rs => rs.map((r, idx) => idx === i ? { ...r, status: r.status === 'expired' ? 'ok' : 'expired' } : r));
  return (
    <div className="glass-panel overflow-hidden">
      <div className="flex items-center justify-between border-b border-white/[.06] px-3 py-2">
        <span className="text-[10px] uppercase tracking-[.18em] text-cyan-400">Stock & Inventory</span>
        <button className="primary-button"><Plus />Add material</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">Material</th><th className="px-3 py-2">Current</th><th className="px-3 py-2">Reserved</th><th className="px-3 py-2">Available</th><th className="px-3 py-2">Threshold</th><th className="px-3 py-2">Lot</th><th className="px-3 py-2">Expiry</th><th className="px-3 py-2">Status</th></tr>
          </thead>
          <tbody className="divide-y divide-white/[.04]">
            {rows.map((r, i) => {
              const avail = r.current - r.reserved;
              const low = avail < r.threshold;
              return (
                <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-300">{r.current}</td>
                  <td className="px-3 py-2 text-slate-500">{r.reserved}</td>
                  <td className={`px-3 py-2 ${low ? 'text-amber-300' : 'text-slate-200'}`}>{avail}</td>
                  <td className="px-3 py-2 text-slate-500">{r.threshold}</td>
                  <td className="px-3 py-2 text-slate-500">{r.lot}</td>
                  <td className="px-3 py-2 text-slate-500">{r.expiry}</td>
                  <td className="px-3 py-2">
                    <button onClick={() => toggleExpire(i)} className={`rounded border px-1.5 py-0.5 text-[8px] ${r.status === 'expired' ? 'border-rose-400/30 bg-rose-400/10 text-rose-300' : low ? 'border-amber-400/30 bg-amber-400/10 text-amber-300' : 'border-emerald-400/20 bg-emerald-400/10 text-emerald-300'}`}>
                      {r.status === 'expired' ? 'Expired' : low ? 'Low stock' : 'In stock'}
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const PrinterProfiles = () => {
  const printers = [
    ['Formlabs Dental (placeholder)', 'Formlabs', 'SLA', '145×145×145 mm', 25, 150, 'Calibrated'],
    ['Asiga (placeholder)', 'Asiga', 'DLP', '76×43×120 mm', 50, 80, 'Calibrated'],
    ['Validated DLP (placeholder)', 'Generic', 'DLP', '128×80×200 mm', 50, 120, 'Due'],
    ['Custom Profile', 'Custom', '—', '—', 50, 100, 'Offline']
  ];
  return (
    <div className="glass-panel p-3">
      <div className="mb-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">Printer Profiles</div>
      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
        {printers.map((p, i) => (
          <div key={i} className="rounded-md border border-white/[.06] bg-black/20 p-2.5">
            <div className="flex items-center gap-1.5"><Package className="h-3.5 w-3.5 text-cyan-400" /><span className="text-[11px] font-medium text-slate-200">{p[0]}</span></div>
            <div className="mt-1.5 space-y-0.5 text-[9px] text-slate-500">
              <div>Maker: {p[1]} · {p[2]}</div><div>Build: {p[3]}</div><div>Layer: {p[4]} μm</div><div>Vat min: {p[5]} mL</div>
            </div>
            <span className={`mt-2 inline-block rounded border px-1.5 py-0.5 text-[8px] ${p[6] === 'Calibrated' ? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-300' : p[6] === 'Due' ? 'border-amber-400/20 bg-amber-400/10 text-amber-300' : 'border-slate-500/20 bg-slate-500/10 text-slate-400'}`}>{p[6]}</span>
          </div>
        ))}
      </div>
      <div className="mt-2 flex gap-1.5 text-[8px] text-amber-200/60"><AlertTriangle className="h-3 w-3 shrink-0" />Ordinary hobby printers are not clinically validated.</div>
    </div>
  );
};

const Materials = () => (
  <div className="p-3 pb-10 lg:p-4">
    <PageTitle eyebrow="Materials & Manufacturing" title="Materials Manager" description="Estimate consumption, manage stock and prepare printer profiles." />
    <div className="flex flex-col gap-3">
      <ProductsTable />
      <MaterialCalculator />
      <StockTable />
      <PrinterProfiles />
    </div>
  </div>
);
export default Materials;