firewall.ai:
Email as an AI-Native OS

import { useState, useEffect } from 'react';
import axios from 'axios';
import {
  User, ShieldAlert, TrendingUp, X, ShoppingCart, Tag, Zap, Send,
  ArchiveRestore, Archive, Github, Cloud, Chrome, Key, MessageSquare,
  Search, ArrowRight, Loader2, PenSquare, Forward, ChevronDown,
  Trash2, Paperclip, Download, Receipt, Package, Briefcase,
  Bell, Newspaper, BookMarked, GripVertical, MoveRight, History
} from 'lucide-react';

const API_BASE = "http://localhost:8000";

// Tab config
const VAULT_TABS = [
  { id: 'FINANCE',      label: 'Finance',       icon: TrendingUp, intelKey: 'FINANCE' },
  { id: 'RECEIPT',      label: 'Receipts',      icon: Receipt,    intelKey: 'GROCERIES' },
  { id: 'PROMOTION',    label: 'Deals',         icon: Tag,        intelKey: 'GROCERIES' },
  { id: 'LOGISTICS',    label: 'Logistics',     icon: Package,    intelKey: 'LOGISTICS' },
  { id: 'CAREER',       label: 'Career',        icon: Briefcase,  intelKey: 'CAREER' },
  { id: 'NOTIFICATION', label: 'Alerts',        icon: Bell,       intelKey: 'NOTIFICATION' },
  { id: 'NEWSLETTER',   label: 'Newsletters',   icon: Newspaper,  intelKey: 'NEWSLETTER' },
  { id: 'ARCHIVED',     label: 'Archived',      icon: BookMarked, intelKey: null },
];

// 🟢 NEW: Extended menu config so we can move items back to the Home Screen
const MOVE_MENU_TABS = [
  { id: 'HUMAN',        label: 'Direct Messages', icon: User },
  { id: 'KEY',          label: 'Auth Events',     icon: ShieldAlert },
  ...VAULT_TABS
];

const INTEL_META: Record<string, { title: string; subtitle: string }> = {
  FINANCE:      { title: 'Finance Intelligence', subtitle: 'Upcoming bills and liabilities.' },
  RECEIPT:      { title: 'Spend Intelligence',   subtitle: 'Chronological breakdown of your spending habits.' },
  PROMOTION:    { title: 'Deal Intelligence',    subtitle: 'Active sales cross-referenced against your purchase history.' },
  LOGISTICS:    { title: 'Delivery Intelligence',subtitle: 'Active shipments, customs blocks, and expiring returns.' },
  CAREER:       { title: 'Career Intelligence',  subtitle: 'Actions required, opportunities, and network signals.' },
  NOTIFICATION: { title: 'Alert Intelligence',   subtitle: 'Urgent asks, system fires, and read-later digest.' },
  NEWSLETTER:   { title: 'Signal Intelligence',  subtitle: 'Top headlines, trending topics, and deep dives.' },
};

const getLogo = (sender: string) => {
  const domain = sender.includes('@') ? sender.split('@')[1] : sender;
  if (!domain) return null;
  return `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
};

const getAuthIcon = (sender: string, subject: string) => {
  const text = (sender + subject).toLowerCase();
  if (text.includes('github'))  return <Github size={16} className="text-stone-700" />;
  if (text.includes('aws') || text.includes('amazon')) return <Cloud size={16} className="text-amber-500" />;
  if (text.includes('google') || text.includes('okta')) return <Chrome size={16} className="text-emerald-500" />;
  if (text.includes('slack'))   return <MessageSquare size={16} className="text-indigo-500" />;
  if (text.includes('wealthsimple')) return <span className="text-[10px] font-black text-emerald-600">WS</span>;
  return <Key size={16} className="text-orange-500" />;
};

const formatShortDate = (dateString: string) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  const now = new Date();
  if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
};

const formatLongDate = (dateString: string) => {
  if (!dateString) return '';
  return new Date(dateString).toLocaleDateString('en-US', {
    weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit'
  });
};

const groupFeedByDate = (emails: any[]) => {
  const groups: Record<string, any[]> = { 'Today': [], 'This Week': [], 'Older': [] };
  const now = new Date();
  emails.forEach(e => {
    if (!e.received_at) return;
    const d = new Date(e.received_at);
    const diffDays = Math.floor((now.getTime() - d.getTime()) / 86400000);
    if (diffDays < 1)       groups['Today'].push(e);
    else if (diffDays <= 7) groups['This Week'].push(e);
    else                    groups['Older'].push(e);
  });
  return groups;
};

// ─────────────────────────────────────────────────────────────────
// INTELLIGENCE PANEL
// ─────────────────────────────────────────────────────────────────

const IntelPanel = ({ activeTab, intel, feed, setSelectedEmail, archivedIds }: any) => {
  const meta = INTEL_META[activeTab];

  if (activeTab === 'ARCHIVED') return null;

  // ── FINANCE: Upcoming Liabilities Only ─────────────────────────────
  if (activeTab === 'FINANCE') {
    const liabs = intel?.FINANCE?.upcoming_liabilities || [];
    return (
      <div className="space-y-6">
        <div>
          <h2 className="text-4xl font-serif font-black italic leading-none tracking-tighter mb-1">{meta.title}</h2>
          <p className="text-[11px] font-bold text-stone-400 uppercase tracking-widest">{meta.subtitle}</p>
        </div>

        {liabs.length > 0 ? (
          <div className="bg-white/60 p-6 rounded-[2rem] border border-stone-100 shadow-sm">
            <h4 className="text-[10px] font-black tracking-[0.3em] text-red-500 mb-4 uppercase">Upcoming Liabilities</h4>
            <div className="space-y-3">
              {liabs.map((item: any, i: number) => {
                const isClickable = !!item.source_id;
                return (
                  <div 
                    key={i} 
                    onClick={(ev) => {
                        if (!isClickable) return;
                        ev.stopPropagation();
                        const src = feed.find((e: any) => Number(e.id) === Number(item.source_id));
                        if (src) setSelectedEmail(src);
                    }}
                    className={`flex justify-between items-center py-3 border-b border-stone-50 last:border-0 ${isClickable ? 'cursor-pointer hover:bg-stone-50 transition-colors px-2 -mx-2 rounded-xl' : ''}`}
                  >
                    <div className="flex flex-col">
                      <span className="text-sm font-bold text-stone-800">{item.vendor}</span>
                      {item.due_date && <span className="text-[10px] font-black text-stone-400 uppercase tracking-widest mt-0.5">DUE: {item.due_date}</span>}
                    </div>
                    <span className="text-lg font-black text-red-600">${Number(item.upcoming_charge).toFixed(2)}</span>
                  </div>
                );
              })}
            </div>
          </div>
        ) : (
          <p className="text-stone-400 italic text-sm">No upcoming liabilities detected.</p>
        )}
      </div>
    );
  }

  // ── RECEIPT: Chronological Spend Intelligence ──────────────────────────────
  if (activeTab === 'RECEIPT') {
    const receipts = feed.filter((e: any) => e.librarian_tag === 'RECEIPT' && !archivedIds.has(e.id));
    const sortedReceipts = [...receipts].sort((a, b) => new Date(b.received_at).getTime() - new Date(a.received_at).getTime());

    return (
      <div className="space-y-6">
        <div>
          <h2 className="text-4xl font-serif font-black italic leading-none tracking-tighter mb-1">{meta.title}</h2>
          <p className="text-[11px] font-bold text-stone-400 uppercase tracking-widest">{meta.subtitle}</p>
        </div>

        <div className="space-y-4">
          {sortedReceipts.map(receipt => {
            const data = receipt.extracted_data;
            if (!data) return null;
            return (
              <div key={receipt.id} onClick={() => setSelectedEmail(receipt)} className="bg-white/60 p-5 rounded-[2rem] border border-stone-100 shadow-sm cursor-pointer hover:border-emerald-300 hover:bg-emerald-50/20 transition-all">
                <div className="flex justify-between items-center mb-3">
                  <div className="flex flex-col">
                    <span className="font-black text-stone-800 text-base">{data.vendor || receipt.sender.split('@')[0]}</span>
                    <span className="text-[10px] font-bold text-stone-400 uppercase">{formatShortDate(receipt.received_at)}</span>
                  </div>
                  <span className="font-black text-emerald-600 text-lg">${data.total?.toFixed(2)}</span>
                </div>
                <div className="space-y-1">
                  {data.items?.slice(0, 3).map((item: any, i: number) => (
                    <div key={i} className="flex justify-between text-xs font-medium text-stone-600">
                      <span className="truncate pr-4">{item.item_name}</span>
                      <span>${item.price?.toFixed(2) || item.sale_price?.toFixed(2)}</span>
                    </div>
                  ))}
                  {data.items?.length > 3 && (
                    <div className="text-[10px] font-bold text-stone-400 pt-1">+{data.items.length - 3} more items</div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
        
        {sortedReceipts.length === 0 && (
          <p className="text-stone-400 italic text-sm">Run the pipeline to generate spend intelligence.</p>
        )}
      </div>
    );
  }

  // ── PROMOTION: Deal Intelligence with Hyperlinks ─────────────────────────────
  if (activeTab === 'PROMOTION') {
    const groceries = intel?.GROCERIES;
    if (!groceries) return (
      <div className="space-y-4">
        <div>
          <h2 className="text-4xl font-serif font-black italic leading-none tracking-tighter mb-1">{meta.title}</h2>
          <p className="text-[11px] font-bold text-stone-400 uppercase tracking-widest">{meta.subtitle}</p>
        </div>
        <p className="text-stone-400 italic text-sm">Run the pipeline to generate deal intelligence.</p>
      </div>
    );

    const reups: any[]   = groceries.smart_re_ups   || [];
    const alerts: any[]  = groceries.stock_up_alerts || [];
    const meals: any[]   = groceries.meal_plans      || [];

    const getIngredientSource = (ing: string) => {
        let match = alerts.find(a => a.item.toLowerCase().includes(ing.toLowerCase()) || ing.toLowerCase().includes(a.item.toLowerCase()));
        if (match) return match.deal_email_id;
        match = reups.find(r => r.item.toLowerCase().includes(ing.toLowerCase()) || ing.toLowerCase().includes(r.item.toLowerCase()));
        if (match) return match.deal_email_id;
        return null;
    };

    return (
      <div className="space-y-6">
        <div>
          <h2 className="text-4xl font-serif font-black italic leading-none tracking-tighter mb-1">{meta.title}</h2>
          <p className="text-[11px] font-bold text-stone-400 uppercase tracking-widest">{meta.subtitle}</p>
        </div>

        {/* Stock-up alerts */}
        {alerts.length > 0 && (
          <div className="bg-orange-50 border border-orange-100 rounded-[2rem] p-6 shadow-sm">
            <h4 className="text-[10px] font-black tracking-[0.3em] text-orange-500 mb-4 uppercase">Stock-Up Alerts - 30%+ Off</h4>
            <div className="space-y-4">
              {alerts.map((item: any, i: number) => (
                <div key={i} className="py-3 border-b border-orange-100 last:border-0">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-black text-stone-900">{item.item}</span>
                    <div className="flex items-center gap-2">
                      <span className="text-xs text-stone-400 line-through">${item.past_price?.toFixed(2)}</span>
                      <span className="text-[10px] font-black bg-orange-500 text-white px-2 py-0.5 rounded-md">{item.discount}</span>
                      <span className="text-sm font-black text-emerald-700">${item.sale_price?.toFixed(2)}</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 flex-wrap mt-1">
                    <button 
                      onClick={(ev) => { 
                        ev.stopPropagation(); 
                        if (!item.deal_email_id) return alert("Missing ID! Run: python intelligence_worker.py GROCERIES");
                        const src = feed.find((e: any) => Number(e.id) === Number(item.deal_email_id)); 
                        if (src) setSelectedEmail(src); 
                      }}
                      className="text-[10px] font-bold text-orange-700 bg-orange-200/50 px-3 py-1.5 rounded-md cursor-pointer hover:bg-orange-200 transition-colors flex items-center gap-1.5 shadow-sm"
                    >
                      <Tag size={10} /> Deal at {item.deal_store}{item.deal_date ? ` · ${item.deal_date}` : ''}
                    </button>
                    <button 
                      onClick={(ev) => { 
                        ev.stopPropagation(); 
                        if (!item.purchased_email_id) return alert("Missing ID! Run: python intelligence_worker.py GROCERIES");
                        const src = feed.find((e: any) => Number(e.id) === Number(item.purchased_email_id)); 
                        if (src) setSelectedEmail(src); 
                      }}
                      className="text-[10px] font-bold text-stone-500 bg-white/60 border border-stone-200 px-3 py-1.5 rounded-md cursor-pointer hover:bg-stone-100 transition-colors flex items-center gap-1.5 shadow-sm"
                    >
                      <Receipt size={10} /> Paid ${item.past_price?.toFixed(2)} at {item.purchased_at}{item.purchased_date ? ` on ${item.purchased_date}` : ''}
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Smart re-ups */}
        {reups.length > 0 && (
          <div className="bg-white/60 p-6 rounded-[2rem] border border-stone-100 shadow-sm">
            <h4 className="text-[10px] font-black tracking-[0.3em] text-emerald-600 mb-4 uppercase">Smart Re-Ups</h4>
            <div className="space-y-4">
              {reups.map((item: any, i: number) => (
                <div key={i} className="py-3 border-b border-stone-50 last:border-0">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-black text-stone-900">{item.item}</span>
                    <div className="flex items-center gap-2">
                      <span className="text-xs text-stone-400 line-through">${item.past_price?.toFixed(2)}</span>
                      <span className="text-sm font-black text-emerald-600">${item.sale_price?.toFixed(2)}</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 flex-wrap">
                    <button 
                      onClick={(ev) => { 
                        ev.stopPropagation(); 
                        if (!item.deal_email_id) return alert("Missing ID! Run: python intelligence_worker.py GROCERIES");
                        const src = feed.find((e: any) => Number(e.id) === Number(item.deal_email_id)); 
                        if (src) setSelectedEmail(src); 
                      }}
                      className="text-[10px] font-bold text-emerald-700 bg-emerald-100/50 px-3 py-1.5 rounded-md cursor-pointer hover:bg-emerald-100 transition-colors flex items-center gap-1.5 shadow-sm"
                    >
                      <Tag size={10} /> Sale at {item.deal_store}{item.deal_date ? ` (${item.deal_date})` : ''}
                    </button>
                    <button 
                      onClick={(ev) => { 
                        ev.stopPropagation(); 
                        if (!item.purchased_email_id) return alert("Missing ID! Run: python intelligence_worker.py GROCERIES");
                        const src = feed.find((e: any) => Number(e.id) === Number(item.purchased_email_id)); 
                        if (src) setSelectedEmail(src); 
                      }}
                      className="text-[10px] font-bold text-stone-500 bg-white/60 border border-stone-200 px-3 py-1.5 rounded-md cursor-pointer hover:bg-stone-100 transition-colors flex items-center gap-1.5 shadow-sm"
                    >
                      <Receipt size={10} /> Last bought at {item.purchased_at}{item.purchased_date ? ` on ${item.purchased_date}` : ''}
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Meal plans */}
        {meals.length > 0 && (
          <div className="bg-white/60 p-6 rounded-[2rem] border border-stone-100 shadow-sm">
            <h4 className="text-[10px] font-black tracking-[0.3em] text-emerald-600 mb-4 uppercase">AI Meal Plans</h4>
            <div className="space-y-4">
              {meals.map((meal: any, i: number) => (
                <div key={i} className="bg-white p-5 rounded-2xl border border-stone-50 shadow-sm">
                  <p className="text-base font-serif font-black italic text-stone-900 mb-2">{meal.meal_name}</p>
                  <div className="flex flex-wrap gap-1 mb-3">
                    {meal.ingredients?.map((ing: string) => {
                      const sourceId = getIngredientSource(ing);
                      return (
                          <button 
                            key={ing} 
                            onClick={(ev) => {
                                ev.stopPropagation();
                                if (!sourceId) return;
                                const src = feed.find((e: any) => Number(e.id) === Number(sourceId));
                                if (src) setSelectedEmail(src);
                            }}
                            className={`text-[9px] font-bold border px-2 py-1 rounded-full transition-colors ${
                                sourceId 
                                    ? 'border-emerald-300 bg-emerald-50 text-emerald-700 cursor-pointer hover:bg-emerald-200 hover:border-emerald-400 shadow-sm' 
                                    : 'border-stone-200 text-stone-500 bg-stone-50 cursor-default'
                            }`}
                          >
                            {ing} {sourceId && <Zap size={8} className="inline mb-0.5" />}
                          </button>
                      );
                    })}
                  </div>
                  {meal.steps?.slice(0, 3).map((step: string, si: number) => (
                    <p key={si} className="text-xs text-stone-500 leading-relaxed mt-1">• {step}</p>
                  ))}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  }

  // ── ALL OTHER TABS — Generic structured renderer with Provenance ──────────────
  const rawData = intel?.[activeTab];

  if (!rawData) return (
    <div className="space-y-4">
      <div>
        <h2 className="text-4xl font-serif font-black italic leading-none tracking-tighter mb-1">{meta?.title}</h2>
        <p className="text-[11px] font-bold text-stone-400 uppercase tracking-widest">{meta?.subtitle}</p>
      </div>
      <p className="text-stone-400 italic text-sm">Run the pipeline to generate intelligence.</p>
    </div>
  );

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-4xl font-serif font-black italic leading-none tracking-tighter mb-1">{meta?.title}</h2>
        <p className="text-[11px] font-bold text-stone-400 uppercase tracking-widest">{meta?.subtitle}</p>
      </div>
      {Object.entries(rawData).map(([key, value]: [string, any], idx) => {
        if (key === 'report_date' || value === null || value === undefined) return null;
        const title = key.replace(/_/g, ' ').toUpperCase();

        return (
          <div key={idx} className="bg-white/60 p-6 rounded-[2rem] border border-stone-100 shadow-sm">
            <h4 className="text-[10px] font-black tracking-[0.3em] text-emerald-600 mb-4 border-b border-emerald-50 pb-2 uppercase">{title}</h4>

            {Array.isArray(value) ? (
              value.length > 0 ? (
                <div className="space-y-3">
                  {value.map((item: any, i: number) => {
                    // 🟢 UNIVERSAL PROVENANCE LOGIC
                    const targetId = item.source_id || (item.source_ids && item.source_ids[0]);
                    const isClickable = !!targetId;

                    return (
                      <div 
                        key={i} 
                        onClick={(ev) => {
                            if (!isClickable) return;
                            ev.stopPropagation();
                            const src = feed.find((e: any) => Number(e.id) === Number(targetId));
                            if (src) setSelectedEmail(src);
                        }}
                        className={`flex items-start gap-3 py-2 border-b border-stone-50 last:border-0 ${isClickable ? 'cursor-pointer hover:bg-stone-50 transition-colors px-2 -mx-2 rounded-xl' : ''}`}
                      >
                        <Zap size={14} className="mt-0.5 shrink-0 text-emerald-400" />
                        <div className="flex-1 text-sm font-bold text-stone-800 leading-snug">
                          {item.status && item.vendor && (
                            <div className="flex justify-between">
                              <span>{item.vendor} — {item.item || item.status}</span>
                              <span className={`text-[10px] font-black px-2 py-0.5 rounded-md ${item.status === 'Customs Hold' ? 'bg-red-100 text-red-600' : 'bg-emerald-100 text-emerald-700'}`}>{item.status}</span>
                            </div>
                          )}
                          {item.days_left !== undefined && (
                            <div className="flex justify-between">
                              <span>{item.item} ({item.vendor})</span>
                              <span className="text-[10px] font-black bg-red-100 text-red-600 px-2 py-0.5 rounded-md">{item.days_left}d left</span>
                            </div>
                          )}
                          {(item.action_required || item.action) && !item.vendor && !item.status && (
                            <span>{item.action_required || item.action}</span>
                          )}
                          {item.opportunity && <span>{item.opportunity}</span>}
                          {(item.network_update || item.update) && !item.vendor && <span>{item.network_update || item.update}</span>}
                          {item.task && !item.action_required && !item.action && <span>{item.task}</span>}
                          {item.summary && <span>{item.summary}</span>}
                          {item.topic && item.mentions !== undefined && (
                            <div className="flex justify-between">
                              <span>{item.topic}</span>
                              <span className="text-[10px] font-black bg-stone-100 text-stone-500 px-2 py-0.5 rounded-md hover:bg-stone-200 transition-colors">{item.mentions}x Sources</span>
                            </div>
                          )}
                          {item.topic && item.mentions === undefined && (
                            <div className="flex items-center gap-2">
                              <span className="text-[10px] font-black bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-md uppercase tracking-widest">Deep Dive</span>
                              <span>{item.topic}</span>
                            </div>
                          )}
                          {!item.vendor && !item.status && !item.days_left && !item.action_required && !item.action && !item.opportunity && !item.network_update && !item.update && !item.task && !item.summary && !item.topic && (
                            <span>{typeof item === 'object' ? JSON.stringify(item) : item}</span>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <p className="text-sm text-stone-400 italic">None detected.</p>
              )
            ) : (
              <div className="bg-white px-5 py-3 rounded-2xl border border-stone-200 shadow-sm inline-flex items-center gap-3">
                <span className="font-black text-stone-400 uppercase tracking-widest text-[10px]">Total:</span>
                <span className="font-black text-2xl text-emerald-600">
                  {typeof value === 'number' ? `$${value.toFixed(2)}` : String(value)}
                </span>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// MAIN APP
// ─────────────────────────────────────────────────────────────────

export default function App() {
  const [intel, setIntel] = useState<any>(null);
  const [feed, setFeed] = useState<any[]>([]);
  const [view, setView] = useState<'home' | 'vault' | 'sent'>('home');
  const [activeTab, setActiveTab] = useState('FINANCE');

  const [sentEmails, setSentEmails] = useState<any[]>([]);

  const [searchQuery, setSearchQuery] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [searchResults, setSearchResults] = useState<any[] | null>(null);

  const [archivedIds, setArchivedIds] = useState<Set<number>>(new Set());
  const [selectedEmail, setSelectedEmail] = useState<any>(null);

  const [replyText, setReplyText] = useState('');
  const [showCC, setShowCC] = useState(false);
  const [ccText, setCcText] = useState('');
  const [bccText, setBccText] = useState('');
  const [isSending, setIsSending] = useState(false);

  const [isComposing, setIsComposing] = useState(false);
  const [composeData, setComposeData] = useState({ to: '', cc: '', bcc: '', subject: '', body: '' });

  const [retagMenuId, setRetagMenuId] = useState<number | null>(null);
  const [draggedEmail, setDraggedEmail] = useState<any>(null);
  const [dragOverTab, setDragOverTab] = useState<string | null>(null);
  const [isRetagging, setIsRetagging] = useState<number | null>(null);

  const fetchDashboardData = async () => {
    try {
      const [intelRes, feedRes] = await Promise.all([
        axios.get(`${API_BASE}/api/intelligence`),
        axios.get(`${API_BASE}/api/live-feed`),
      ]);
      setIntel(intelRes.data);
      setFeed(feedRes.data);
    } catch (e) { console.error('Database Fetch Failed'); }
  };

  useEffect(() => {
    fetchDashboardData();
    const interval = setInterval(fetchDashboardData, 30000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const handler = () => setRetagMenuId(null);
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, []);

  const toggleArchive = (id: number) => {
    setArchivedIds(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
    if (selectedEmail?.id === id) setSelectedEmail(null);
  };

  const handleDelete = async (id: number) => {
    try {
      await axios.delete(`${API_BASE}/api/email/${id}`);
      setFeed(prev => prev.filter(e => e.id !== id));
      if (selectedEmail?.id === id) setSelectedEmail(null);
    } catch (e) { console.error('Delete failed'); }
  };

  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!searchQuery.trim()) { setSearchResults(null); return; }
    setIsSearching(true);
    try {
      const res = await axios.get(`${API_BASE}/api/search?q=${encodeURIComponent(searchQuery)}`);
      setSearchResults(res.data);
    } catch (e) { console.error('Search failed'); } finally { setIsSearching(false); }
  };

  const handleRetag = async (emailId: number, newTag: string, oldTag: string) => {
    if (newTag === oldTag) return;
    setRetagMenuId(null);

    setIsRetagging(emailId);
    try {
      // 1. Send the update to the backend (FastAPI BackgroundTasks handles the math silently)
      await axios.patch(`${API_BASE}/api/email/${emailId}/retag`, {
        new_tag: newTag,
        old_tag: oldTag,
      });
      
      // 2. OPTIMISTIC UI (Feed): Instantly route the item to its new tab / view
      setFeed(prev => prev.map(e => {
        if (e.id === emailId) {
            return {
                ...e,
                librarian_tag: newTag,
                is_human: newTag === 'HUMAN',
                is_key: newTag === 'KEY'
            };
        }
        return e;
      }));

      // 3. OPTIMISTIC UI (Intelligence): Instantly snap the item out of the math panels
      setIntel((prev: any) => {
         if (!prev) return prev;
         const next = JSON.parse(JSON.stringify(prev)); // Deep copy to avoid state mutation
         
         // Strip from Finance Liabilities
         if (oldTag === 'FINANCE' && next.FINANCE?.upcoming_liabilities) {
             next.FINANCE.upcoming_liabilities = next.FINANCE.upcoming_liabilities.filter(
                 (item: any) => Number(item.source_id) !== Number(emailId)
             );
         }
         
         // Strip from Logistics Shipments
         if (oldTag === 'LOGISTICS' && next.LOGISTICS?.active_shipments) {
             next.LOGISTICS.active_shipments = next.LOGISTICS.active_shipments.filter(
                 (item: any) => Number(item.source_id) !== Number(emailId)
             );
         }
         return next;
      });
      
    } catch (e) {
      console.error('Retag failed', e);
    } finally {
      setIsRetagging(null);
    }
  };

  const handleSendReply = async (isForward = false) => {
    if ((!replyText.trim() && !isForward) || (isForward && !ccText.includes('@'))) return;
    setIsSending(true);
    try {
      await axios.post(`${API_BASE}/api/send`, {
        to_address: isForward ? ccText : selectedEmail.sender,
        cc_address: isForward ? '' : ccText, 
        bcc_address: bccText,
        subject: isForward ? `Fwd: ${selectedEmail.subject}` : `Re: ${selectedEmail.subject}`,
        body: isForward ? `\n\n--- Forwarded Message ---\n${selectedEmail.body_text}` : replyText,
        reply_to_id: selectedEmail.id, is_forward: isForward,
      });
      
      const newSentEmail = {
        id: Date.now(),
        sender: `To: ${isForward ? ccText : selectedEmail.sender}`,
        subject: isForward ? `Fwd: ${selectedEmail.subject}` : `Re: ${selectedEmail.subject}`,
        body_text: isForward ? `\n\n--- Forwarded Message ---\n${selectedEmail.body_text}` : replyText,
        received_at: new Date().toISOString(),
        is_human: true,
        librarian_tag: 'SENT'
      };
      setSentEmails(prev => [newSentEmail, ...prev]);

      setReplyText(''); setCcText(''); setBccText(''); setShowCC(false); setSelectedEmail(null);
    } catch (e) { console.error('Send failed'); } finally { setIsSending(false); }
  };

  const handleSendNew = async () => {
    if (!composeData.to || !composeData.body) return;
    setIsSending(true);
    try {
      await axios.post(`${API_BASE}/api/send`, {
        to_address: composeData.to, cc_address: composeData.cc,
        bcc_address: composeData.bcc, subject: composeData.subject, body: composeData.body,
      });

      const newSentEmail = {
        id: Date.now(),
        sender: `To: ${composeData.to}`,
        subject: composeData.subject,
        body_text: composeData.body,
        received_at: new Date().toISOString(),
        is_human: true,
        librarian_tag: 'SENT'
      };
      setSentEmails(prev => [newSentEmail, ...prev]);

      setIsComposing(false);
      setComposeData({ to: '', cc: '', bcc: '', subject: '', body: '' });
    } catch (e) { console.error('Send failed'); } finally { setIsSending(false); }
  };

  let displayFeed: any[] = [];
  if (activeTab === 'ARCHIVED') {
    // Show items archived via the button OR via drag-and-drop
    displayFeed = feed.filter(e => archivedIds.has(e.id) || e.librarian_tag === 'ARCHIVED');
  } else {
    // Hide items if they are archived
    displayFeed = feed.filter(e => e.librarian_tag === activeTab && !archivedIds.has(e.id) && e.librarian_tag !== 'ARCHIVED');
  }
  const groupedFeed = groupFeedByDate(displayFeed);

  return (
    <div className="min-h-screen bg-[#FDFCF8] text-stone-900 font-sans flex flex-col relative">

      {/* ── COMPOSE MODAL ─────────────────────────────────────── */}
      {isComposing && (
        <div className="fixed inset-0 z-[200] bg-stone-900/60 backdrop-blur-md flex items-center justify-center p-8">
          <div className="bg-white w-full max-w-4xl rounded-[3rem] shadow-2xl overflow-hidden border-2 border-stone-900 flex flex-col h-[70vh] animate-in zoom-in-95 duration-200">
            <div className="flex justify-between items-center p-6 border-b border-stone-100 bg-stone-50">
              <div className="flex items-center gap-2 text-stone-800 font-black tracking-widest uppercase text-sm">
                <PenSquare size={16} /> New Message
              </div>
              <button onClick={() => setIsComposing(false)} className="hover:bg-stone-200 p-2 rounded-full transition-colors"><X size={20} /></button>
            </div>
            <div className="flex flex-col flex-1 overflow-y-auto">
              <input type="text" placeholder="To" value={composeData.to} onChange={e => setComposeData({ ...composeData, to: e.target.value })} className="w-full border-b border-stone-100 p-4 outline-none font-medium text-stone-800" />
              {showCC && (
                <>
                  <input type="text" placeholder="Cc" value={composeData.cc} onChange={e => setComposeData({ ...composeData, cc: e.target.value })} className="w-full border-b border-stone-100 p-4 outline-none font-medium text-stone-800" />
                  <input type="text" placeholder="Bcc" value={composeData.bcc} onChange={e => setComposeData({ ...composeData, bcc: e.target.value })} className="w-full border-b border-stone-100 p-4 outline-none font-medium text-stone-800" />
                </>
              )}
              <input type="text" placeholder="Subject" value={composeData.subject} onChange={e => setComposeData({ ...composeData, subject: e.target.value })} className="w-full border-b border-stone-100 p-4 outline-none font-bold text-stone-800 text-lg" />
              <textarea placeholder="Write something..." value={composeData.body} onChange={e => setComposeData({ ...composeData, body: e.target.value })} className="w-full flex-1 p-6 outline-none resize-none font-medium text-stone-700" />
            </div>
            <div className="p-6 bg-stone-50 border-t border-stone-100 flex justify-between items-center">
              <button onClick={() => setShowCC(!showCC)} className="text-[10px] font-black uppercase tracking-widest text-stone-400 hover:text-stone-800 transition-colors flex items-center gap-1">
                CC / BCC <ChevronDown size={12} className={showCC ? 'rotate-180' : ''} />
              </button>
              <button onClick={handleSendNew} disabled={isSending} className="bg-stone-900 text-white px-8 py-3 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 flex items-center gap-2 transition-colors disabled:opacity-50">
                {isSending ? 'Sending...' : 'Send'} <Send size={12} />
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── EMAIL DETAIL MODAL ────────────────────────────────── */}
      {selectedEmail && (() => {
        const hasShoppingList = selectedEmail.extracted_data && selectedEmail.extracted_data.items && selectedEmail.extracted_data.items.length > 0;
        const hasSidebar = selectedEmail.file_name || hasShoppingList;

        return (
          <div className="fixed inset-0 z-[100] bg-stone-900/60 backdrop-blur-md flex items-center justify-center p-8">
            <div className="bg-white w-full max-w-6xl rounded-[4rem] shadow-2xl overflow-hidden border-2 border-stone-900 flex h-[85vh] relative animate-in zoom-in-95 duration-200">

              <div className="absolute top-8 right-8 flex gap-3 z-10">
                <button onClick={() => handleDelete(selectedEmail.id)} className="bg-white/80 backdrop-blur hover:bg-red-100 hover:text-red-600 text-stone-400 p-4 rounded-full transition-colors border border-stone-100 shadow-sm" title="Permanently Delete">
                    <Trash2 size={20}/>
                </button>
                
                <div className="relative">
                    <button 
                        onClick={(ev) => { ev.stopPropagation(); setRetagMenuId(retagMenuId === selectedEmail.id ? null : selectedEmail.id); }}
                        className="bg-white/80 backdrop-blur hover:bg-emerald-100 hover:text-emerald-600 text-stone-400 p-4 rounded-full transition-colors border border-stone-100 shadow-sm" 
                        title="Move to..."
                    >
                        <MoveRight size={20}/>
                    </button>
                    {retagMenuId === selectedEmail.id && (
                        <div className="absolute right-0 top-16 bg-white border-2 border-stone-900 rounded-2xl shadow-xl z-50 overflow-hidden min-w-[180px]">
                            <p className="text-[9px] font-black uppercase tracking-widest text-stone-400 px-4 pt-3 pb-1">File as Intelligence</p>
                            {/* 🟢 MAP OVER MOVE_MENU_TABS INSTEAD OF VAULT_TABS */}
                            {MOVE_MENU_TABS.filter(t => t.id !== selectedEmail.librarian_tag).map(t => {
                                const TIcon = t.icon;
                                return (
                                    <button
                                        key={t.id}
                                        onClick={() => handleRetag(selectedEmail.id, t.id, selectedEmail.librarian_tag)}
                                        className="w-full flex items-center gap-3 px-4 py-3 text-sm font-bold text-stone-700 hover:bg-stone-50 transition-colors border-b last:border-0 border-stone-50"
                                    >
                                        <TIcon size={14} className={t.id === 'ARCHIVED' ? "text-stone-400" : "text-emerald-500"} /> {t.label}
                                    </button>
                                );
                            })}
                        </div>
                    )}
                </div>

                <button onClick={() => toggleArchive(selectedEmail.id)} className="bg-white/80 backdrop-blur hover:bg-emerald-100 hover:text-emerald-600 text-stone-400 p-4 rounded-full transition-colors border border-stone-100 shadow-sm" title={archivedIds.has(selectedEmail.id) ? "Unarchive" : "Archive"}>
                    {archivedIds.has(selectedEmail.id) ? <ArchiveRestore size={20}/> : <Archive size={20}/>}
                </button>
                <button onClick={() => {setSelectedEmail(null); setRetagMenuId(null);}} className="bg-white/80 backdrop-blur hover:bg-stone-200 p-4 rounded-full transition-colors border border-stone-100 shadow-sm">
                    <X size={20}/>
                </button>
              </div>

              <div className={`flex flex-col bg-white ${hasSidebar ? 'flex-1 border-r border-stone-100' : 'w-full'}`}>
                <div className="p-16 overflow-y-auto flex-1 pt-24">
                  <h3 className="text-4xl font-serif font-black italic mb-6 leading-tight pr-40">{selectedEmail.subject}</h3>
                  <div className="flex items-center gap-4 mb-12">
                    <p className="text-[11px] font-black text-emerald-600 bg-emerald-50 px-6 py-2 rounded-full uppercase tracking-widest">{selectedEmail.sender}</p>
                    <p className="text-[11px] font-bold text-stone-400 uppercase tracking-widest">{formatLongDate(selectedEmail.received_at)}</p>
                  </div>
                  <div className="text-stone-600 leading-relaxed font-medium text-lg whitespace-pre-wrap italic">{selectedEmail.body_text}</div>
                </div>

                {/* 🟢 REMOVED selectedEmail.is_human SO YOU CAN REPLY TO ANYTHING */}
                {view !== 'sent' && (
                  <div className="p-8 bg-stone-50 border-t border-stone-100">
                      <div className="bg-white border-2 border-stone-200 focus-within:border-stone-900 transition-colors rounded-[2rem] p-4 flex flex-col shadow-sm">
                          {(showCC || replyText.startsWith('Fwd:')) && (
                              <div className="flex gap-4 mb-2 border-b border-stone-50 pb-2 px-2">
                                  <input type="text" placeholder="Forward to address (e.g., manager@company.com)" value={ccText} onChange={e => setCcText(e.target.value)} className="flex-1 outline-none text-xs font-bold text-emerald-600 placeholder:text-stone-300" />
                              </div>
                          )}
                          <textarea
                              value={replyText}
                              onChange={e => setReplyText(e.target.value)}
                              placeholder={`Draft a secure response to ${selectedEmail.sender.split('@')[0]}...`}
                              className="w-full bg-transparent resize-none outline-none text-sm font-medium text-stone-800 p-2 min-h-[80px]"
                          />
                          <div className="flex justify-between items-center mt-2 px-2">
                              <button onClick={() => setShowCC(!showCC)} className="text-[9px] font-black uppercase tracking-widest text-stone-400 hover:text-stone-800 flex items-center gap-1">
                                  CC / BCC
                              </button>
                              <div className="flex gap-2">
                                  <button 
                                      onClick={() => handleSendReply(true)} 
                                      disabled={isSending || !ccText.includes('@')} 
                                      className="bg-stone-100 text-stone-600 px-6 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-stone-200 flex items-center gap-2 transition-colors disabled:opacity-50"
                                  >
                                      Forward <Forward size={12} />
                                  </button>
                                  <button 
                                      onClick={() => handleSendReply(false)} 
                                      disabled={isSending || !replyText.trim()} 
                                      className="bg-stone-900 text-white px-6 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 flex items-center gap-2 transition-colors disabled:opacity-50"
                                  >
                                      {isSending ? 'Sending...' : 'Send Reply'} <Send size={12} />
                                  </button>
                              </div>
                          </div>
                      </div>
                  </div>
                )}
              </div>

              {hasSidebar && (
                <div className="w-[420px] bg-stone-50/50 p-10 pt-28 flex flex-col overflow-y-auto gap-6">
                  {selectedEmail.file_name && (
                    <div className="bg-white p-8 rounded-[3rem] border-2 border-stone-900 shadow-xl flex flex-col">
                      <div className="flex items-center gap-4 mb-6 text-emerald-600">
                        <Paperclip size={20} />
                        <span className="font-black text-sm uppercase tracking-widest">Attachment</span>
                      </div>
                      <div className="flex items-center justify-between p-4 bg-stone-50 rounded-3xl border border-stone-100 mb-4">
                        <span className="text-xs font-bold text-stone-600 truncate mr-4">{selectedEmail.file_name}</span>
                        <a href={`${API_BASE}/attachments/${selectedEmail.file_hash}.pdf`} target="_blank" rel="noreferrer" className="bg-stone-900 text-white p-3 rounded-full hover:bg-emerald-600 transition-colors shrink-0">
                          <Download size={14} />
                        </a>
                      </div>
                      <iframe src={`${API_BASE}/attachments/${selectedEmail.file_hash}.pdf#toolbar=0`} className="w-full h-[400px] rounded-2xl border border-stone-100 bg-stone-100" title="PDF Preview" />
                    </div>
                  )}

                  {hasShoppingList && (() => {
                    const d = selectedEmail.extracted_data;
                    const items: any[] = d.items || [];
                    const vendor: string = d.vendor || '';
                    const total: number = d.total || 0;

                    return (
                      <div className="bg-white p-8 rounded-[3rem] border-2 border-stone-900 shadow-xl flex flex-col">
                        <div className="flex items-center gap-4 mb-6 text-emerald-600">
                          <ShoppingCart size={20} />
                          <span className="font-black text-sm uppercase tracking-widest">
                            {vendor || 'Receipt Items'}
                          </span>
                        </div>

                        <div className="space-y-2 mb-4">
                          {items.map((item: any, idx: number) => (
                            <div key={idx} className="flex justify-between items-center border-b border-stone-50 pb-2 last:border-0">
                              <span className="text-sm font-bold text-stone-700 truncate mr-3">{item.item_name}</span>
                              <span className="text-sm font-black text-stone-900 shrink-0">
                                ${(item.price || item.sale_price || 0).toFixed(2)}
                              </span>
                            </div>
                          ))}
                        </div>

                        {total > 0 && (
                          <div className="flex justify-between items-center pt-3 border-t border-stone-200 mt-2">
                            <span className="text-[10px] font-black uppercase tracking-widest text-stone-400">Total</span>
                            <span className="text-xl font-black text-emerald-600">${total.toFixed(2)}</span>
                          </div>
                        )}
                      </div>
                    );
                  })()}
                </div>
              )}
            </div>
          </div>
        );
      })()}

      {/* ── NAV ───────────────────────────────────────────────── */}
      <nav className="px-12 py-8 flex items-center justify-between shrink-0 max-w-6xl mx-auto w-full">
        <h1
          onClick={() => { setView('home'); setSearchResults(null); setSearchQuery(''); }}
          className="text-3xl font-serif font-black italic cursor-pointer tracking-tighter hover:opacity-70 transition-opacity"
        >
          firewall.ai
        </h1>
        <div className="flex items-center gap-4">
          <button onClick={() => setView('sent')} className={`px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors flex items-center gap-2 ${view === 'sent' ? 'bg-stone-200 text-stone-800' : 'bg-stone-100 text-stone-600 hover:bg-stone-200'}`}>
            <History size={14} /> Sent
          </button>
          <button onClick={() => setIsComposing(true)} className="bg-stone-900 text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 transition-colors flex items-center gap-2 shadow-md">
            <PenSquare size={14} /> Compose
          </button>
          <div className="flex items-center gap-3 bg-white pl-2 pr-6 py-2 rounded-full shadow-sm border border-stone-200 ml-4">
            <div className="w-8 h-8 rounded-full bg-stone-900 text-emerald-400 flex items-center justify-center font-serif font-black italic text-lg">M</div>
            <div className="flex flex-col">
              <span className="text-[11px] font-black uppercase tracking-widest text-stone-800 leading-none">Martin</span>
              <span className="text-[9px] font-bold text-stone-400 uppercase tracking-wider">Admin</span>
            </div>
          </div>
        </div>
      </nav>

      {/* ── MAIN ──────────────────────────────────────────────── */}
      <main className="flex-1 flex flex-col w-full max-w-6xl mx-auto px-12">

        {/* ── SENT VIEW ─────────────────────────────────────── */}
        {view === 'sent' && (
          <div className="w-full flex flex-col animate-in fade-in duration-700 mt-4 pb-12">
             <div className="flex items-center gap-3 mb-8">
                <History className="text-stone-400" size={28} />
                <h2 className="text-4xl font-serif font-black italic text-stone-800 tracking-tighter">Sent History</h2>
             </div>
             <div className="bg-white rounded-[2rem] border border-stone-200 shadow-sm p-8 flex flex-col min-h-[400px]">
                {sentEmails.length === 0 ? (
                   <p className="text-stone-400 italic">No sent emails.</p>
                ) : (
                   <div className="space-y-2">
                     {sentEmails.map(m => (
                        <div key={m.id} className="flex items-center gap-4 p-4 hover:bg-stone-50 rounded-[2rem] border border-stone-100 transition-all cursor-pointer" onClick={() => setSelectedEmail(m)}>
                           <div className="w-10 h-10 shrink-0 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-600 font-serif italic text-lg border border-emerald-100">
                              <Send size={16} />
                           </div>
                           <div className="flex-1 min-w-0 pr-4">
                              <div className="flex justify-between items-baseline mb-1">
                                <p className="text-[10px] font-black uppercase text-stone-500 truncate tracking-widest">{m.sender}</p>
                                <span className="text-[9px] font-bold text-stone-400 shrink-0">{formatShortDate(m.received_at)}</span>
                              </div>
                              <p className="text-sm font-bold text-stone-800 truncate">{m.subject}</p>
                           </div>
                        </div>
                     ))}
                   </div>
                )}
             </div>
          </div>
        )}

        {/* ── HOME VIEW ─────────────────────────────────────── */}
        {view === 'home' && (
          <div className="w-full flex flex-col animate-in fade-in duration-700 mt-4">

            <form onSubmit={handleSearch} className="relative mb-12 shadow-md rounded-full group">
              {isSearching
                ? <Loader2 className="absolute left-6 top-1/2 -translate-y-1/2 text-emerald-500 animate-spin" size={24} />
                : <Search className="absolute left-6 top-1/2 -translate-y-1/2 text-stone-400 group-focus-within:text-emerald-500 transition-colors" size={24} />
              }
              <input
                type="text"
                value={searchQuery}
                onChange={e => setSearchQuery(e.target.value)}
                placeholder="Ask your email anything (e.g. 'What did my landlord say about the lease?')"
                className="w-full bg-white border-2 border-stone-200 focus:border-stone-900 rounded-full py-5 pl-16 pr-16 text-stone-800 font-medium outline-none transition-all text-lg shadow-inner"
              />
              {searchQuery && (
                <button type="button" onClick={() => { setSearchQuery(''); setSearchResults(null); }} className="absolute right-16 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-900 p-2">
                  <X size={18} />
                </button>
              )}
              <button type="submit" className="absolute right-3 top-1/2 -translate-y-1/2 bg-stone-900 text-white p-3 rounded-full hover:bg-emerald-600 transition-colors">
                <ArrowRight size={20} />
              </button>
            </form>

            {searchResults ? (
              <div className="bg-white rounded-[2rem] border border-stone-200 shadow-sm p-8 flex flex-col min-h-[400px]">
                <div className="flex justify-between items-center mb-8 border-b border-stone-100 pb-4">
                  <h3 className="text-[11px] font-black uppercase tracking-widest text-emerald-600 flex items-center gap-2">
                    <Search size={14} /> {searchResults.length} Results
                  </h3>
                  <button onClick={() => setSearchResults(null)} className="text-[10px] font-black uppercase tracking-widest text-stone-400 hover:text-stone-900 flex items-center gap-1">
                    <X size={12} /> Clear
                  </button>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  {searchResults.map((m, i) => (
                    <div key={i} onClick={() => setSelectedEmail(m)} className="relative group flex items-center gap-4 p-4 hover:bg-stone-50 rounded-[2rem] cursor-pointer border border-stone-100 hover:border-stone-300 transition-all">
                      <div className="w-10 h-10 shrink-0 rounded-full bg-stone-100 flex items-center justify-center text-stone-500 font-serif italic text-lg">
                        {m.sender.charAt(0).toUpperCase()}
                      </div>
                      <div className="flex-1 min-w-0 pr-4">
                        <p className="text-[10px] font-black uppercase text-stone-400 truncate tracking-widest">{m.sender}</p>
                        <p className="text-sm font-bold text-stone-800 truncate">{m.subject}</p>
                      </div>
                      
                      <div className="absolute right-3 top-1/2 -translate-y-1/2 flex gap-1 opacity-0 group-hover:opacity-100 transition-all bg-white pl-2">
                        <div className="relative">
                          <button onClick={ev => { ev.stopPropagation(); setRetagMenuId(retagMenuId === m.id ? null : m.id); }} className="p-1.5 text-stone-300 hover:text-emerald-500 hover:bg-emerald-50 rounded-full border border-transparent hover:border-stone-100 shadow-sm" title="Move to...">
                            <MoveRight size={14} />
                          </button>
                          {retagMenuId === m.id && (
                            <div onClick={ev => ev.stopPropagation()} className="absolute right-0 top-8 bg-white border-2 border-stone-900 rounded-2xl shadow-xl z-50 overflow-hidden min-w-[160px]">
                              <p className="text-[9px] font-black uppercase tracking-widest text-stone-400 px-4 pt-3 pb-1 text-left">File as Intelligence</p>
                              {/* 🟢 MAP OVER MOVE_MENU_TABS INSTEAD OF VAULT_TABS */}
                              {MOVE_MENU_TABS.filter(t => t.id !== 'ARCHIVED' && t.id !== 'SENT' && t.id !== m.librarian_tag).map(t => {
                                const TIcon = t.icon;
                                return (
                                  <button key={t.id} onClick={() => handleRetag(m.id, t.id, m.librarian_tag)} className="w-full flex items-center gap-2 px-4 py-2.5 text-xs font-bold text-stone-700 hover:bg-stone-50 transition-colors border-b last:border-0 border-stone-50">
                                    <TIcon size={12} className="text-stone-400" /> {t.label}
                                  </button>
                                );
                              })}
                            </div>
                          )}
                        </div>
                        <button onClick={ev => { ev.stopPropagation(); handleDelete(m.id); }} className="p-1.5 text-stone-300 hover:text-red-500 hover:bg-red-100 rounded-full"><Trash2 size={14} /></button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <>
                <div className="grid grid-cols-3 gap-8 mb-8">
                  
                  {/* Direct Messages */}
                  <div className="col-span-2 bg-white rounded-[2rem] border border-stone-200 shadow-sm p-6 flex flex-col h-[340px]">
                    <h3 className="text-[10px] font-black uppercase tracking-widest text-stone-400 flex items-center gap-2 mb-4 ml-2">
                      <User size={14} /> Direct Messages
                    </h3>
                    <div className="space-y-1 overflow-y-auto pr-2">
                      {feed.filter(e => e.is_human && !archivedIds.has(e.id)).slice(0, 8).map((m, i) => (
                        <div key={i} onClick={() => setSelectedEmail(m)} className="relative group flex items-center gap-4 p-3 hover:bg-stone-50 rounded-2xl cursor-pointer transition-colors border border-transparent hover:border-stone-100">
                          <div className="w-10 h-10 shrink-0 rounded-full bg-stone-100 flex items-center justify-center text-stone-500 font-serif italic text-lg">
                            {m.sender.charAt(0).toUpperCase()}
                          </div>
                          <div className="flex-1 min-w-0 pr-4">
                            <div className="flex justify-between items-baseline">
                              <p className="text-[10px] font-black uppercase text-emerald-600 truncate tracking-widest">{m.sender.split('@')[0]}</p>
                              <span className="text-[9px] font-bold text-stone-400 shrink-0 ml-2">{formatShortDate(m.received_at)}</span>
                            </div>
                            <p className="text-sm font-bold text-stone-800 truncate">{m.subject}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Auth Events */}
                  <div className="col-span-1 bg-white rounded-[2rem] border border-stone-200 shadow-sm p-6 flex flex-col h-[340px]">
                    <h3 className="text-[10px] font-black uppercase tracking-widest text-stone-400 flex items-center gap-2 mb-4 ml-2">
                      <ShieldAlert size={14} /> Auth Events
                    </h3>
                    <div className="space-y-1 overflow-y-auto pr-2">
                      {feed.filter(e => e.is_key && !archivedIds.has(e.id)).slice(0, 8).map((m, i) => (
                        <div key={i} onClick={() => setSelectedEmail(m)} className="relative group flex items-center gap-4 p-3 hover:bg-stone-50 rounded-2xl cursor-pointer border border-transparent hover:border-stone-100 transition-colors">
                          <div className="w-10 h-10 shrink-0 rounded-full bg-stone-50 flex items-center justify-center border border-stone-100">
                            {getAuthIcon(m.sender, m.subject)}
                          </div>
                          <div className="flex-1 min-w-0 pr-4">
                            <div className="flex justify-between items-baseline">
                              <p className="text-[10px] font-black uppercase text-stone-400 truncate tracking-widest">{m.sender.split('@')[0]}</p>
                              <span className="text-[9px] font-bold text-stone-300 shrink-0 ml-2">{formatShortDate(m.received_at)}</span>
                            </div>
                            <p className="text-sm font-bold text-stone-800 truncate">{m.subject}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Vault CTA */}
                <div onClick={() => setView('vault')} className="w-full bg-stone-900 rounded-[2.5rem] shadow-xl p-8 flex flex-col items-center justify-center cursor-pointer hover:bg-emerald-950 transition-colors group relative overflow-hidden border border-stone-800">
                  <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-stone-800 via-stone-900 to-stone-900 opacity-50" />
                  <div className="flex flex-col items-center relative z-10 w-full">
                    <div className="flex items-center gap-4 mb-3">
                      <TrendingUp size={36} className="text-emerald-400 group-hover:scale-110 transition-transform" />
                      <h2 className="text-4xl font-serif font-black italic text-white">The Vault</h2>
                    </div>
                    <p className="text-[10px] font-black uppercase text-emerald-500 tracking-[0.4em] mb-6 italic">Intelligence Analysis Engine</p>
                    <div className="flex gap-3 flex-wrap justify-center max-w-4xl">
                      {["Finance", "Receipts", "Deals", "Logistics", "Career", "Alerts", "Newsletters"].map(cat => (
                        <span key={cat} className="text-[10px] font-black text-stone-300 uppercase tracking-widest border border-stone-700 bg-stone-800/50 px-4 py-1.5 rounded-full shadow-inner flex items-center gap-1.5">
                          {cat}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>
        )}

        {/* ── VAULT VIEW ─────────────────────────────────────── */}
        {view === 'vault' && (
          <div className="w-full flex-1 flex flex-col animate-in slide-in-from-bottom-8 duration-500 pb-12 mt-4">

            {/* Tab bar */}
            <div className="flex gap-2 mb-8 bg-white border border-stone-200 p-2 rounded-full self-center shadow-sm overflow-x-auto max-w-full">
              {VAULT_TABS.map(tab => {
                const Icon = tab.icon;
                const isActive = activeTab === tab.id;
                const count = tab.id === 'ARCHIVED'
                  ? archivedIds.size
                  : feed.filter(e => e.librarian_tag === tab.id && !archivedIds.has(e.id)).length;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    onDragOver={e => { 
                      e.preventDefault(); 
                      if (draggedEmail) setDragOverTab(tab.id); 
                    }}
                    onDragLeave={() => setDragOverTab(null)}
                    onDrop={e => {
                      e.preventDefault();
                      setDragOverTab(null);
                      if (draggedEmail && tab.id !== draggedEmail.librarian_tag) {
                        handleRetag(draggedEmail.id, tab.id, draggedEmail.librarian_tag);
                      }
                      setDraggedEmail(null);
                    }}
                    className={`px-6 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-all whitespace-nowrap flex items-center gap-1.5
                      ${isActive ? 'bg-stone-900 text-white shadow-md' : 'text-stone-400 hover:text-stone-950'}
                      ${dragOverTab === tab.id ? 'ring-2 ring-emerald-400 bg-emerald-50 text-emerald-700 scale-105' : ''}
                    `}
                  >
                    <Icon size={11} /> {tab.label}
                    {count > 0 && (
                      <span className={`text-[8px] font-black px-1.5 py-0.5 rounded-full ml-0.5 ${isActive ? 'bg-white/20 text-white' : 'bg-stone-100 text-stone-500'}`}>
                        {count}
                      </span>
                    )}
                  </button>
                );
              })}
            </div>

            {/* Vault body */}
            <div className="bg-white border-2 border-stone-200 rounded-[4rem] flex-1 flex overflow-hidden shadow-xl h-[70vh]">

              {/* Intelligence left panel */}
              {activeTab !== 'ARCHIVED' && (
                <div className="w-[480px] p-12 border-r border-stone-100 overflow-y-auto bg-stone-50/50">
                  <IntelPanel activeTab={activeTab} intel={intel} feed={feed} setSelectedEmail={setSelectedEmail} archivedIds={archivedIds} />
                </div>
              )}

              {/* Email feed right panel */}
              <div className="flex-1 p-12 overflow-y-auto bg-white">
                {Object.entries(groupedFeed).map(([groupName, items]) =>
                  items.length > 0 ? (
                    <div key={groupName} className="mb-10">
                      <h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-400 mb-5 border-b border-stone-100 pb-3">{groupName}</h3>
                      <div className="grid grid-cols-2 gap-5">
                        {items.map((e, i) => {
                          const logoUrl = getLogo(e.sender);
                          const initial = e.sender.charAt(0).toUpperCase();
                          return (
                            <div
                              key={i}
                              onClick={() => { if (retagMenuId === e.id) { setRetagMenuId(null); return; } setSelectedEmail(e); }}
                              draggable
                              onDragStart={() => { setDraggedEmail(e); setRetagMenuId(null); }}
                              onDragEnd={() => setDraggedEmail(null)}
                              className={`relative group bg-white p-8 rounded-[3rem] border transition-all flex flex-col items-center text-center cursor-pointer
                                ${isRetagging === e.id ? 'border-emerald-300 bg-emerald-50/30 animate-pulse' : 'border-stone-100 hover:border-stone-900 hover:shadow-lg'}
                                ${draggedEmail?.id === e.id ? 'opacity-40 scale-95' : ''}
                              `}
                            >
                              {/* Top-right action bar */}
                              <div className="absolute right-4 top-4 flex gap-1 opacity-0 group-hover:opacity-100 transition-all z-10">
                                <div className="p-2 text-stone-300 cursor-grab active:cursor-grabbing">
                                  <GripVertical size={14} />
                                </div>
                                <div className="relative">
                                  <button
                                    onClick={ev => { ev.stopPropagation(); setRetagMenuId(retagMenuId === e.id ? null : e.id); }}
                                    className="p-2 text-stone-300 hover:text-emerald-500 hover:bg-emerald-50 rounded-full bg-white shadow-sm"
                                    title="Move to..."
                                  >
                                    <MoveRight size={14} />
                                  </button>
                                  {retagMenuId === e.id && (
                                    <div
                                      onClick={ev => ev.stopPropagation()}
                                      className="absolute right-0 top-8 bg-white border-2 border-stone-900 rounded-2xl shadow-xl z-50 overflow-hidden min-w-[160px]"
                                    >
                                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400 px-4 pt-3 pb-1 text-left">File as Intelligence</p>
                                      {/* 🟢 MAP OVER MOVE_MENU_TABS INSTEAD OF VAULT_TABS */}
                                      {MOVE_MENU_TABS.filter(t => t.id !== e.librarian_tag).map(t => {
                                        const TIcon = t.icon;
                                        return (
                                          <button
                                            key={t.id}
                                            onClick={() => handleRetag(e.id, t.id, e.librarian_tag)}
                                            className="w-full flex items-center gap-2 px-4 py-2.5 text-xs font-bold text-stone-700 hover:bg-stone-50 transition-colors border-b last:border-0 border-stone-50"
                                          >
                                            <TIcon size={12} className={t.id === 'ARCHIVED' ? "text-stone-400" : "text-emerald-500"} /> {t.label}
                                          </button>
                                        );
                                      })}
                                    </div>
                                  )}
                                </div>
                                <button onClick={ev => { ev.stopPropagation(); toggleArchive(e.id); }} className="p-2 text-stone-300 hover:text-emerald-500 hover:bg-emerald-50 rounded-full bg-white shadow-sm">
                                  <Archive size={14} />
                                </button>
                                <button onClick={ev => { ev.stopPropagation(); handleDelete(e.id); }} className="p-2 text-stone-300 hover:text-red-500 hover:bg-red-50 rounded-full bg-white shadow-sm">
                                  <Trash2 size={14} />
                                </button>
                              </div>
                              <div className="h-10 mb-4 flex items-center justify-center w-full">
                                {logoUrl ? (
                                  <img
                                    src={logoUrl}
                                    className="h-full object-contain grayscale group-hover:grayscale-0 transition-all duration-300"
                                    onError={el => el.currentTarget.style.display = 'none'}
                                    alt=""
                                  />
                                ) : (
                                  <div className="w-12 h-12 bg-stone-900 rounded-full flex items-center justify-center text-white text-xl font-serif italic shadow-sm">{initial}</div>
                                )}
                              </div>
                              <span className="text-[9px] font-black text-stone-300 uppercase tracking-widest mb-1">{formatShortDate(e.received_at)}</span>
                              <span className="text-[9px] font-black text-stone-400 uppercase tracking-widest mb-2 truncate w-full group-hover:text-emerald-500 transition-colors">{e.sender}</span>
                              <p className="text-sm font-bold text-stone-800 leading-tight tracking-tight line-clamp-2">{e.subject}</p>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  ) : null
                )}
                {displayFeed.length === 0 && (
                  <div className="h-full flex flex-col items-center justify-center text-stone-300 opacity-50">
                    <Archive size={48} />
                    <p className="font-black italic mt-4 tracking-widest uppercase text-sm">No items found</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}

import os
import sys
import psycopg2
from psycopg2.extras import RealDictCursor
from fastapi import FastAPI, BackgroundTasks
from fastapi.middleware.cors import CORSMiddleware
from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel
from typing import Optional
from dotenv import load_dotenv
from sentence_transformers import SentenceTransformer

# Import the worker function directly for native background execution
from intelligence_worker import run_domain

load_dotenv()
DB_HOST = os.getenv("DB_HOST", "localhost")
DB_NAME = os.getenv("DB_NAME", "postgres")
DB_USER = os.getenv("DB_USER", "postgres")
DB_PASS = os.getenv("DB_PASS")

app = FastAPI(title="firewall.ai Executive API")

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

ATTACHMENT_DIR = os.path.join(os.getcwd(), "saved_attachments")
os.makedirs(ATTACHMENT_DIR, exist_ok=True)
app.mount("/attachments", StaticFiles(directory=ATTACHMENT_DIR), name="attachments")

print("[INIT] Loading embedding model for search (all-mpnet-base-v2)...")
embed_model = SentenceTransformer('all-mpnet-base-v2')

def get_db_connection():
    return psycopg2.connect(
        host=DB_HOST, database=DB_NAME, user=DB_USER, password=DB_PASS,
        cursor_factory=RealDictCursor
    )

class EmailDraft(BaseModel):
    to_address: str
    cc_address: Optional[str] = ""
    bcc_address: Optional[str] = ""
    subject: str
    body: str
    reply_to_id: Optional[int] = None
    is_forward: Optional[bool] = False

@app.get("/api/intelligence")
def get_daily_intelligence():
    """Fetches the latest structured JSON from all 6 domain tables."""
    conn = get_db_connection()
    cur = conn.cursor()
    try:
        intel_payload = {}
        tables = [
            ("intel_finance", "FINANCE"),
            ("intel_groceries", "GROCERIES"), 
            ("intel_logistics", "LOGISTICS"),
            ("intel_career", "CAREER"),
            ("intel_notifications", "NOTIFICATION"),
            ("intel_newsletters", "NEWSLETTER")
        ]
        
        for table, key in tables:
            cur.execute(f"SELECT * FROM {table} ORDER BY report_date DESC LIMIT 1;")
            row = cur.fetchone()
            if row:
                # Strip metadata columns - only pass pure insight JSON to frontend
                row.pop("report_date", None)
                row.pop("last_updated", None)
                intel_payload[key] = row
                
        return intel_payload
    except Exception as e:
        print(f"[ERROR] Fetching intelligence: {e}")
        return {}
    finally:
        cur.close()
        conn.close()

@app.get("/api/live-feed")
def get_live_feed():
    conn = get_db_connection()
    cur = conn.cursor()
    try:
        cur.execute("""
            SELECT e.id, e.subject, e.sender, e.body_text, e.extracted_data, 
                   e.is_human, e.is_key, e.librarian_tag, e.received_at,
                   a.file_hash, a.file_name
            FROM emails e
            LEFT JOIN attachments a ON e.id = a.email_id
            ORDER BY e.received_at DESC LIMIT 100;
        """)
        return cur.fetchall()
    finally:
        cur.close()
        conn.close()

@app.get("/api/search")
def search_emails(q: str):
    if not q.strip(): return []
    conn = get_db_connection()
    cur = conn.cursor()
    try:
        query_vector = embed_model.encode(q).tolist()
        cur.execute("""
            SELECT e.id, e.subject, e.sender, e.body_text, e.extracted_data, 
                   e.is_human, e.is_key, e.librarian_tag, e.received_at,
                   a.file_hash, a.file_name,
                   1 - (em.embedding <=> %s::vector) AS similarity_score
            FROM emails e
            JOIN embeddings em ON e.id = em.email_id
            LEFT JOIN attachments a ON e.id = a.email_id
            ORDER BY em.embedding <=> %s::vector
            LIMIT 15;
        """, (query_vector, query_vector))
        return cur.fetchall()
    except Exception as e:
        print(f"[ERROR] Vector search failed: {e}")
        return []
    finally:
        cur.close()
        conn.close()

@app.post("/api/send")
def send_email(draft: EmailDraft):
    print(f"\n[DISPATCH] Secure outgoing message to {draft.to_address}")
    return {"status": "success", "message": "Message securely dispatched."}

@app.delete("/api/email/{email_id}")
def delete_email(email_id: int):
    conn = get_db_connection()
    cur = conn.cursor()
    try:
        cur.execute("DELETE FROM attachments WHERE email_id = %s;", (email_id,))
        cur.execute("DELETE FROM embeddings WHERE email_id = %s;", (email_id,))
        cur.execute("DELETE FROM emails WHERE id = %s;", (email_id,))
        conn.commit()
        return {"status": "success"}
    except Exception as e:
        conn.rollback()
        return {"status": "error"}
    finally:
        cur.close()
        conn.close()

class RetagRequest(BaseModel):
    new_tag: str
    old_tag: str

@app.patch("/api/email/{email_id}/retag")
def retag_email(email_id: int, req: RetagRequest, background_tasks: BackgroundTasks):
    """
    Re-tags an email and triggers targeted intelligence re-processing
    via native FastAPI background tasks to ensure rapid UI updates.
    """
    valid_tags = ["FINANCE", "RECEIPT", "PROMOTION", "LOGISTICS", "CAREER", "NOTIFICATION", "NEWSLETTER", "ARCHIVED", "HUMAN", "KEY"]
    new_tag = req.new_tag.upper()
    old_tag = req.old_tag.upper()

    if new_tag not in valid_tags:
        return {"status": "error", "message": f"Invalid tag: {new_tag}"}

    # Force the booleans to update so it completely leaves the Home screen if dragged to Vault
    is_human = True if new_tag == "HUMAN" else False
    is_key = True if new_tag == "KEY" else False

    conn = get_db_connection()
    cur = conn.cursor()
    try:
        # Update BOTH the tag and the booleans
        cur.execute("""
            UPDATE emails 
            SET librarian_tag = %s, is_human = %s, is_key = %s 
            WHERE id = %s
        """, (new_tag, is_human, is_key, email_id))
        conn.commit()
        print(f"\n[RETAG] Email {email_id}: {old_tag} -> {new_tag}")
    except Exception as e:
        conn.rollback()
        return {"status": "error", "message": str(e)}
    finally:
        cur.close()
        conn.close()

    # Re-run intelligence for both affected domains natively in the background
    worker_domains = {"FINANCE", "RECEIPT", "PROMOTION", "LOGISTICS", "CAREER", "NOTIFICATION", "NEWSLETTER"}
    tags_to_reprocess = [t for t in {old_tag, new_tag} if t in worker_domains]
    
    for tag in tags_to_reprocess:
        print(f"  [QUEUE] Background recalculation triggered for domain: {tag}")
        background_tasks.add_task(run_domain, tag)

    return {
        "status":    "success",
        "email_id":  email_id,
        "new_tag":   new_tag,
        "old_tag":   old_tag,
        "reprocessing": tags_to_reprocess,
    }

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)