'use client';
import {inBoard,boardName} from '@/lib/board-size';
import {useState} from 'react';
import {Plus,Undo2,Redo2,Check,CircuitBoard} from 'lucide-react';
import {toast} from 'sonner';
import {type Plan,type Device,labels} from '@/lib/plan';
import {circuitPorts} from '@/lib/board';
import {floorPoints} from '@/lib/geometry';
import {toggleDeviceCircuit} from '@/lib/circuit-assignment';
import {BackgroundImage} from './background-image';
import {ElectricalSymbol} from './electrical-symbol';
export function CircuitDesigner({plan,buildingId,boardId='',floorId,onFloor,change,onCreate,onBoard,undo,redo,canUndo,canRedo}:{plan:Plan;buildingId:string;boardId?:string;floorId:string;onFloor:(id:string)=>void;change:(fn:(p:Plan)=>void)=>void;onCreate:()=>void;onBoard:()=>void;undo:()=>void;redo:()=>void;canUndo:boolean;canRedo:boolean}){
 const circuits=plan.circuits.filter(c=>c.building===buildingId&&inBoard(c,boardId)),building=plan.buildings.find(b=>b.id===buildingId)!;
 const [chosen,setChosen]=useState(''),[filter,setFilter]=useState('all'),[notice,setNotice]=useState('');
 const circuit=circuits.find(c=>c.id===chosen)||circuits[0],floor=building.floors.find(f=>f.id===floorId)||building.floors[0];
 const allDevices=building.floors.flatMap(f=>f.devices),visible=(d:Device)=>filter==='all'||(filter==='free'?!d.circuit:d.circuit===circuit?.id);
 const points=floor?[...floor.rooms.flatMap(r=>[{x:r.x,y:r.y},{x:r.x+r.w,y:r.y+r.h}]),...floor.walls.flatMap(w=>[w.a,w.b]),...floor.devices,...(floor.background?.visible?[{x:floor.background.x,y:floor.background.y},{x:floor.background.x+floor.background.w,y:floor.background.y+floor.background.h}]:[])]:[];
 const minX=Math.min(0,...points.map(p=>p.x))-40,minY=Math.min(0,...points.map(p=>p.y))-40,maxX=Math.max(800,...points.map(p=>p.x))+80,maxY=Math.max(560,...points.map(p=>p.y))+60;
 function assign(d:Device){if(!circuit||!floor)return;const previous=d.circuit,oldName=plan.circuits.find(c=>c.id===previous)?.name;try{change(p=>{toggleDeviceCircuit(p,buildingId,floor.id,d.id,circuit.id)});setNotice(previous===circuit.id?`${d.name}: hozzárendelés megszüntetve.`:`${d.name} → ${circuit.name}${oldName?' (korábban: '+oldName+')':''}.`)}catch(e){toast.error(e instanceof Error?e.message:'A hozzárendelés nem módosítható.')}}
 const action=(d:Device)=>d.circuit===circuit?.id?'Hozzárendelés megszüntetése':`Hozzárendelés: ${circuit?.name||'válassz áramkört'}`;
 return <section className="circuit-designer" aria-label="Áramkörök kattintásos szerkesztése"><div className="circuit-designer-toolbar"><button className="primary" onClick={onCreate}><Plus/> Új áramkör</button><button onClick={onBoard}><CircuitBoard/> Elosztó és áramkörbeállítások</button><button aria-label="Visszavonás" onClick={undo} disabled={!canUndo}><Undo2/></button><button aria-label="Újra" onClick={redo} disabled={!canRedo}><Redo2/></button></div>
  <p className="circuit-designer-hint">Válassz áramkört, majd kattints a szerelvényre az alaprajzon vagy a listában. Újabb kattintással megszüntetheted a hozzárendelést. Másik áramkör eleme áthelyeződik a kiválasztott áramkörbe.</p>
  <div className="circuit-picker" aria-label="Áramkör kiválasztása">{circuits.map(c=>{const total=circuitPorts(c).length,bound=plan.boardWires.filter(w=>[w.from,w.to].some(e=>e.kind==='circuit'&&e.id===c.id)).length;return <button key={c.id} aria-pressed={c.id===circuit?.id} onClick={()=>{setChosen(c.id);setNotice('')}}><b>{c.name}</b><span>{boardName(building,c.board)} · {c.phase} · {c.curve}{c.rating} A · {c.cable}</span><small>{allDevices.filter(d=>d.circuit===c.id).length} szerelvény · {bound}/{total} szál bekötve</small></button>})}</div>
  {!circuits.length&&<p className="circuit-empty">Még nincs áramkör. Az „Új áramkör” gombbal hozhatod létre az elsőt.</p>}
  <div className="circuit-filters"><label>Szint<select aria-label="Áramköri nézet szintje" value={floor?.id||''} onChange={e=>onFloor(e.target.value)}>{building.floors.map(f=><option key={f.id} value={f.id}>{f.name}</option>)}</select></label><label>Mutatott szerelvények<select aria-label="Szerelvények szűrése" value={filter} onChange={e=>setFilter(e.target.value)}><option value="all">Összes</option><option value="selected">Kiválasztott áramkör</option><option value="free">Nincs hozzárendelve</option></select></label><span>{floor?.devices.filter(d=>!d.circuit).length||0} hozzárendeletlen ezen a szinten</span></div>
  <p role="status" className="circuit-assignment-status">{notice||(circuit?`Kiválasztva: ${circuit.name}. A zöld keret az ehhez tartozó szerelvényeket jelöli.`:'Hozz létre és válassz ki egy áramkört.')}</p>
  {floor?<><div className="circuit-floor-scroll"><svg role="group" aria-label={'Áramköri alaprajz: '+floor.name} viewBox={`${minX} ${minY} ${maxX-minX} ${maxY-minY}`}>
   <rect x={minX} y={minY} width={maxX-minX} height={maxY-minY} fill="var(--plan-bg)"/>
   <BackgroundImage key={floor.background?.assetId} background={floor.background}/>{floor.rooms.map(r=><rect key={r.id} x={r.x} y={r.y} width={r.w} height={r.h} fill={floor.background?.visible?"transparent":"var(--plan-room)"} stroke="var(--muted-foreground)" strokeWidth="4"/>)}
   {floor.walls.map(w=><line key={w.id} x1={w.a.x} y1={w.a.y} x2={w.b.x} y2={w.b.y} stroke="var(--muted-foreground)" strokeWidth="4"/>)}
   {floor.routes.filter(r=>r.circuit===circuit?.id).map(r=><polyline key={r.id} points={floorPoints(r,floor).map(p=>`${p.x},${p.y}`).join(' ')} fill="none" stroke="#258574" strokeWidth="2" strokeDasharray="6 5" opacity=".45"/>)}
   {floor.devices.filter(visible).map(d=>{const selected=!!circuit&&d.circuit===circuit.id;return <g key={d.id} transform={`translate(${d.x} ${d.y})`} role="button" tabIndex={0} aria-disabled={!circuit} aria-pressed={selected} aria-label={`${d.name} · ${labels[d.kind]} · ${action(d)}`} onClick={()=>assign(d)} onKeyDown={e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();assign(d)}}} className={'circuit-map-device'+(selected?' assigned':'')}><title>{d.name+' · '+(plan.circuits.find(c=>c.id===d.circuit)?.name||'Nincs hozzárendelve')}</title><circle className="assignment-ring" r="20" fill="var(--plan-room)" stroke={selected?'#258574':!d.circuit?'#bb772b':'var(--border)'} strokeWidth={selected?3:1.5} strokeDasharray={!d.circuit?'4 3':undefined}/><g transform={`rotate(${d.angle})`}><ElectricalSymbol kind={d.kind}/></g><text x="25" y="5" fontSize="13" fill="var(--foreground)" paintOrder="stroke" stroke="var(--plan-room)" strokeWidth="4">{d.name}</text></g>})}
   {floor.rooms.map(r=><text key={r.id} x={r.x+r.w/2} y={r.y+r.h/2} textAnchor="middle" fontSize="15" fill="var(--foreground)" paintOrder="stroke" stroke="var(--plan-room)" strokeWidth="8" pointerEvents="none">{r.name}</text>)}
  </svg></div><details className="circuit-device-list" open><summary>{floor.name} szerelvényei ({floor.devices.filter(visible).length})</summary><div>{floor.devices.filter(visible).map(d=><button key={d.id} disabled={!circuit} aria-label={`${d.name} hozzárendelése a listában`} aria-pressed={d.circuit===circuit?.id} onClick={()=>assign(d)}><span><b>{d.name}</b> · {labels[d.kind]}<small>{plan.circuits.find(c=>c.id===d.circuit)?.name||'Nincs hozzárendelve'} · {d.height} cm</small></span>{d.circuit===circuit?.id&&<Check/>}</button>)}</div>{!floor.devices.filter(visible).length&&<p>Nincs a szűrésnek megfelelő szerelvény ezen a szinten.</p>}</details></>:<p className="circuit-empty">Az alaprajzi szerelvényekhez előbb hozz létre egy szintet.</p>}
  <p className="circuit-designer-hint">A hozzárendelés a szerelvény áramkörét állítja be. Új nyomvonalat vagy elosztóbekötést nem hoz létre.</p>
 </section>;
}