import { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { ChevronLeft, Download } from 'lucide-react';
import PageHeader from '@/components/workshop/PageHeader';
import LoadingPanel from '@/components/workshop/LoadingPanel';
import { componentService } from '@/services/componentService';
import { exportService } from '@/services/exportService';
import IdentificationTab from '@/components/dimensions/tabs/IdentificationTab';
import ManufacturerSpecsTab from '@/components/dimensions/tabs/ManufacturerSpecsTab';
import ExternalEnvelopeTab from '@/components/dimensions/tabs/ExternalEnvelopeTab';
import MeasurementStationsTab from '@/components/dimensions/tabs/MeasurementStationsTab';
import ConnectionsTab from '@/components/dimensions/tabs/ConnectionsTab';
import ControlsAccessTab from '@/components/dimensions/tabs/ControlsAccessTab';
import KeepOutZonesTab from '@/components/dimensions/tabs/KeepOutZonesTab';
import MovementEnvelopeTab from '@/components/dimensions/tabs/MovementEnvelopeTab';
import AssemblyPositionTab from '@/components/dimensions/tabs/AssemblyPositionTab';
import PhotosScansTab from '@/components/dimensions/tabs/PhotosScansTab';
import SourcesTab from '@/components/dimensions/tabs/SourcesTab';
import RevisionHistoryTab from '@/components/dimensions/tabs/RevisionHistoryTab';
import CompletenessTab from '@/components/dimensions/tabs/CompletenessTab';

const TABS = [
  ['identification', 'Identification', IdentificationTab], ['specs', 'Manufacturer Specs', ManufacturerSpecsTab],
  ['envelope', 'External Envelope', ExternalEnvelopeTab], ['stations', 'Measurement Stations', MeasurementStationsTab],
  ['connections', 'Connections', ConnectionsTab], ['access', 'Controls & Access', ControlsAccessTab],
  ['keepout', 'Keep-Out Zones', KeepOutZonesTab], ['movement', 'Movement Envelope', MovementEnvelopeTab],
  ['assembly', 'Assembly Position', AssemblyPositionTab], ['photos', 'Photos & Scans', PhotosScansTab],
  ['sources', 'Sources', SourcesTab], ['history', 'Revision History', RevisionHistoryTab],
  ['completeness', 'Completeness', CompletenessTab],
];

export default function ComponentDimensions() {
  const { uuid } = useParams();
  const [component, setComponent] = useState(null);
  const [tab, setTab] = useState(0);
  useEffect(() => { componentService.get(uuid).then(setComponent); }, [uuid]);
  if (!component) return <LoadingPanel label="Loading component dimensions" />;
  const ActiveTab = TABS[tab][2];
  const exportJson = async () => { const data = await exportService.componentJson(component); exportService.download(data, `${component.manufacturer}_${component.model}.json`); };
  const exportCsv = async () => { const data = await exportService.componentCsv(component); exportService.download(data, `${component.manufacturer}_${component.model}.csv`, 'text/csv'); };
  return (
    <>
      <div className="mb-4"><Link to="/components" className="btn-secondary"><ChevronLeft />Back to components</Link></div>
      <PageHeader eyebrow="Component Dimension Intelligence" title={`${component.manufacturer} ${component.model} ${component.variant || ''}`} description={`${component.category} · Article ${component.article_number || '—'} · ${component.data_source || 'Unknown source'}`} action={<div className="flex gap-2"><button className="btn-secondary" onClick={exportJson}><Download />JSON</button><button className="btn-secondary" onClick={exportCsv}><Download />CSV</button></div>} />
      <div className="mb-6 flex gap-2 overflow-x-auto pb-2">{TABS.map(([key, label], i) => <button key={key} onClick={() => setTab(i)} className={`shrink-0 rounded-xl px-4 py-2 text-sm font-medium transition ${tab === i ? 'bg-violet-400 text-slate-950' : 'border border-white/10 text-slate-400 hover:text-violet-300'}`}>{label}</button>)}</div>
      <div className="panel p-6"><ActiveTab component={component} actor="Ray" /></div>
    </>
  );
}