import { useState } from 'react';
import { Calculator } from 'lucide-react';

const defaults = { arches: 2, baseVol: 120, toothVol: 35, supportVol: 40, tryIns: 1, reprints: 1, waste: 12, margin: 10, vatMin: 150, density: 1.18, bottleSize: 1000, price: 1.07 };

const MaterialCalculator = () => {
  const [v, setV] = useState(defaults);
  const set = k => e => setV({ ...v, [k]: +e.target.value });
  const baseResin = (v.baseVol + v.supportVol) * v.arches;
  const toothResin = v.toothVol * v.arches;
  const totalLiquid = (baseResin + toothResin) * (1 + v.tryIns + v.reprints);
  const withWaste = totalLiquid * (1 + v.waste / 100) * (1 + v.margin / 100);
  const recommended = Math.max(withWaste, v.vatMin);
  const grams = recommended * v.density;
  const bottles = Math.ceil(recommended / v.bottleSize);
  const cost = recommended * v.price;
  const bottlePct = (recommended / v.bottleSize) * 100;
  return (
    <div className="glass-panel p-3">
      <div className="mb-3 flex items-center gap-2 text-[10px] uppercase tracking-[.18em] text-cyan-400"><Calculator className="h-3.5 w-3.5" /> Material Quantity Calculator</div>
      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
        {[['Arches','arches'],['Base volume (mL)','baseVol'],['Tooth volume (mL)','toothVol'],['Support volume (mL)','supportVol'],['Try-ins','tryIns'],['Reprints','reprints'],['Waste %','waste'],['Safety margin %','margin'],['Vat minimum (mL)','vatMin'],['Resin density (g/mL)','density'],['Bottle size (mL)','bottleSize'],['Price (AUD/mL)','price']].map(([label,key]) => (
          <label key={key} className="block">
            <span className="text-[8px] uppercase tracking-wider text-slate-500">{label}</span>
            <input type="number" value={v[key]} onChange={set(key)} className="studio-input mt-0.5 w-full" />
          </label>
        ))}
      </div>
      <div className="mt-3 grid gap-2 sm:grid-cols-3 lg:grid-cols-6">
        {[['Base resin', `${baseResin.toFixed(0)} mL`],['Tooth resin', `${toothResin.toFixed(0)} mL`],['Total liquid', `${totalLiquid.toFixed(0)} mL`],['Recommended load', `${recommended.toFixed(0)} mL`],['Weight', `${grams.toFixed(0)} g`],['Bottles', String(bottles)]].map(([l,val]) => (
          <div key={l} className="rounded-md border border-white/[.06] bg-black/20 p-2">
            <div className="text-[8px] uppercase tracking-wider text-slate-500">{l}</div>
            <div className="text-[12px] font-semibold text-slate-100">{val}</div>
          </div>
        ))}
      </div>
      <div className="mt-3 flex flex-col gap-2 rounded-md border border-cyan-400/20 bg-cyan-400/[.06] p-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div className="text-[9px] uppercase tracking-wider text-slate-400">Estimated Total Material Cost</div>
          <div className="text-lg font-bold text-cyan-300">AUD ${cost.toFixed(2)}</div>
          <div className="text-[8px] text-slate-500">Bottle usage: {bottlePct.toFixed(1)}% · Final consumption depends on printer, orientation, supports & resin profile.</div>
        </div>
      </div>
    </div>
  );
};
export default MaterialCalculator;