// inbox.jsx — main inbox UI: rail + sidebar + chat view
const { useState, useEffect, useRef, useMemo } = React;

const formatTime = (t) => {
  const d = new Date(t);
  const now = new Date();
  const sameDay = d.toDateString() === now.toDateString();
  const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1);
  const isYesterday = d.toDateString() === yesterday.toDateString();
  if (sameDay) return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
  if (isYesterday) return 'Gestern';
  const diff = (now - d) / (1000 * 60 * 60 * 24);
  if (diff < 7) return d.toLocaleDateString('de-DE', { weekday: 'short' });
  return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
};

const formatTimeFull = (t) =>
  new Date(t).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });

const dayKey = (t) => {
  const d = new Date(t);
  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
};

const dayLabel = (t) => {
  const d = new Date(t);
  const now = new Date();
  if (d.toDateString() === now.toDateString()) return 'Heute';
  const y = new Date(now); y.setDate(now.getDate() - 1);
  if (d.toDateString() === y.toDateString()) return 'Gestern';
  return d.toLocaleDateString('de-DE', { weekday: 'long', day: '2-digit', month: 'long' });
};

function Avatar({ chat, size = 36, online }) {
  const { initialsFor } = window.AppData;
  // Wenn IG-Profilbild vorhanden: zeige als img. Sonst clean Initial-Avatar.
  const hasPic = !!chat.profilePic;
  const [failed, setFailed] = useState(false);
  if (hasPic && !failed) {
    return (
      <div className={'avatar avatar-img-wrap' + (online ? ' online' : '')} style={{ width: size, height: size }}>
        <img
          className="avatar-img"
          src={chat.profilePic}
          alt=""
          onError={() => setFailed(true)}
          referrerPolicy="no-referrer"
        />
      </div>
    );
  }
  const initial = (initialsFor(chat.name) || '?').trim().charAt(0).toUpperCase();
  return (
    <div
      className={'avatar avatar-initial' + (online ? ' online' : '')}
      style={{ width: size, height: size, fontSize: Math.round(size * 0.42) }}
      aria-label={chat.name}
    >
      {initial}
    </div>
  );
}

function ChatItem({ chat, active, onClick }) {
  const last = chat.messages.length > 0 ? chat.messages[chat.messages.length - 1] : null;
  const isUnread = chat.unread > 0;
  const lastFromUs = last?.from === 'us';
  const whoTag = lastFromUs
    ? (last.author === 'ai' ? { type: 'ai', label: 'KI' } : { type: 'staff', label: 'Du' })
    : null;
  const snippet = last?.text || (last?.image ? '📷 Bild' : '');
  const time = last?.t || null;

  const isRequest = chat.inMessageRequests;
  const isPinned = chat.pinned;
  const kiOn = chat.aiEnabled && !chat.aiPaused;
  const modeClass = isRequest ? 'mode-request' : (kiOn ? 'mode-ki' : 'mode-human');
  return (
    <div
      className={'chat-item ' + modeClass + (active ? ' active' : '') + (isUnread ? ' unread' : '') + (isRequest ? ' is-request' : '') + (isPinned ? ' is-pinned' : '')}
      onClick={onClick}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
      role="button"
      tabIndex={0}
      aria-pressed={active}
      aria-label={`Chat mit ${chat.handle}${isPinned ? ', angepinnt' : ''}${isUnread ? `, ${chat.unread} ungelesen` : ''}${isRequest ? ', Instagram-Anfrage' : ''}`}
    >
      <Avatar chat={chat} online={chat.online} />
      <div className="chat-meta">
        <div className="chat-name-row">
          <span className="chat-name">{chat.name || `@${chat.handle}`}</span>
          {time && <span className="chat-time">{formatTime(time)}</span>}
        </div>
        <div className="chat-snippet">
          {whoTag && <span className={'who-tag ' + whoTag.type}>{whoTag.label}:</span>}
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {snippet || <em style={{ color: 'var(--text-dim)' }}>Noch keine Nachrichten</em>}
          </span>
        </div>
        {Array.isArray(chat.tags) && chat.tags.length > 0 && (
          <div className="chat-tag-row">
            {chat.tags.slice(0, 3).map((t) => (
              <span key={t} className="chat-tag-mini">{t}</span>
            ))}
          </div>
        )}
      </div>
      <div className="chat-status">
        {chat.staffNote && (
          <Icon.Pin width="9" height="9" className="note-mini" aria-label="Hat Notiz" />
        )}
        {isPinned && <Icon.Pin width="11" height="11" className="pin-mini" />}
        {isUnread ? (
          <div className="unread-badge">{chat.unread}</div>
        ) : (
          <div
            className={'mode-dot ' + (isRequest ? 'mode-dot-request' : (kiOn ? 'mode-dot-ki' : 'mode-dot-human'))}
            title={isRequest ? 'Instagram-Anfrage' : (kiOn ? 'KI antwortet' : 'Mensch übernimmt')}
          />
        )}
      </div>
    </div>
  );
}

function MessageBubble({ msg, prevFromSame }) {
  const fromUs = msg.from === 'us';
  const author = msg.author; // 'ai' | 'staff' | undefined (for them)
  const isImage = !!msg.image;
  const sending = !!msg._sending;
  const error   = msg._error || null;

  // Source-specific class (dashboard | ig_app | ai) — enables visual split per origin
  const sourceClass = fromUs && msg.source ? ' src-' + msg.source : '';
  // Badge text per source
  let whoBadge = null;
  if (fromUs && author === 'ai') {
    whoBadge = <span className="who ai">✦ KI-Antwort</span>;
  } else if (fromUs && msg.source === 'dashboard') {
    whoBadge = <span className="who staff dashboard">{msg.authorName || 'Studio'}</span>;
  } else if (fromUs && msg.source === 'ig_app') {
    whoBadge = <span className="who staff ig-app">{msg.authorName || 'Direkt aus Instagram'}</span>;
  } else if (fromUs && author === 'staff') {
    whoBadge = <span className="who staff">{msg.authorName || 'Du'}</span>;
  }

  return (
    <div className={'msg-row ' + (fromUs ? 'from-us ' + author + sourceClass : 'from-them')}>
      <div>
        <div
          className={'msg-bubble' + (isImage ? ' no-pad' : '') + (sending ? ' sending' : '') + (error ? ' send-error' : '')}
          style={sending ? { opacity: 0.6 } : (error ? { borderColor: 'var(--danger, #c53030)' } : null)}
        >
          {isImage ? (
            <img src={msg.image} className="msg-image" alt="" />
          ) : (
            msg.text
          )}
        </div>
        <div className="msg-meta">
          {whoBadge}
          <span>{formatTimeFull(msg.t)}</span>
          {sending && <span style={{ color: 'var(--text-dim)' }}>· wird gesendet …</span>}
          {error && (
            <span style={{ color: 'var(--danger, #c53030)' }}>· Senden fehlgeschlagen ({error})</span>
          )}
        </div>
      </div>
    </div>
  );
}

function AIToggle({ on, onChange, label = 'KI aktiv', compact = false }) {
  // Compact-Mode (Sidebar global): kleines Pill im Cream-Gold-Style,
  // gleicher Look wie Instagram-DMs-Pill — Label "KI an" bzw "KI aus"
  const text = compact
    ? (on ? 'KI an' : 'KI aus')
    : (on ? `${label} · aktiv` : 'KI aus');
  return (
    <button
      className={'ai-toggle' + (on ? ' on' : '') + (compact ? ' compact' : '')}
      onClick={() => onChange(!on)}
      role="switch"
      aria-checked={on}
      aria-label={label + (on ? ' (aktiv)' : ' (aus)')}
      title={on ? 'KI antwortet automatisch — klick zum Pausieren' : 'KI ist deaktiviert — klick zum Aktivieren'}
    >
      <span className="ai-dot"></span>
      <span className="label-text">{text}</span>
      {!compact && <span className="switch"></span>}
    </button>
  );
}

function NoticeBar({ chat, onResume }) {
  if (!chat.aiPaused) return null;
  return (
    <div className="notice-bar">
      <div className="icon"><Icon.Pause width="14" height="14" /></div>
      <div className="text">
        <strong>KI pausiert</strong> — {chat.pauseReason || 'Du hast in diesem Chat geantwortet, die KI greift nicht mehr ein.'}
      </div>
      <button onClick={onResume}>KI wieder aktivieren</button>
    </div>
  );
}

const COMMON_EMOJIS = [
  '😀','😂','😍','🥰','😊','😎','🤔','😅','🙏','👍',
  '👏','💪','✨','🔥','💯','❤️','💛','💚','🖤','✅',
  '🙌','👀','🎉','🚀','💎','⭐','📍','📅','💬','😘'
];

const DEFAULT_QUICK_REPLIES = [
  { slash: '/danke',  label: 'Bedanken',      text: 'Vielen Dank für deine Nachricht. Wir melden uns in Kürze.' },
  { slash: '/preis',  label: 'Preis',         text: 'Da jedes Tattoo individuell ist, hängen die Kosten immer vom Motiv, der Größe und dem Aufwand ab. Den finalen Preis besprechen wir transparent im kostenlosen Beratungsgespräch.' },
  { slash: '/termin', label: 'Buchungslink',  text: 'Buchungslink: https://dub.sh/tattoo.fashion.la' },
  { slash: '/bilder', label: 'Referenzbilder', text: 'Schick mir gerne 1-2 Referenzbilder, dann kann ich dir besser helfen.' },
  { slash: '/azubi',  label: 'Azubi-Angebot',  text: 'Bei unseren Auszubildenden sind Halbtage 150 € und Ganztage 300 €, alles unter Supervision.' },
  { slash: '/coverup', label: 'Cover-Up',     text: 'Ja, Cover-Ups sind möglich. Schick mir kurz ein Foto vom bestehenden Tattoo plus Stelle und Größe, dann besprechen wir, was realistisch drüber geht.' },
];

const TAGS_CATALOG = [
  { key: 'lead-heiss',  label: '🔥 Lead heiß' },
  { key: 'beratung',    label: '💬 Beratung gewünscht' },
  { key: 'termin-offen', label: '📅 Termin offen' },
  { key: 'termin-gebucht', label: '✅ Termin gebucht' },
  { key: 'wartet',       label: '⏸ Wartet auf Antwort' },
  { key: 'kein-interesse', label: '❌ Kein Interesse' },
];

function EmojiPicker({ onPick, onClose }) {
  useEffect(() => {
    const handler = (e) => {
      if (!e.target.closest('.emoji-picker') && !e.target.closest('.emoji-trigger')) onClose();
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [onClose]);
  return (
    <div className="emoji-picker" role="dialog" aria-label="Emoji auswählen">
      {COMMON_EMOJIS.map((e) => (
        <button
          key={e}
          type="button"
          className="emoji-btn"
          onClick={() => { onPick(e); onClose(); }}
          aria-label={`Emoji ${e}`}
        >{e}</button>
      ))}
    </div>
  );
}

function QuickReplyPicker({ replies, onPick, onClose }) {
  useEffect(() => {
    const handler = (e) => {
      if (!e.target.closest('.quick-picker') && !e.target.closest('.quick-trigger') && !e.target.closest('.composer-input')) onClose();
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [onClose]);
  return (
    <div className="quick-picker" role="listbox" aria-label="Schnellantworten">
      <div className="quick-picker-header">Schnellantworten</div>
      {replies.map((r) => (
        <button
          key={r.slash}
          type="button"
          className="quick-row"
          onClick={() => { onPick(r); }}
        >
          <span className="quick-slash">{r.slash}</span>
          <span className="quick-label">{r.label}</span>
          <span className="quick-preview">{r.text.slice(0, 70)}{r.text.length > 70 ? '…' : ''}</span>
        </button>
      ))}
    </div>
  );
}

function CustomerProfile({ chat, onTagsChange, onNoteChange, onClose }) {
  const [noteText, setNoteText] = useState(chat.staffNote || '');
  const [noteDirty, setNoteDirty] = useState(false);
  useEffect(() => {
    setNoteText(chat.staffNote || '');
    setNoteDirty(false);
  }, [chat.id, chat.staffNote]);

  const saveNote = () => {
    if (onNoteChange) onNoteChange(noteText);
    setNoteDirty(false);
  };

  const toggleTag = (key) => {
    const current = Array.isArray(chat.tags) ? chat.tags : [];
    const next = current.includes(key)
      ? current.filter((t) => t !== key)
      : [...current, key];
    if (onTagsChange) onTagsChange(next);
  };

  const currentTags = Array.isArray(chat.tags) ? chat.tags : [];
  const messageCount = Array.isArray(chat.messages) ? chat.messages.length : 0;

  return (
    <aside className="customer-profile" aria-label="Kundenprofil">
      <div className="customer-profile-head">
        <button
          type="button"
          className="icon-btn"
          onClick={onClose}
          aria-label="Profil schliessen"
          title="Profil schliessen"
        ><Icon.X /></button>
      </div>
      <div className="customer-profile-avatar">
        <Avatar chat={chat} size={84} />
      </div>
      <div className="customer-profile-name">{chat.name || `@${chat.handle}`}</div>
      <div className="customer-profile-handle">
        <Icon.Instagram width="11" height="11" />
        <a
          href={`https://instagram.com/${chat.handle}`}
          target="_blank"
          rel="noopener noreferrer"
        >@{chat.handle}</a>
      </div>

      <div className="customer-profile-stats">
        <div className="stat">
          <span className="stat-label">Erster Kontakt</span>
          <span className="stat-value">{chat.customer?.firstSeen || '—'}</span>
        </div>
        <div className="stat">
          <span className="stat-label">Nachrichten</span>
          <span className="stat-value">{messageCount}</span>
        </div>
      </div>

      <div className="customer-profile-section">
        <div className="customer-profile-section-title">Tags</div>
        <div className="tag-picker">
          {TAGS_CATALOG.map((t) => (
            <button
              key={t.key}
              type="button"
              className={'tag-chip' + (currentTags.includes(t.key) ? ' active' : '')}
              onClick={() => toggleTag(t.key)}
            >{t.label}</button>
          ))}
        </div>
      </div>

      <div className="customer-profile-section">
        <div className="customer-profile-section-title">Notiz</div>
        <textarea
          className="staff-note"
          rows={5}
          value={noteText}
          placeholder="Interne Notiz zum Kunden …"
          onChange={(e) => { setNoteText(e.target.value); setNoteDirty(true); }}
          onBlur={() => { if (noteDirty) saveNote(); }}
        />
        {noteDirty && (
          <button type="button" className="btn-primary" onClick={saveNote}>Speichern</button>
        )}
      </div>
    </aside>
  );
}

function ChatView({ chat, onSend, onToggleAI, onResumeAI, onBack, mode, readOnly, onPin, onArchive, onDelete, onTagsChange, onNoteChange, profileOpen, onToggleProfile }) {
  const [text, setText] = useState('');
  const [attachments, setAttachments] = useState([]);
  const [emojiOpen, setEmojiOpen] = useState(false);
  const [quickOpen, setQuickOpen] = useState(false);
  const messagesRef = useRef(null);
  const fileInputRef = useRef(null);
  const textareaRef = useRef(null);

  // Slash-command Quick-Reply autosuggest
  const slashMatch = text.match(/(^|\s)(\/[a-zäöü]*)$/i);
  const slashTerm = slashMatch ? slashMatch[2].toLowerCase() : null;
  const matchingReplies = slashTerm
    ? DEFAULT_QUICK_REPLIES.filter((r) => r.slash.startsWith(slashTerm))
    : [];

  const insertText = (replacement) => {
    const ta = textareaRef.current;
    if (!ta) { setText((t) => t + replacement); return; }
    const start = ta.selectionStart || 0;
    const end = ta.selectionEnd || 0;
    const next = text.slice(0, start) + replacement + text.slice(end);
    setText(next);
    requestAnimationFrame(() => {
      ta.focus();
      const pos = start + replacement.length;
      ta.selectionStart = ta.selectionEnd = pos;
    });
  };

  const insertEmoji = (emoji) => insertText(emoji);

  const applyQuickReply = (reply) => {
    if (slashMatch) {
      // remove the typed slash-command and replace with reply text
      const before = text.slice(0, text.length - slashMatch[2].length);
      const next = before + reply.text;
      setText(next);
      requestAnimationFrame(() => {
        const ta = textareaRef.current;
        if (ta) { ta.focus(); ta.selectionStart = ta.selectionEnd = next.length; }
      });
    } else {
      insertText(reply.text);
    }
    setQuickOpen(false);
  };

  useEffect(() => {
    if (messagesRef.current) {
      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
    }
  }, [chat.id, chat.messages.length]);

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 140) + 'px';
    }
  }, [text]);

  const send = () => {
    if (!text.trim() && attachments.length === 0) return;
    onSend(text.trim(), attachments);
    setText('');
    setAttachments([]);
  };

  const onKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      send();
    }
  };

  const onFile = (e) => {
    const files = Array.from(e.target.files || []);
    const newAtts = files.map((f) => ({ id: Math.random().toString(36).slice(2), url: URL.createObjectURL(f), name: f.name }));
    setAttachments([...attachments, ...newAtts]);
    e.target.value = '';
  };

  // group by day
  const grouped = useMemo(() => {
    const g = [];
    let curKey = null;
    let curDay = null;
    chat.messages.forEach((m, i) => {
      const k = dayKey(m.t);
      if (k !== curKey) {
        curKey = k;
        curDay = { key: k, label: dayLabel(m.t), msgs: [] };
        g.push(curDay);
      }
      curDay.msgs.push(m);
    });
    return g;
  }, [chat.messages]);

  return (
    <div className="main">
      <div className="chat-header">
        <button className="back-btn" onClick={onBack}>
          <Icon.ChevronLeft width="20" height="20" />
        </button>
        <Avatar chat={chat} size={40} online={chat.online} />
        <div className="chat-header-info">
          <div className="chat-header-name">{chat.name}</div>
          <div className="chat-header-handle">
            <Icon.Instagram width="11" height="11" />
            @{chat.handle}
            {chat.online && <span style={{ color: 'var(--success)' }}>· online</span>}
          </div>
        </div>
        <div className="chat-header-actions">
          <AIToggle
            on={chat.aiEnabled && !chat.aiPaused}
            onChange={onToggleAI}
            label="KI antwortet"
          />
          <button
            className={'icon-btn' + (profileOpen ? ' active' : '')}
            onClick={() => onToggleProfile && onToggleProfile()}
            title="Kundenprofil"
            aria-label="Kundenprofil"
            aria-pressed={profileOpen}
          ><Icon.Verified /></button>
          <button
            className={'icon-btn' + (chat.pinned ? ' active' : '')}
            onClick={() => onPin && onPin(!chat.pinned)}
            title={chat.pinned ? 'Anpinnen entfernen' : 'Chat anpinnen'}
            aria-label={chat.pinned ? 'Anpinnen entfernen' : 'Chat anpinnen'}
            aria-pressed={chat.pinned}
          ><Icon.Pin /></button>
          <button
            className="icon-btn"
            onClick={() => onArchive && onArchive(!chat.archived)}
            title={chat.archived ? 'Aus Archiv zurueck' : 'Chat archivieren'}
            aria-label={chat.archived ? 'Aus Archiv zurueck' : 'Chat archivieren'}
          ><Icon.Archive /></button>
          <button
            className="icon-btn danger"
            onClick={() => onDelete && onDelete()}
            title="Chat löschen"
            aria-label="Chat löschen"
          ><Icon.Trash /></button>
        </div>
      </div>

      <NoticeBar chat={chat} onResume={onResumeAI} />
      {chat.inMessageRequests && (
        <div className="request-banner">
          <div className="request-banner-text">
            <strong>Instagram-Anfrage</strong>
            <span>
              {chat.handle} folgt euch nicht — die KI-Antwort wartet, bis ihr in der Instagram-App auf <em>Akzeptieren</em> tippt. Danach geht alles automatisch.
            </span>
          </div>
          <a
            className="request-banner-cta"
            href="https://www.instagram.com/direct/inbox/"
            target="_blank"
            rel="noopener noreferrer"
          >
            In Instagram öffnen
          </a>
        </div>
      )}

      <div className="messages" ref={messagesRef}>
        {grouped.map((g) => (
          <React.Fragment key={g.key}>
            <div className="day-divider">{g.label}</div>
            {g.msgs.map((m, i) => (
              <MessageBubble key={m.id} msg={m} />
            ))}
          </React.Fragment>
        ))}
      </div>

      <div className="composer">
        {attachments.length > 0 && (
          <div className="composer-attach-preview">
            {attachments.map((a) => (
              <div key={a.id} className="attach-preview">
                <img src={a.url} alt={a.name} />
                <button
                  className="remove"
                  onClick={() => setAttachments(attachments.filter((x) => x.id !== a.id))}
                >×</button>
              </div>
            ))}
          </div>
        )}
        <div className="composer-row">
          <div className="composer-actions">
            <button
              className="icon-btn"
              onClick={() => fileInputRef.current?.click()}
              title="Bild anhängen"
              disabled={readOnly}
            >
              <Icon.Image />
            </button>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              multiple
              style={{ display: 'none' }}
              onChange={onFile}
              disabled={readOnly}
            />
          </div>
          <textarea
            ref={textareaRef}
            className="composer-input"
            placeholder={readOnly
              ? 'Composer deaktiviert'
              : `Antwort an @${chat.handle} …`}
            value={text}
            onChange={(e) => setText(e.target.value)}
            onKeyDown={onKeyDown}
            rows={1}
            disabled={readOnly}
          />
          <div className="composer-actions emoji-wrap">
            <button
              type="button"
              className="icon-btn quick-trigger"
              onClick={() => setQuickOpen((v) => !v)}
              title="Schnellantworten (oder /tippen)"
              aria-label="Schnellantworten oeffnen"
              aria-expanded={quickOpen}
              disabled={readOnly}
            ><Icon.Sparkle /></button>
            <button
              type="button"
              className="icon-btn"
              onClick={() => insertText('https://dub.sh/tattoo.fashion.la')}
              title="Buchungslink einfuegen"
              aria-label="Buchungslink einfuegen"
              disabled={readOnly}
            ><Icon.Calendar /></button>
            <button
              type="button"
              className="icon-btn emoji-trigger"
              onClick={() => setEmojiOpen((v) => !v)}
              title="Emoji"
              aria-label="Emoji einfuegen"
              aria-expanded={emojiOpen}
              disabled={readOnly}
            ><Icon.Smile /></button>
            {emojiOpen && <EmojiPicker onPick={insertEmoji} onClose={() => setEmojiOpen(false)} />}
            {(quickOpen || matchingReplies.length > 0) && (
              <QuickReplyPicker
                replies={matchingReplies.length > 0 ? matchingReplies : DEFAULT_QUICK_REPLIES}
                onPick={applyQuickReply}
                onClose={() => setQuickOpen(false)}
              />
            )}
            <button
              className="btn-send"
              onClick={send}
              disabled={readOnly || (!text.trim() && attachments.length === 0)}
              aria-label="Senden"
            >
              <Icon.Send />
            </button>
          </div>
        </div>
        <div className="composer-hint">
          <span>{readOnly
            ? 'Composer deaktiviert'
            : (chat.aiPaused
              ? '⏸ KI pausiert — deine Antwort geht direkt raus'
              : (chat.aiEnabled
                ? '✦ KI antwortet automatisch — sobald du tippst & sendest, übernimmst du'
                : 'KI ist aus — du antwortest manuell'))}
          </span>
          <span><kbd>Enter</kbd> senden · <kbd>Shift</kbd>+<kbd>Enter</kbd> Zeile</span>
        </div>
      </div>
    </div>
  );
}

function EmptyState({ empty, archived }) {
  if (archived) {
    return (
      <div className="main">
        <div className="empty-state">
          <div className="empty-icon"><Icon.Archive width="24" height="24" /></div>
          <h3>ARCHIV-ANSICHT</h3>
          <p>Hier landen alle Chats, die du archiviert hast. Klick links auf einen Chat um ihn wieder zu öffnen oder über das Archiv-Icon im Chat-Header zurück zu holen.</p>
        </div>
      </div>
    );
  }
  if (empty) {
    return (
      <div className="main">
        <div className="empty-state">
          <div className="empty-icon"><Icon.Inbox width="24" height="24" /></div>
          <h3>NOCH KEINE CHATS</h3>
          <p>Sobald die erste Instagram-DM beim Studio reinkommt, taucht sie hier auf. Die n8n-Pipeline schreibt jeden Webhook-Hit direkt in die Datenbank, und die Liste links aktualisiert sich live.</p>
        </div>
      </div>
    );
  }
  return (
    <div className="main">
      <div className="empty-state">
        <div className="empty-icon"><Icon.Inbox width="24" height="24" /></div>
        <h3>WÄHLE EINEN CHAT</h3>
        <p>Wähle links eine Konversation, um den Verlauf zu sehen und zu antworten. Die KI beantwortet neue Anfragen automatisch — sobald du tippst, übernimmst du.</p>
      </div>
    </div>
  );
}

function Rail({ globalAI, onToggleGlobalAI, user, onLogout, view, onToggleView }) {
  const handleAvatarClick = () => {
    if (typeof onLogout === 'function') onLogout();
  };
  const isInbox = view !== 'archive';
  return (
    <div className="rail">
      <div className="rail-logo" title="Tattoo Fashion">
        <svg viewBox="0 0 24 24" fill="var(--accent, var(--gold))" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 7c2-2 5-3 9-3s7 1 9 3l-2 2c-1.5-1.5-4-2.5-7-2.5S6.5 7.5 5 9L3 7zm2 4c4 1 8 1 14 0l-1 9c-.2 1.5-1.4 2.5-3 2.5h-6c-1.6 0-2.8-1-3-2.5l-1-9z" opacity="0.85"/>
        </svg>
      </div>
      <button
        className={'rail-btn' + (isInbox ? ' active' : '')}
        title="Inbox"
        aria-label="Inbox"
        aria-current={isInbox ? 'page' : undefined}
        onClick={() => { if (!isInbox && onToggleView) onToggleView(); }}
      ><Icon.Inbox /></button>
      <button
        className={'rail-btn' + (!isInbox ? ' active' : '')}
        title="Archiv"
        aria-label="Archiv"
        aria-current={!isInbox ? 'page' : undefined}
        onClick={() => { if (isInbox && onToggleView) onToggleView(); }}
      ><Icon.Archive /></button>
      <div className="rail-spacer"></div>
      <button
        className="rail-avatar"
        onClick={handleAvatarClick}
        title={`${user?.email || ''} — klick zum Abmelden`}
        style={{ border: 'none', cursor: 'pointer' }}
      >
        {(user?.name?.[0] || user?.email?.[0] || 'U').toUpperCase()}
      </button>
    </div>
  );
}

function Sidebar({ chats, allChats, activeId, onSelect, query, setQuery, filter, setFilter, globalAI, onToggleGlobalAI, user, onLogout, view, todayStats }) {
  // Counts IMMER aus allChats (unfiltered) — sonst veraendern sich beim Filtern die Zahlen
  const base = Array.isArray(allChats) && allChats.length ? allChats : chats;
  const totalUnread = base.reduce((s, c) => s + (c.unread || 0), 0);
  const aiCount = base.filter((c) => c.aiEnabled && !c.aiPaused).length;
  const humanCount = base.filter((c) => c.aiPaused || !c.aiEnabled).length;
  const requestsCount = base.filter((c) => c.inMessageRequests).length;
  const isArchive = view === 'archive';

  return (
    <div className="sidebar">
      <div className="global-header">
        <div className="studio-info">
          <img src="assets/logo.png" alt="Tattoo Fashion" />
        </div>
        <AIToggle on={globalAI} onChange={onToggleGlobalAI} label="KI Global" compact={true} />
        {onLogout && (
          <button
            type="button"
            className="mobile-logout-btn"
            onClick={() => { if (confirm('Wirklich abmelden?')) onLogout(); }}
            aria-label="Abmelden"
            title={user?.email ? `${user.email} — Abmelden` : 'Abmelden'}
          >
            ⏻
          </button>
        )}
      </div>

      {todayStats && todayStats.total > 0 && !isArchive && (
        <div className="day-stats-banner">
          <strong>Heute:</strong>
          <span>{todayStats.total} aktiv</span>
          <span>·</span>
          <span className="stat-ki">{todayStats.aiAnswered} KI</span>
          <span>·</span>
          <span className="stat-wait">{todayStats.waiting} warten</span>
        </div>
      )}
      <div className="sidebar-header">
        <div className="sidebar-title-row">
          <h2 className="sidebar-title">{isArchive ? 'Archiv' : 'Inbox'}</h2>
          <span className="platform-pill">
            <span className="ig-dot"></span>
            Instagram DMs
          </span>
        </div>
        <div className="search-wrap">
          <Icon.Search />
          <input
            className="search-input"
            placeholder="In Chats suchen …"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </div>
      </div>

      <div className="filter-row">
        <button
          className={'filter-pill' + (filter === 'all' ? ' active' : '')}
          onClick={() => setFilter('all')}
        >
          Alle <span className="count">{base.length}</span>
        </button>
        <button
          className={'filter-pill ki' + (filter === 'ki' ? ' active' : '')}
          onClick={() => setFilter('ki')}
          title="Chats in denen die KI gerade antwortet"
        >
          KI-Chats <span className="count">{aiCount}</span>
        </button>
        <button
          className={'filter-pill human' + (filter === 'human' ? ' active' : '')}
          onClick={() => setFilter('human')}
          title="Chats in denen der Mensch uebernommen hat"
        >
          Mensch <span className="count">{humanCount}</span>
        </button>
        <button
          className={'filter-pill' + (filter === 'unread' ? ' active' : '')}
          onClick={() => setFilter('unread')}
        >
          Ungelesen <span className="count">{totalUnread}</span>
        </button>
        {requestsCount > 0 && (
          <button
            className={'filter-pill requests' + (filter === 'requests' ? ' active' : '')}
            onClick={() => setFilter('requests')}
            title="Instagram-Anfragen — Akzeptanz im Insta-App erforderlich"
          >
            Anfragen <span className="count">{requestsCount}</span>
          </button>
        )}
      </div>

      <div className="chat-list">
        {chats.length === 0 && (
          <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-dim)', fontSize: 13 }}>
            Keine Chats gefunden.
          </div>
        )}
        {chats.map((c) => (
          <ChatItem
            key={c.id}
            chat={c}
            active={c.id === activeId}
            onClick={() => onSelect(c.id)}
          />
        ))}
      </div>
    </div>
  );
}

window.Inbox = { Rail, Sidebar, ChatView, EmptyState, CustomerProfile };