import { useState } from 'react';
import { Layers, Printer, ShieldCheck, Palette, Pencil } from 'lucide-react';

function MiniCard({ icon: Icon, title, children, onEdit }) {
  return (
    <div className="rounded-xl border border-white/10 bg-white/[0.02] p-3">
      <div className="mb-2 flex items-center justify-between">
        <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.1em] text-slate-400">
          <Icon className="h-3.5 w-3.5 text-cyan-400" />{title}
        </div>
        <button onClick={onEdit} className="text-slate-500 hover:text-cyan-300"><Pencil className="h-3.5 w-3.5" /></button>
      </div>
      {children}
    </div>
  );
}

export default function StatusCards({ validationPercent = 38, completedChecks = 3, totalChecks = 8 }) {
  const [material, setMaterial] = useState('ASA');
  const [printer, setPrinter] = useState('Bambu Lab P1S');
  const [style, setStyle] = useState('AeroFlow');

  return (
    <div className="space-y-2.5 px-4 pb-4">
      <MiniCard icon={Layers} title="Material">
        <p className="text-sm font-semibold text-slate-100">{material} <span className="text-xs font-normal text-slate-400">(Preferred)</span></p>
        <p className="mt-1 text-[11px] leading-4 text-slate-500">UV-stable · Impact resistant · Outdoor suitable</p>
        <select value={material} onChange={(e) => setMaterial(e.target.value)} className="mt-2 w-full rounded-lg border border-white/10 bg-black/20 px-2 py-1.5 text-xs text-slate-200">
          <option value="ASA">ASA — final sun-exposed shells</option>
          <option value="PETG">PETG — easier production</option>
          <option value="TPU">TPU — flexible inserts</option>
          <option value="PLA">PLA — prototypes only</option>
        </select>
      </MiniCard>

      <MiniCard icon={Printer} title="Printer">
        <p className="text-sm font-semibold text-slate-100">{printer}</p>
        <p className="mt-1 text-[11px] leading-4 text-slate-500">0.4 mm nozzle · Build volume compatible</p>
        <select value={printer} onChange={(e) => setPrinter(e.target.value)} className="mt-2 w-full rounded-lg border border-white/10 bg-black/20 px-2 py-1.5 text-xs text-slate-200">
          <option value="Bambu Lab P1S">Bambu Lab P1S</option>
          <option value="Creality K2 Plus">Creality K2 Plus</option>
          <option value="Snapmaker U1">Snapmaker U1</option>
          <option value="Custom printer">Custom printer</option>
        </select>
      </MiniCard>

      <MiniCard icon={ShieldCheck} title="Validation Status">
        <div className="flex items-center justify-between text-sm">
          <span className="font-semibold text-amber-300">Preliminary</span>
          <span className="text-xs text-slate-400">{validationPercent}%</span>
        </div>
        <div className="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-white/10">
          <div className="h-full rounded-full bg-amber-400 transition-all" style={{ width: `${validationPercent}%` }} />
        </div>
        <p className="mt-1.5 text-[11px] text-slate-500">{completedChecks} of {totalChecks} checkpoints complete</p>
      </MiniCard>

      <MiniCard icon={Palette} title="Design Style">
        <p className="text-sm font-semibold text-slate-100">{style}</p>
        <p className="mt-1 text-[11px] leading-4 text-slate-500">Matte finish · Vented accents</p>
        <select value={style} onChange={(e) => setStyle(e.target.value)} className="mt-2 w-full rounded-lg border border-white/10 bg-black/20 px-2 py-1.5 text-xs text-slate-200">
          <option value="AeroFlow">AeroFlow</option>
          <option value="Brutal Armour">Brutal Armour</option>
          <option value="Biomechanical">Biomechanical</option>
          <option value="Minimal">Minimal</option>
          <option value="Geometric">Geometric</option>
        </select>
      </MiniCard>
    </div>
  );
}