import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { useEffect, useState, useCallback } from 'react';
import { AuthApi, SyncApi, AnalyticsApi } from '../api/client.js';
import Logo from './Logo.jsx';
import DevBanner from './DevBanner.jsx';

// ── Folder definitions ────────────────────────────────────────────────────────

const MAILBOX = [
  { slug: 'inbox',     icon: '📥', label: 'Inbox',      countKey: 'inbox' },
  { slug: 'allmail',   icon: '📬', label: 'All Mail',   countKey: 'allMail' },
  { slug: 'starred',   icon: '⭐', label: 'Starred',    countKey: 'starred' },
  { slug: 'sent',      icon: '📤', label: 'Sent',       countKey: 'sent' },
  { slug: 'drafts',    icon: '✏️',  label: 'Drafts',     countKey: 'drafts' },
  { slug: 'archive',   icon: '📦', label: 'Archive',    countKey: null },
  { slug: 'spam',      icon: '🚫', label: 'Spam',       countKey: 'spam' },
  { slug: 'trash',     icon: '🗑️',  label: 'Trash',      countKey: 'trash' },
  { slug: 'unlabeled', icon: '🏷️',  label: 'Unlabeled',  countKey: null },
  { slug: 'pinned',    icon: '📌', label: 'Pinned',     countKey: null },
  { slug: 'readlater', icon: '🔖', label: 'Read Later', countKey: null },
];

// Special items always available as favorites (not smart folders)
const FAV_SPECIALS = {
  inbox:     { slug: 'inbox',     icon: '📥', label: 'Inbox',      countKey: 'inbox',  type: 'mailbox' },
  unread:    { slug: 'unread',    icon: '🔵', label: 'Unread Mail', countKey: 'unread', type: 'filter' },
  large:     { slug: 'large',     icon: '📎', label: 'Large Mail',  countKey: 'large',  type: 'filter' },
  old:       { slug: 'old',       icon: '🕰️',  label: 'Old Mail',   countKey: 'old',    type: 'filter' },
  readlater: { slug: 'readlater', icon: '🔖', label: 'Read Later',  countKey: null,     type: 'filter' },
};

const DEFAULT_FAV_SLUGS = ['inbox', 'unread', 'large', 'old', 'readlater'];

const SMART_FOLDERS = [
  { slug: 'automated',   icon: '🤖', label: 'Automated',          countKey: 'automated' },
  { slug: 'noreply',     icon: '🔇', label: 'No-Reply',            countKey: 'noreply' },
  { slug: 'shopping',    icon: '🛍️',  label: 'Online Shopping',    countKey: 'shopping' },
  { slug: 'gaming',      icon: '🎮', label: 'Gaming',              countKey: 'gaming' },
  { slug: 'finance',     icon: '💳', label: 'Finance & Insurance', countKey: 'finance' },
  { slug: 'sales',       icon: '🏷️',  label: 'Seasonal Sales',     countKey: 'sales' },
  { slug: 'ridesharing', icon: '🚗', label: 'Ride Sharing',        countKey: 'ridesharing' },
  { slug: 'food',        icon: '🍕', label: 'Food Delivery',       countKey: 'food' },
  { slug: 'social',      icon: '📱', label: 'Social Notifications',countKey: 'social' },
  { slug: 'wellness',    icon: '🏃', label: 'Wellness & Sport',    countKey: 'wellness' },
];

// ── Helpers ───────────────────────────────────────────────────────────────────

const fmtCount = (n) => {
  if (!n) return null;
  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
};

const LS_FAV   = 'ii:fav-slugs';
const LS_OPEN  = 'ii:sidebar-open';
const LS_SECTS = 'ii:sidebar-sections';

const loadFavs = () => {
  try { return JSON.parse(localStorage.getItem(LS_FAV)) ?? DEFAULT_FAV_SLUGS; }
  catch { return DEFAULT_FAV_SLUGS; }
};
const saveFavs = (v) => localStorage.setItem(LS_FAV, JSON.stringify(v));

const loadSections = () => {
  try { return JSON.parse(localStorage.getItem(LS_SECTS)) ?? { fav: true, mailbox: true, smart: true }; }
  catch { return { fav: true, mailbox: true, smart: true }; }
};
const saveSections = (v) => localStorage.setItem(LS_SECTS, JSON.stringify(v));

// ── Sub-components ────────────────────────────────────────────────────────────

function SectionHead({ label, open, onToggle, collapsed }) {
  return (
    <button className="section-head" onClick={onToggle} title={label}>
      {!collapsed && <span className="section-title">{label}</span>}
      <span className={`section-arrow${open ? '' : ' section-arrow--closed'}`}>›</span>
    </button>
  );
}

function FolderLink({ item, active, count, collapsed, extra }) {
  return (
    <Link
      to={`/app/folder/${item.slug}`}
      className={`folder-item${active ? ' folder-item--active' : ''}`}
      title={item.label}
    >
      <span className="folder-icon">{item.icon}</span>
      {!collapsed && (
        <>
          <span className="folder-label">{item.label}</span>
          <span className="folder-spacer" />
          {count && <span className="folder-badge">{count}</span>}
          {extra}
        </>
      )}
    </Link>
  );
}

// ── Main Layout ───────────────────────────────────────────────────────────────

export default function Layout() {
  const [user, setUser] = useState(null);
  const [sidebarOpen, setSidebarOpen] = useState(() => {
    try { return localStorage.getItem(LS_OPEN) !== 'false'; } catch { return true; }
  });
  const [sections, setSections] = useState(loadSections);
  const [favSlugs, setFavSlugs] = useState(loadFavs);
  const [counts, setCounts] = useState(null);

  const loc = useLocation();
  const navigate = useNavigate();

  useEffect(() => { AuthApi.me().then(setUser).catch(() => {}); }, []);

  useEffect(() => {
    AnalyticsApi.sidebarCounts().then(setCounts).catch(() => {});
  }, []);

  const toggleSidebar = () => {
    setSidebarOpen((o) => {
      localStorage.setItem(LS_OPEN, String(!o));
      return !o;
    });
  };

  const toggleSection = (key) => {
    setSections((s) => {
      const next = { ...s, [key]: !s[key] };
      saveSections(next);
      return next;
    });
  };

  const toggleFav = useCallback((slug) => {
    setFavSlugs((prev) => {
      const next = prev.includes(slug) ? prev.filter((s) => s !== slug) : [...prev, slug];
      saveFavs(next);
      return next;
    });
  }, []);

  const nav = [
    { to: '/app', label: 'Dashboard', end: true },
    { to: '/app/senders', label: 'Senders' },
    { to: '/app/cleanup', label: 'Cleanup' },
    { to: '/app/unsubscribe', label: 'Unsubscribe' }
  ];

  const isNavActive = (n) => (n.end ? loc.pathname === n.to : loc.pathname.startsWith(n.to));
  const activeSlug = loc.pathname.startsWith('/app/folder/')
    ? loc.pathname.split('/app/folder/')[1]
    : null;

  const logout = async () => {
    try { await AuthApi.logout(); } catch { /* ignore */ }
    navigate('/');
  };

  const startSync = async () => {
    try { await SyncApi.incremental(); } catch { /* ignore */ }
    if (loc.pathname !== '/app') navigate('/app');
    window.dispatchEvent(new Event('inboxintel:sync-started'));
  };

  // Count getters
  const mailboxCount = (item) => fmtCount(item.countKey ? counts?.[item.countKey] : null);
  const smartCount   = (item) => fmtCount(counts?.smartFolders?.[item.slug]);

  // Build favorites list: specials first (in default order), then pinned smart folders
  const favItems = favSlugs.map((slug) => {
    if (FAV_SPECIALS[slug]) return { ...FAV_SPECIALS[slug], source: 'special' };
    const sf = SMART_FOLDERS.find((f) => f.slug === slug);
    return sf ? { ...sf, source: 'smart' } : null;
  }).filter(Boolean);

  const favCount = (item) => {
    if (item.source === 'smart') return smartCount(item);
    return fmtCount(item.countKey ? counts?.[item.countKey] : null);
  };

  // Smart folders sorted by count desc
  const sortedSmart = [...SMART_FOLDERS].sort((a, b) => {
    const ca = counts?.smartFolders?.[a.slug] ?? 0;
    const cb = counts?.smartFolders?.[b.slug] ?? 0;
    return cb - ca;
  });

  const isPinnedSmart = (slug) => favSlugs.includes(slug);

  return (
    <div className="app">
      <DevBanner />
      <header className="topbar">
        <Link to="/app" className="brand-link"><Logo size={28} withWordmark /></Link>
        <nav>
          {nav.map((n) => (
            <Link key={n.to} to={n.to} className={isNavActive(n) ? 'active' : ''}>{n.label}</Link>
          ))}
        </nav>
        <div className="spacer" />
        <button onClick={startSync}>Sync now</button>
        <span className="user">{user?.email}</span>
        <button className="ghost" onClick={logout}>Log out</button>
      </header>

      <div className="app-body">
        <aside className={`sidebar${sidebarOpen ? '' : ' sidebar--collapsed'}`}>
          <div className="sidebar-header">
            {sidebarOpen && <span className="sidebar-brand">Folders</span>}
            <button className="sidebar-toggle ghost" onClick={toggleSidebar} title={sidebarOpen ? 'Collapse' : 'Expand'}>
              {sidebarOpen ? '‹' : '›'}
            </button>
          </div>

          {/* ── Favorites ── */}
          <SectionHead label="Favorites" open={sections.fav} onToggle={() => toggleSection('fav')} collapsed={!sidebarOpen} />
          {sections.fav && (
            <ul className="folder-list">
              {favItems.map((item) => (
                <li key={item.slug}>
                  <FolderLink
                    item={item}
                    active={activeSlug === item.slug}
                    count={favCount(item)}
                    collapsed={!sidebarOpen}
                    extra={item.source === 'smart' && sidebarOpen && (
                      <button
                        className="fav-pin fav-pin--remove"
                        title="Remove from Favorites"
                        onClick={(e) => { e.preventDefault(); toggleFav(item.slug); }}
                      >✕</button>
                    )}
                  />
                </li>
              ))}
            </ul>
          )}

          {/* ── Mailbox ── */}
          <SectionHead label="Mailbox" open={sections.mailbox} onToggle={() => toggleSection('mailbox')} collapsed={!sidebarOpen} />
          {sections.mailbox && (
            <ul className="folder-list">
              {MAILBOX.map((item) => (
                <li key={item.slug}>
                  <FolderLink
                    item={item}
                    active={activeSlug === item.slug}
                    count={mailboxCount(item)}
                    collapsed={!sidebarOpen}
                  />
                </li>
              ))}
            </ul>
          )}

          {/* ── Smart Folders ── */}
          <SectionHead label="Smart Folders" open={sections.smart} onToggle={() => toggleSection('smart')} collapsed={!sidebarOpen} />
          {sections.smart && (
            <ul className="folder-list">
              {sortedSmart.map((item) => (
                <li key={item.slug}>
                  <FolderLink
                    item={item}
                    active={activeSlug === item.slug}
                    count={smartCount(item)}
                    collapsed={!sidebarOpen}
                    extra={sidebarOpen && (
                      <button
                        className={`fav-pin${isPinnedSmart(item.slug) ? ' fav-pin--remove' : ''}`}
                        title={isPinnedSmart(item.slug) ? 'Remove from Favorites' : 'Add to Favorites'}
                        onClick={(e) => { e.preventDefault(); toggleFav(item.slug); }}
                      >{isPinnedSmart(item.slug) ? '✕' : '⊕'}</button>
                    )}
                  />
                </li>
              ))}
            </ul>
          )}
        </aside>

        <main>
          <Outlet />
        </main>
      </div>
    </div>
  );
}