// plan.jsx — interaktywny plan osiedla z pinami usterek (piny rysowane w SVG)
const { useState: u4 } = React;

const CAT_HEX = { hydraulika: '#0891B2', elektryka: '#D97706', winda: '#4F46E5', czystosc: '#0D9488', zielone: '#16A34A', inne: '#475569' };

// piny dla usterek w częściach wspólnych — współrzędne w układzie viewBox (0–360)
const MAP_PINS = [
  { id: 1247, cat: 'winda',    vx: 252, vy: 86,  label: 'Budynek B' },
  { id: 1251, cat: 'czystosc', vx: 176, vy: 201, label: 'Wiata B' },
  { id: 1239, cat: 'zielone',  vx: 92,  vy: 120, label: 'Dziedziniec A' },
];

function PlanOsiedla({ ctx }) {
  const [sel, setSel] = u4(null);
  const selFault = sel != null ? FAULTS.find(f => f.id === sel) : null;

  return (
    <div className="flex flex-col h-full bg-bg">
      <AppBar title="Plan osiedla" sub="Usterki w częściach wspólnych" onBack={ctx.back} />
      <div className="flex-1 overflow-auto app-scroll px-4 pb-10">
        {/* plan — wszystko rysowane w jednym SVG dla spójnego paintu i pozycji */}
        <div className="relative mt-3 rounded-xl overflow-hidden border border-border shadow-sm" style={{ background: 'rgb(var(--c-surface-muted))' }}>
          <svg viewBox="0 0 360 340" className="w-full h-auto block" style={{ display: 'block' }}>
            {/* ścieżki */}
            <path d="M20 195 Q120 165 180 205 T340 185" fill="none" className="stroke-border" strokeWidth="14" strokeLinecap="round" />
            <path d="M150 24 L150 320" fill="none" className="stroke-border" strokeWidth="12" strokeLinecap="round" />
            <path d="M150 24 L150 320" fill="none" stroke="rgb(var(--c-surface))" strokeWidth="2" strokeDasharray="6 7" />
            <path d="M20 195 Q120 165 180 205 T340 185" fill="none" stroke="rgb(var(--c-surface))" strokeWidth="2" strokeDasharray="6 7" />
            {/* dziedziniec / zieleń */}
            <circle cx="80" cy="100" r="60" className="fill-cat-zielone/15 stroke-cat-zielone/30" strokeWidth="1.5" />
            {/* budynki */}
            <g className="fill-surface stroke-border" strokeWidth="2">
              <rect x="192" y="30" width="130" height="90" rx="10" />
              <rect x="206" y="196" width="118" height="116" rx="10" />
              <rect x="28" y="192" width="90" height="124" rx="10" />
              <rect x="150" y="186" width="40" height="30" rx="6" />
            </g>
            {/* parking */}
            <g className="fill-surface-muted stroke-border" strokeWidth="1.5">
              <rect x="34" y="34" width="15" height="24" rx="2" /><rect x="53" y="34" width="15" height="24" rx="2" /><rect x="72" y="34" width="15" height="24" rx="2" />
            </g>
            {/* etykiety */}
            <g className="fill-text-secondary" style={{ fontFamily: '"Plus Jakarta Sans", sans-serif' }} textAnchor="middle">
              <text x="257" y="80" fontSize="17" fontWeight="800">B</text>
              <text x="265" y="259" fontSize="17" fontWeight="800">C</text>
              <text x="73" y="259" fontSize="17" fontWeight="800">A</text>
            </g>
            <g textAnchor="middle">
              <text x="80" y="104" fontSize="10" fontWeight="700" className="fill-cat-zielone" style={{ fontFamily: '"Plus Jakarta Sans", sans-serif' }}>Dziedziniec</text>
              <text x="170" y="204" fontSize="8" className="fill-text-muted" style={{ fontFamily: 'monospace' }}>wiata</text>
              <text x="60" y="26" fontSize="8" className="fill-text-muted" style={{ fontFamily: 'monospace' }}>parking</text>
            </g>
            {/* piny */}
            {MAP_PINS.map(p => {
              const on = sel === p.id, col = CAT_HEX[p.cat];
              return (
                <g key={p.id} onClick={() => setSel(on ? null : p.id)} style={{ cursor: 'pointer' }} role="button" aria-label={`Usterka: ${FAULT_CATS[p.cat].label}, ${p.label}`}>
                  {on && <circle cx={p.vx} cy={p.vy} r="22" fill={col} opacity="0.18" />}
                  <path d={`M${p.vx} ${p.vy + 14} C ${p.vx - 13} ${p.vy} ${p.vx - 13} ${p.vy - 16} ${p.vx} ${p.vy - 16} C ${p.vx + 13} ${p.vy - 16} ${p.vx + 13} ${p.vy} ${p.vx} ${p.vy + 14} Z`} fill={col} stroke="#fff" strokeWidth="2" />
                  <circle cx={p.vx} cy={p.vy - 8} r="9" fill="#fff" opacity="0.95" />
                  <g transform={`translate(${p.vx - 7}, ${p.vy - 15}) scale(0.6)`} fill="none" stroke={col} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">{ICON_PATHS[FAULT_CATS[p.cat].icon]}</g>
                </g>
              );
            })}
          </svg>
        </div>

        {/* legenda */}
        <div className="flex flex-wrap gap-x-4 gap-y-1.5 mt-3">
          {[...new Set(MAP_PINS.map(p => p.cat))].map(c => (
            <span key={c} className="inline-flex items-center gap-1.5 text-[12px] text-text-secondary">
              <span className="w-2.5 h-2.5 rounded-full" style={{ background: CAT_HEX[c] }} />{FAULT_CATS[c].label}
            </span>
          ))}
          <span className="text-[12px] text-text-muted ml-auto">Dotknij pinu, aby zobaczyć szczegóły</span>
        </div>

        {/* karta wybranego pinu / lista */}
        {selFault ? (
          <div className="mt-4 anim-rise"><FaultRow f={selFault} ctx={ctx} /></div>
        ) : (
          <>
            <h2 className="font-display font-700 text-text text-[15px] mt-5 mb-2.5">Wszystkie zgłoszenia na mapie</h2>
            <div className="space-y-2.5">{MAP_PINS.map(p => <FaultRow key={p.id} f={FAULTS.find(f => f.id === p.id)} ctx={ctx} />)}</div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { PlanOsiedla, MAP_PINS, CAT_HEX });