// ui-kit.jsx — shared icons + the Dienstplan product mockup for NuKlaroPlan
// Exports to window: Icon, PlanMockup, Logo

/* ---- minimal stroke icon set (1.75 stroke, rounded) ---- */
const PATHS = {
  building: <><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M9 21v-4h6v4M8 7h0M12 7h0M16 7h0M8 11h0M12 11h0M16 11h0" /></>,
  clock: <><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></>,
  users: <><circle cx="9" cy="8" r="3.2" /><path d="M3.5 19a5.5 5.5 0 0 1 11 0M16 5.2a3.2 3.2 0 0 1 0 5.6M17.5 19a5.5 5.5 0 0 0-2-4.3" /></>,
  calendar: <><rect x="3.5" y="5" width="17" height="15" rx="2" /><path d="M3.5 9.5h17M8 3v4M16 3v4" /></>,
  sum: <><path d="M17 5H7l5 7-5 7h10" /></>,
  send: <><path d="M21 4 3 11l6 2.5L12 20l3-7 6-9zM9 13.5 21 4" /></>,
  check: <path d="M5 12.5 10 17.5 19.5 7" />,
  arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
  spark: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6.3 6.3l2.8 2.8M14.9 14.9l2.8 2.8M17.7 6.3l-2.8 2.8M9.1 14.9l-2.8 2.8" />,
  x: <path d="M6 6l12 12M18 6 6 18" />,
  minus: <path d="M5 12h14" />,
  plus: <path d="M12 5v14M5 12h14" />,
  mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3.5 6.5 8.5 6 8.5-6" /></>,
  shield: <path d="M12 3 5 6v5c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6l-7-3z" />,
  bolt: <path d="M13 3 5 13h6l-1 8 8-10h-6l1-8z" />,
  layers: <path d="M12 3 3 8l9 5 9-5-9-5zM4 12.5 12 17l8-4.5M4 16.5 12 21l8-4.5" />,
};
function Icon({ name, size = 22, stroke = 1.75, style, color }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color || "currentColor"} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {PATHS[name] || null}
    </svg>
  );
}

function Logo({ light = false, size = 21 }) {
  const ink = light ? '#fff' : 'var(--ink)';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden>
        <rect x="1.5" y="1.5" width="29" height="29" rx="9" fill="var(--accent)" />
        <path d="M10 22V10l12 12V10" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: size, letterSpacing: '-0.02em', color: ink }}>
        NuKlaro<span style={{ color: 'var(--accent)' }}>Plan</span>
      </span>
    </div>
  );
}

/* ============================================================
   PlanMockup — the Dienstplan Monatsansicht product UI
   ============================================================ */
const TEAM = [
  ['MS', 'M. Schuster'],
  ['AK', 'A. Krüger'],
  ['LB', 'L. Bauer'],
  ['TN', 'T. Nowak'],
  ['R<', 'R. Vogel'],
  ['JF', 'J. Fischer'],
];
// shift codes per cell — F=Früh S=Spät N=Nacht ·=frei
const ROWS = [
  ['F','F','F','·','·','S','S','S','·','F','F','F','·','·'],
  ['S','S','·','N','N','N','·','S','S','·','F','F','F','·'],
  ['·','F','F','F','·','·','S','S','N','N','·','·','S','S'],
  ['N','·','S','S','S','·','·','F','F','F','·','N','N','·'],
  ['·','·','F','F','S','S','·','·','F','F','S','S','·','N'],
  ['F','S','·','·','N','N','N','·','S','S','·','F','F','F'],
];
const SH = {
  F: ['var(--sh-frueh)', 'var(--sh-frueh-ink)'],
  S: ['var(--sh-spaet)', 'var(--sh-spaet-ink)'],
  N: ['var(--sh-nacht)', 'var(--sh-nacht-ink)'],
  '·': ['var(--sh-frei)', 'var(--sh-frei-ink)'],
};
const WD = ['Mo','Di','Mi','Do','Fr','Sa','So'];

function PlanMockup({ compact = false, style }) {
  const days = compact ? 10 : 14;
  return (
    <div className="plan" style={{ ...style }}>
      {/* toolbar */}
      <div className="plan__bar">
        <div className="plan__bar-l">
          <span className="plan__title">Dienstplan</span>
          <span className="plan__month">
            <Icon name="calendar" size={15} /> Mai 2026
          </span>
          <span className="plan__ver">v3 · aktiv</span>
        </div>
        <div className="plan__bar-r">
          <span className="plan__legend"><i style={{ background: 'var(--sh-frueh)' }} />Früh</span>
          <span className="plan__legend"><i style={{ background: 'var(--sh-spaet)' }} />Spät</span>
          <span className="plan__legend"><i style={{ background: 'var(--sh-nacht)' }} />Nacht</span>
          <span className="plan__send"><Icon name="send" size={14} /> Als PDF senden</span>
        </div>
      </div>

      {/* object tab row */}
      <div className="plan__objs">
        <span className="plan__obj plan__obj--on"><Icon name="building" size={13} /> Objekt Nord</span>
        <span className="plan__obj">Objekt Süd</span>
        <span className="plan__obj">Lagerhalle 4</span>
        <span className="plan__obj plan__obj--add"><Icon name="plus" size={13} /></span>
      </div>

      {/* grid */}
      <div className="plan__grid" style={{ gridTemplateColumns: `132px repeat(${days}, 1fr)` }}>
        {/* header */}
        <div className="plan__cell plan__head plan__name" />
        {Array.from({ length: days }).map((_, i) => (
          <div key={'h' + i} className={'plan__cell plan__head' + ((i % 7) >= 5 ? ' plan__we' : '')}>
            <span className="plan__wd">{WD[i % 7]}</span>
            <span className="plan__date">{i + 1}</span>
          </div>
        ))}
        {/* rows */}
        {TEAM.slice(0, compact ? 5 : 6).map(([ini, name], r) => (
          <React.Fragment key={r}>
            <div className="plan__cell plan__name">
              <span className="plan__ava">{ini}</span>
              <span className="plan__pname">{name}</span>
            </div>
            {ROWS[r].slice(0, days).map((code, c) => {
              const [bg, fg] = SH[code];
              const we = (c % 7) >= 5;
              return (
                <div key={c} className={'plan__cell' + (we ? ' plan__we' : '')}>
                  {code !== '·'
                    ? <span className="plan__shift" style={{ background: bg, color: fg }}>{code}</span>
                    : <span className="plan__free" />}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>

      {/* footer summary */}
      <div className="plan__foot">
        <span><b>6</b> Mitarbeiter</span>
        <span className="plan__dot" />
        <span><b>168</b> Schichten</span>
        <span className="plan__dot" />
        <span className="plan__foot-sum">Σ Stunden automatisch berechnet</span>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Logo, PlanMockup });