'use client';
import type {PointerEvent as ReactPointerEvent} from 'react';
import type {Floor} from '@/lib/plan';
import type {FloorSelection} from '@/lib/floor-selection';
import {allOpenings,solidWallSegments,wallHosts,type WallHost} from '@/lib/architecture';
import {floorPoints} from '@/lib/geometry';
import {OpeningMark} from './opening-mark';
import {ElectricalSymbol} from './electrical-symbol';
// Az alaprajz rajzi rétege: a szerkesztő és a csak olvasható megosztott nézet közösen használja.
// Interaktív kezelők (onPick, onOpeningPick) nélkül csak megjelenít.
type PickType='rooms'|'walls'|'devices'|'routes';
const fmt=(n:number)=>n.toLocaleString('hu-HU',{maximumFractionDigits:1});
export function FloorShapes({floor:f,ghost=false,showDevices=true,showRoutes=true,interactive=false,isSelected=()=>false,selectedRouteId,onPick,onOpeningPick}:{floor:Floor;ghost?:boolean;showDevices?:boolean;showRoutes?:boolean;interactive?:boolean;isSelected?:(type:FloorSelection['type'],id:string)=>boolean;selectedRouteId?:string;onPick?:(e:ReactPointerEvent,type:PickType,id:string,handle?:number,segment?:number)=>void;onOpeningPick?:(e:ReactPointerEvent<SVGGElement>,host:WallHost)=>void}){return <g opacity={ghost?.14:1} pointerEvents={ghost?"none":undefined}>
{f.rooms.map(r=><g key={r.id} onPointerDown={onPick?e=>onPick(e,"rooms",r.id):undefined}><rect x={r.x} y={r.y} width={r.w} height={r.h} fill={ghost?"none":isSelected('rooms',r.id)?"var(--plan-selection)":f.background?.visible?"transparent":"var(--plan-room)"}/></g>)}
{wallHosts(f).map(host=><g key={host.id} data-wall-host={host.id} onPointerDown={onPick?e=>onPick(e,host.type,host.id):undefined}>{solidWallSegments(f,host).map(([a,b],i)=><g key={i}><line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="transparent" strokeWidth={Math.max(20,host.thickness*.4+8)}/><line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke={isSelected(host.type,host.id)?"#258574":"var(--plan-wall)"} strokeWidth={host.thickness*.4}/></g>)}</g>)}
{allOpenings(f).map(({host,opening})=><OpeningMark key={opening.id} host={host} opening={opening} onPick={onOpeningPick?e=>onOpeningPick(e,host):undefined}/>)}
{showRoutes&&f.routes.map(r=><g key={r.id} data-route-id={r.id} onPointerDown={onPick?e=>onPick(e,"routes",r.id):undefined} style={{cursor:interactive?"grab":undefined}}><polyline points={floorPoints(r,f).map(p=>p.x+","+p.y).join(" ")} stroke="transparent" fill="none" strokeWidth="18"/><polyline points={floorPoints(r,f).map(p=>p.x+","+p.y).join(" ")} fill="none" stroke={isSelected('routes',r.id)?"#258574":r.mode==="inside"?"#d48c49":"#598bb5"} strokeWidth="2.5" strokeDasharray={r.mode==="inside"?"7 5":undefined}/></g>)}
{showDevices&&f.devices.map(d=><g key={d.id} data-device-id={d.id} transform={"translate("+d.x+" "+d.y+")"} onPointerDown={onPick?e=>onPick(e,"devices",d.id):undefined} style={{cursor:interactive?"grab":undefined}}><circle r="21" fill={isSelected('devices',d.id)?"#dceee5":"transparent"} stroke={isSelected('devices',d.id)?"#258574":"none"} strokeDasharray="3 3"/><g transform={"rotate("+d.angle+")"}><ElectricalSymbol kind={d.kind}/></g><text y="26" fontSize="12" textAnchor="middle" fill="var(--muted-foreground)">{d.name}</text></g>)}
{showRoutes&&f.routes.map(r=><g key={r.id} data-route-handles={r.id}>{!ghost&&selectedRouteId===r.id&&floorPoints(r,f).map((p,i)=>!(i===0&&r.startId)&&!(i===r.points.length-1&&r.endId)&&<circle key={i} cx={p.x} cy={p.y} r="6" fill="var(--plan-room)" stroke="#258574" strokeWidth="2" onPointerDown={onPick?e=>onPick(e,'routes',r.id,i):undefined}/>) }{!ghost&&selectedRouteId===r.id&&floorPoints(r,f).slice(1).map((p,i)=>{const a=floorPoints(r,f)[i];return <rect key={'segment'+i} data-route-segment={i} x={(a.x+p.x)/2-5} y={(a.y+p.y)/2-5} width="10" height="10" fill="#258574" stroke="var(--plan-room)" strokeWidth="2" style={{cursor:'move'}} onPointerDown={onPick?e=>onPick(e,'routes',r.id,undefined,i):undefined}/>})}</g>)}</g>}
export function RoomLabels({floor}:{floor:Floor}){return <g data-layer="room-labels" pointerEvents="none">{floor.rooms.map(r=><g key={r.id}><text x={r.x+r.w/2} y={r.y+r.h/2-4} fontSize="16" fill="var(--foreground)" stroke="var(--plan-room)" strokeWidth="6" strokeLinejoin="round" style={{paintOrder:'stroke'}} textAnchor="middle">{r.name}</text><text x={r.x+r.w/2} y={r.y+r.h/2+19} fontSize="13" fill="var(--muted-foreground)" stroke="var(--plan-room)" strokeWidth="5" style={{paintOrder:'stroke'}} textAnchor="middle">{fmt(r.w*r.h/1600)} m²</text></g>)}</g>}
export function ScaleBar({x=72,y=640}:{x?:number;y?:number}){return <g transform={`translate(${x} ${y})`} stroke="#6f838e" fill="none"><path d="M0 0v8h80v-8m-40 0v8"/><text x="40" y="-8" stroke="none" fill="#6f838e" fontSize="12" textAnchor="middle">2 méter</text></g>}
export function PlanLegend(){return <div className="legend"><h3>Jelmagyarázat</h3><div><i style={{background:"#c17232"}}/> Erősáram</div><div><i style={{background:"#4a78a8"}}/> Gyengeáram</div><div><i style={{background:"#a77628"}}/> Kapcsolás és világítás</div><div><span className="dash"/> Falon belüli nyomvonal</div><div><span className="solid"/> Falon kívüli nyomvonal</div></div>}