import { Upload, ScanLine, FileBox, CheckCircle2 } from 'lucide-react';
import PageTitle from '@/components/studio/PageTitle';

const steps = ['Select file','Identify scan type','Assign upper/lower jaw','Check scale','Check orientation','Clean mesh','Detect holes','Align scans','Confirm bite','Save to case'];
const diagnostics = [
  ['Mesh triangles', '248,612'], ['File size', '18.4 MB'], ['Units', 'mm'],
  ['Bounding dims', '62.0 × 48.4 × 22.1 mm'], ['Watertight', 'Yes'], ['Holes detected', '2'],
  ['Intersecting geometry', 'None'], ['Scan completeness', '98.6%'], ['Resolution', '0.05 mm'], ['Scale confidence', 'High']
];

const Scans = () => (
  <div className="p-3 pb-10 lg:p-4">
    <PageTitle eyebrow="Digital impression" title="Scan Manager" description="Import, validate and align intraoral, desktop and impression scans." />
    <div className="grid gap-3 lg:grid-cols-2">
      <div className="glass-panel p-3">
        <div className="mb-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">Import</div>
        <div className="grid grid-cols-3 gap-2">
          {['STL','OBJ','PLY','DICOM','Intraoral','Facial'].map(f => (
            <button key={f} className="flex flex-col items-center gap-1 rounded-md border border-white/[.06] bg-black/20 p-3 text-[10px] text-slate-400 hover:border-cyan-400/30 hover:text-cyan-300">
              {f === 'DICOM' ? <FileBox className="h-5 w-5" /> : <ScanLine className="h-5 w-5" />}{f}
            </button>
          ))}
        </div>
        <label className="primary-button mt-3 w-full justify-center cursor-pointer">
          <Upload /> Select scan file
          <input type="file" accept=".stl,.obj,.ply" className="hidden" />
        </label>
      </div>
      <div className="glass-panel p-3">
        <div className="mb-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">Import Workflow</div>
        <div className="space-y-1">
          {steps.map((s, i) => (
            <div key={s} className="flex items-center gap-2 text-[11px] text-slate-300">
              <span className="grid h-4 w-4 place-items-center rounded-full border border-cyan-400/30 bg-cyan-400/10 text-[8px] text-cyan-300">{i + 1}</span>
              {s}
              {i < 2 && <CheckCircle2 className="ml-auto h-3.5 w-3.5 text-emerald-400" />}
            </div>
          ))}
        </div>
      </div>
    </div>
    <div className="glass-panel mt-3 p-3">
      <div className="mb-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">Scan Diagnostics</div>
      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-5">
        {diagnostics.map(([k, val]) => (
          <div key={k} className="rounded-md border border-white/[.06] bg-black/20 p-2">
            <div className="text-[8px] uppercase tracking-wider text-slate-500">{k}</div>
            <div className="text-[11px] text-slate-200">{val}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);
export default Scans;