// SkinJourney Dashboard — Shell: layout, nav rail, top bar, command palette
const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ── NAV RAIL ──────────────────────────────────────────────────────── */
function NavRail({ route, navigate, pendingCount, practitioner, onCopyCode }) {
  const items = [
    { key: 'overview', label: 'סקירה כללית', icon: 'overview' },
    { key: 'patients', label: 'מטופלות', icon: 'patients' },
    { key: 'appointments', label: 'תורים', icon: 'appointments', badge: pendingCount },
    { key: 'calendar', label: 'יומן', icon: 'calendar' },
    { key: 'settings', label: 'הגדרות', icon: 'settings' },
  ];
  return (
    <aside className="rail">
      <div className="rail-brand">
        <span className="wm wordmark">SkinJourney</span>
        <span className="clinic">{practitioner.clinic_name}</span>
      </div>

      <div className="rail-section">
        <div className="rail-section-label">ניווט</div>
        {items.map((it) => (
          <button
            key={it.key}
            className="rail-item"
            data-active={route.name === it.key}
            onClick={() => navigate({ name: it.key })}
          >
            <Icon name={it.icon} size={18} className="icon" />
            <span className="label">{it.label}</span>
            {it.badge > 0 && <span className="badge">{it.badge}</span>}
          </button>
        ))}
      </div>

      <div className="rail-invite">
        <span className="label">קוד הצטרפות</span>
        <span className="code">{practitioner.invite_code}</span>
        <button onClick={onCopyCode}>
          <Icon name="copy" size={14} />
          <span className="label-text">העתקה</span>
        </button>
      </div>

      <div className="rail-account">
        <Avatar name={practitioner.name} size="sm" />
        <div className="meta" style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {practitioner.name}
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{practitioner.email}</div>
        </div>
        <IconButton icon="logout" onClick={() => navigate({ name: 'login' })} />
      </div>
    </aside>
  );
}

/* ── TOP BAR ───────────────────────────────────────────────────────── */
function TopBar({ route, onOpenPalette, onBookAppointment }) {
  // Crumb logic
  const crumb =
    route.name === 'overview' ? 'סקירה כללית' :
    route.name === 'patients' ? 'מטופלות' :
    route.name === 'patient' ? 'מטופלות' :
    route.name === 'appointments' ? 'תורים' :
    route.name === 'calendar' ? 'יומן' :
    route.name === 'settings' ? 'הגדרות' :
    route.name === 'report' ? 'דוח התקדמות' : '';

  return (
    <header className="topbar">
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>{crumb}</span>
      </div>

      <button
        onClick={onOpenPalette}
        style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '7px 14px 7px 8px',
          borderRadius: 999,
          border: '1px solid var(--border-default)',
          background: 'var(--surface)',
          fontSize: 13, color: 'var(--text-tertiary)',
          minWidth: 280,
          justifyContent: 'space-between',
          cursor: 'pointer',
          transition: 'border-color var(--dur-quick) var(--ease-standard), background var(--dur-quick) var(--ease-standard)',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-default)'; }}
      >
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <Icon name="search" size={14} />
          חיפוש מטופלות, תורים, פעולות…
        </span>
        <span style={{
          fontSize: 11, fontWeight: 600,
          background: 'var(--sand-200)', border: '1px solid var(--border-default)',
          padding: '2px 7px', borderRadius: 6, color: 'var(--text-tertiary)',
          direction: 'ltr',
        }}>⌘K</span>
      </button>

      <Button kind="primary" size="sm" icon="plus" onClick={onBookAppointment}>קבע תור חדש</Button>
      <IconButton icon="bell" />
    </header>
  );
}

/* ── COMMAND PALETTE (⌘K) ──────────────────────────────────────────── */
function CommandPalette({ open, onClose, navigate, onBook, onCopyCode }) {
  const [q, setQ] = useState('');
  const [idx, setIdx] = useState(0);
  const inputRef = useRef(null);

  useEffect(() => {
    if (open) { setQ(''); setIdx(0); setTimeout(() => inputRef.current && inputRef.current.focus(), 30); }
  }, [open]);

  const allCommands = useMemo(() => {
    const cmds = [
      { id: 'go-overview', kind: 'page', label: 'סקירה כללית', icon: 'overview', action: () => navigate({ name: 'overview' }) },
      { id: 'go-patients', kind: 'page', label: 'מטופלות', icon: 'patients', action: () => navigate({ name: 'patients' }) },
      { id: 'go-appointments', kind: 'page', label: 'תורים', icon: 'appointments', action: () => navigate({ name: 'appointments' }) },
      { id: 'go-calendar', kind: 'page', label: 'יומן', icon: 'calendar', action: () => navigate({ name: 'calendar' }) },
      { id: 'go-settings', kind: 'page', label: 'הגדרות', icon: 'settings', action: () => navigate({ name: 'settings' }) },
      { id: 'act-book', kind: 'action', label: 'קבע תור חדש', icon: 'plus', action: onBook, hint: 'B' },
      { id: 'act-copy-code', kind: 'action', label: 'העתק את קוד ההצטרפות שלי', icon: 'copy', action: onCopyCode, hint: 'C' },
      { id: 'act-share', kind: 'action', label: 'שלח קישור חיבור בוואטסאפ', icon: 'share', action: onCopyCode },
    ];
    SJ_DATA.PATIENTS.forEach((p) => {
      cmds.push({
        id: `p-${p.id}`, kind: 'patient', label: p.name,
        sub: `${p.age} · עור ${p.skin_label} · ${p.photo_count} תמונות`,
        avatar: p.name,
        action: () => navigate({ name: 'patient', id: p.id }),
      });
    });
    return cmds;
  }, [navigate, onBook, onCopyCode]);

  const filtered = useMemo(() => {
    if (!q.trim()) return allCommands;
    const needle = q.toLowerCase();
    return allCommands.filter((c) => (c.label + ' ' + (c.sub || '')).toLowerCase().includes(needle));
  }, [q, allCommands]);

  useEffect(() => { setIdx(0); }, [q]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'ArrowDown') { e.preventDefault(); setIdx((i) => Math.min(i + 1, filtered.length - 1)); }
      else if (e.key === 'ArrowUp') { e.preventDefault(); setIdx((i) => Math.max(0, i - 1)); }
      else if (e.key === 'Enter') {
        e.preventDefault();
        const item = filtered[idx];
        if (item) { item.action(); onClose(); }
      }
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, idx, filtered, onClose]);

  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose} style={{ alignItems: 'flex-start', paddingTop: '12vh' }}>
      <div className="modal" style={{ maxWidth: 600 }} onClick={(e) => e.stopPropagation()}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '18px 22px', borderBottom: '1px solid var(--border-subtle)' }}>
          <Icon name="search" size={18} style={{ color: 'var(--text-tertiary)' }} />
          <input
            ref={inputRef}
            value={q} onChange={(e) => setQ(e.target.value)}
            placeholder="חיפוש מטופלות, פעולות, ניווט…"
            style={{
              flex: 1, border: 'none', outline: 'none', background: 'transparent',
              fontSize: 16, color: 'var(--text-primary)', fontFamily: 'inherit',
            }}
          />
          <span style={{
            fontSize: 11, fontWeight: 600, padding: '3px 8px',
            background: 'var(--sand-200)', borderRadius: 6, color: 'var(--text-tertiary)',
            direction: 'ltr',
          }}>ESC</span>
        </div>

        <div style={{ maxHeight: '50vh', overflow: 'auto', padding: 8 }}>
          {filtered.length === 0 && (
            <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-tertiary)', fontSize: 14 }}>
              לא נמצאו תוצאות עבור “{q}”
            </div>
          )}
          {(() => {
            const groups = [
              { key: 'page', label: 'ניווט' },
              { key: 'action', label: 'פעולות' },
              { key: 'patient', label: 'מטופלות' },
            ];
            return groups.map((g) => {
              const items = filtered.filter((c) => c.kind === g.key);
              if (items.length === 0) return null;
              return (
                <div key={g.key} style={{ marginBottom: 8 }}>
                  <div style={{ padding: '6px 12px 4px', fontSize: 11, fontWeight: 700, color: 'var(--text-tertiary)', letterSpacing: 0.6, textTransform: 'uppercase' }}>
                    {g.label}
                  </div>
                  {items.map((c) => {
                    const i = filtered.indexOf(c);
                    const active = i === idx;
                    return (
                      <button key={c.id}
                        onClick={() => { c.action(); onClose(); }}
                        onMouseEnter={() => setIdx(i)}
                        style={{
                          display: 'flex', alignItems: 'center', gap: 12,
                          width: '100%', padding: '9px 12px',
                          background: active ? 'var(--sage-50)' : 'transparent',
                          color: active ? 'var(--sage-700)' : 'var(--text-primary)',
                          border: 'none', borderRadius: 10, cursor: 'pointer',
                          fontFamily: 'inherit', textAlign: 'start',
                        }}>
                        {c.kind === 'patient'
                          ? <Avatar name={c.avatar} size="sm" />
                          : <span style={{
                              width: 28, height: 28, borderRadius: 8,
                              background: active ? 'var(--sage-100)' : 'var(--sand-200)',
                              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                              color: active ? 'var(--sage-700)' : 'var(--text-secondary)',
                              flexShrink: 0,
                            }}>
                              <Icon name={c.icon} size={14} />
                            </span>
                        }
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                            {c.label}
                          </div>
                          {c.sub && <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 2 }}>{c.sub}</div>}
                        </div>
                        {c.hint && (
                          <span style={{
                            fontSize: 11, fontWeight: 600, padding: '2px 6px',
                            background: 'var(--sand-200)', borderRadius: 5, color: 'var(--text-tertiary)',
                            direction: 'ltr',
                          }}>{c.hint}</span>
                        )}
                      </button>
                    );
                  })}
                </div>
              );
            });
          })()}
        </div>

        <div style={{
          padding: '10px 18px', borderTop: '1px solid var(--border-subtle)',
          background: 'var(--sand-100)', borderRadius: '0 0 var(--radius-2xl) var(--radius-2xl)',
          display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-tertiary)',
        }}>
          <span><strong style={{ direction: 'ltr' }}>↑↓</strong> נווט</span>
          <span><strong style={{ direction: 'ltr' }}>↵</strong> בחירה</span>
          <span><strong>ESC</strong> סגור</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NavRail, TopBar, CommandPalette });