import React, { useState } from 'react'; import { Box, RotateCcw, Save, Undo2, Redo2 } from 'lucide-react';
const views=['Front','Rear','Left','Right','Top','Bottom','Perspective','Orthographic']; const tools=['Crop','Plane cut','Box select','Lasso select','Delete selected noise','Remove isolated fragments','Fill hole','Close base','Smooth selected area','Global smoothing','Preserve-detail smoothing','Decimate mesh','Remesh','Flip normals','Recalculate normals','Set origin','Align to floor','Mirror','Scale','Rotate','Translate'];
export default function MeshLab(){const [selected,setSelected]=useState('Orbit');return <div className="mx-auto max-w-[1500px]"><div className="flex items-end justify-between"><div><p className="text-xs uppercase tracking-[.28em] text-purple-300">Non-destructive workspace</p><h2 className="mt-2 text-3xl font-semibold">Mesh Lab</h2></div><div className="flex gap-2"><button className="icon"><Undo2/></button><button className="icon"><Redo2/></button><button className="icon"><Save/></button></div></div><div className="mt-5 grid gap-4 xl:grid-cols-[220px_1fr_250px]"><aside className="rounded-2xl border border-white/10 bg-[#111114] p-3"><p className="mb-2 px-2 text-xs uppercase tracking-wider text-zinc-500">Editing tools</p>{tools.map(t=><button onClick={()=>setSelected(t)} key={t} className={`w-full rounded-lg px-3 py-2 text-left text-sm ${selected===t?'bg-purple-500/15 text-purple-200':'text-zinc-400 hover:bg-white/5'}`}>{t}</button>)}</aside><div className="relative flex min-h-[65vh] items-center justify-center rounded-2xl border border-white/10 bg-[radial-gradient(circle,#242128,#09090b_68%)]"><div className="text-center text-zinc-600"><Box size={64} strokeWidth={1} className="mx-auto"/><p className="mt-3 text-sm">Select a project mesh version to load</p></div><div className="absolute bottom-3 left-3 right-3 flex flex-wrap gap-1">{views.map(v=><button key={v} className="rounded-lg border border-white/10 bg-black/70 px-2 py-1 text-xs text-zinc-400">{v}</button>)}</div></div><aside className="space-y-3"><div className="rounded-2xl border border-white/10 bg-[#111114] p-4"><p className="text-xs uppercase tracking-wider text-zinc-500">Viewer</p>{['Show grid','Show origin','Bounding box','Show normals','Wireframe','Solid','Point cloud','Colour texture'].map(x=><label key={x} className="mt-3 flex items-center justify-between text-sm text-zinc-400">{x}<input type="checkbox"/></label>)}</div><div className="rounded-2xl border border-amber-400/20 bg-amber-400/5 p-4 text-xs leading-5 text-amber-200">Every destructive edit creates a new Mesh Version. The original raw scan is never overwritten.</div></aside></div></div>}