import { useRef, useState } from 'react';
import html2canvas from 'html2canvas';
import { Move3d, Rotate3d, ZoomIn, Maximize, Grid3x3, Ruler, Scissors, Camera, Upload, Crosshair, ArrowLeftRight } from 'lucide-react';
import DentalViewport from './DentalViewport';

const tools = [Move3d, Rotate3d, ZoomIn, Maximize, Grid3x3, Ruler, Scissors, Crosshair, ArrowLeftRight];
const views = ['Occlusal', 'Left', 'Right', 'Front', 'Rear', 'Upper', 'Lower'];

const ViewportStudio = () => {
  const [file, setFile] = useState(null);
  const panel = useRef(null);
  const shot = async () => {
    const canvas = await html2canvas(panel.current, { backgroundColor: '#0a0a0c' });
    const a = document.createElement('a');
    a.download = 'shire-viewport.png';
    a.href = canvas.toDataURL('image/png');
    a.click();
  };
  return (
    <section ref={panel} className="glass-panel relative flex min-h-[440px] flex-col 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">3D Dental Viewer</span>
        <div className="flex gap-0.5">
          {tools.map((Icon, i) => <button key={i} className="icon-button"><Icon /></button>)}
          <button onClick={shot} className="icon-button" title="Screenshot"><Camera /></button>
        </div>
      </div>
      <div className="relative flex-1">
        <DentalViewport file={file} />
        <div className="absolute right-3 top-3 flex flex-col gap-1">
          {views.map(v => (
            <button key={v} className="rounded border border-white/10 bg-black/40 px-2 py-1 text-[9px] uppercase tracking-wider text-slate-400 hover:border-cyan-400/40 hover:text-cyan-300">{v}</button>
          ))}
        </div>
        <div className="absolute bottom-3 left-3 flex items-center gap-2">
          <label className="flex cursor-pointer items-center gap-1.5 rounded-md bg-cyan-400 px-2.5 py-1.5 text-[10px] font-bold text-slate-950">
            <Upload className="h-3 w-3" /> IMPORT SCAN
            <input type="file" accept=".stl,.obj,.ply" className="hidden" onChange={e => setFile(e.target.files[0])} />
          </label>
          <span className="max-w-40 truncate text-[9px] text-slate-600">{file ? file.name : 'STL · OBJ · PLY · DICOM placeholder'}</span>
        </div>
      </div>
    </section>
  );
};
export default ViewportStudio;