import { useEffect, useState } from 'react';
import { Plus } from 'lucide-react';
import PageHeader from '@/components/workshop/PageHeader';
import BoundaryNotice from '@/components/workshop/BoundaryNotice';
import SessionCard from '@/components/measurements/SessionCard';
import StartWorkflowDialog from '@/components/measurements/StartWorkflowDialog';
import { measurementService } from '@/services/measurementService';
import { projectService } from '@/services/projectService';
export default function Measurements() { const [sessions,setSessions]=useState([]); const [projects,setProjects]=useState([]); const [starting,setStarting]=useState(false); useEffect(()=>{Promise.all([measurementService.sessions(),projectService.list()]).then(([s,p])=>{setSessions(s);setProjects(p)})},[]); return <><PageHeader eyebrow="Guided recording" title="Measurement Studio" description="Measurements save immediately in millimetres and never overwrite historical sessions." action={<button className="btn-primary" onClick={()=>setStarting(true)}><Plus/>Start workflow</button>}/><BoundaryNotice/>{starting&&<StartWorkflowDialog onClose={()=>setStarting(false)} />}<div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">{sessions.map(s=><SessionCard key={s.uuid} session={s} project={projects.find(p=>p.uuid===s.project_uuid)}/>)}</div></> }