MailFlow — Email Marketing Platform

const {useState,useEffect,useCallback,createContext,useContext}=React;
const {AreaChart,Area,BarChart,Bar,PieChart,Pie,Cell,XAxis,YAxis,CartesianGrid,Tooltip,ResponsiveContainer,Legend}=Recharts;
// MOCK DATA
const mockStats={overview:{total_contacts:14820,total_campaigns:48,sent_this_period:92400,avg_open_rate:34.8},daily_sends:Array.from({length:14},(_,i)=>({date:`Feb ${i+10}`,count:Math.floor(Math.random()*3000+800)})),top_campaigns:[{name:'Welcome Series',open_rate:68.2},{name:'Product Launch',open_rate:52.4},{name:'Spring Newsletter',open_rate:34.8},{name:'Re-engagement',open_rate:28.1},{name:'Weekly Digest',open_rate:24.3}],recent_campaigns:[{id:1,name:'Spring Newsletter 2024',status:'sent',sent_count:8420,unique_opens:2930,unique_clicks:870,total_recipients:8420,created_at:'2024-02-20'},{id:2,name:'Product Launch',status:'sent',sent_count:12100,unique_opens:4830,unique_clicks:1240,total_recipients:12100,created_at:'2024-02-18'},{id:3,name:'Weekly Digest #47',status:'sending',sent_count:3200,unique_opens:0,unique_clicks:0,total_recipients:6800,created_at:'2024-02-22'},{id:4,name:'Customer Re-engagement',status:'scheduled',sent_count:0,unique_opens:0,unique_clicks:0,total_recipients:4200,created_at:'2024-02-23'},{id:5,name:'Black Friday Teaser',status:'draft',sent_count:0,unique_opens:0,unique_clicks:0,total_recipients:0,created_at:'2024-02-24'}]};
const mockCampaigns=[{id:1,name:'Spring Newsletter 2024',subject:'🌸 New Season, New Looks',status:'sent',sent_count:8420,unique_opens:2930,unique_clicks:870,total_recipients:8420,created_at:'2024-02-20'},{id:2,name:'Product Launch Announcement',subject:'Introducing MailFlow 2.0',status:'sent',sent_count:12100,unique_opens:4830,unique_clicks:1240,total_recipients:12100,created_at:'2024-02-18'},{id:3,name:'Weekly Digest #47',subject:'This Week in Tech',status:'sending',sent_count:3200,unique_opens:0,unique_clicks:0,total_recipients:6800,created_at:'2024-02-22'},{id:4,name:'Customer Re-engagement',subject:"We miss you! Here's 20% off",status:'scheduled',sent_count:0,unique_opens:0,unique_clicks:0,total_recipients:4200,created_at:'2024-02-23'},{id:5,name:'Black Friday Teaser',subject:'Something BIG is coming...',status:'draft',sent_count:0,unique_opens:0,unique_clicks:0,total_recipients:0,created_at:'2024-02-24'},{id:6,name:'Onboarding Email 1',subject:'Welcome! Let\'s get started 🚀',status:'sent',sent_count:2840,unique_opens:2210,unique_clicks:980,total_recipients:2840,created_at:'2024-02-15'}];
const mockContacts=[{id:1,email:'alice@example.com',first_name:'Alice',last_name:'Johnson',company:'Acme Corp',status:'subscribed',total_opens:24,created_at:'2024-01-15',tags:['VIP','Customer']},{id:2,email:'bob@techcorp.io',first_name:'Bob',last_name:'Smith',company:'TechCorp',status:'subscribed',total_opens:8,created_at:'2024-01-18',tags:['Lead']},{id:3,email:'carol@startup.co',first_name:'Carol',last_name:'Williams',company:'Startup Co',status:'unsubscribed',total_opens:2,created_at:'2024-01-20',tags:[]},{id:4,email:'david@enterprise.com',first_name:'David',last_name:'Brown',company:'Enterprise Inc',status:'subscribed',total_opens:41,created_at:'2024-01-22',tags:['VIP','Enterprise']},{id:5,email:'emma@agency.net',first_name:'Emma',last_name:'Davis',company:'Creative Agency',status:'subscribed',total_opens:15,created_at:'2024-02-01',tags:['Agency']},{id:6,email:'frank@mail.com',first_name:'Frank',last_name:'Wilson',company:'Wilson LLC',status:'bounced',total_opens:0,created_at:'2024-02-05',tags:[]},{id:7,email:'grace@company.org',first_name:'Grace',last_name:'Taylor',company:'Nonprofit',status:'subscribed',total_opens:19,created_at:'2024-02-08',tags:['Nonprofit']},{id:8,email:'henry@dev.io',first_name:'Henry',last_name:'Anderson',company:'DevShop',status:'subscribed',total_opens:33,created_at:'2024-02-10',tags:['Developer']}];
const mockGroups=[{id:1,name:'All Subscribers',contact_count:14820,color:'#ff6200'},{id:2,name:'VIP Customers',contact_count:842,color:'#8b5cf6'},{id:3,name:'Newsletter',contact_count:8420,color:'#10b981'},{id:4,name:'Product Users',contact_count:3240,color:'#3b82f6'},{id:5,name:'Leads',contact_count:2318,color:'#f59e0b'}];
const mockTemplates=[{id:1,name:'Modern Newsletter',category:'Newsletter',thumbnail:'📰',usage_count:24},{id:2,name:'Product Launch',category:'Promotional',thumbnail:'🚀',usage_count:18},{id:3,name:'Welcome Email',category:'Transactional',thumbnail:'👋',usage_count:56},{id:4,name:'Event Invite',category:'Events',thumbnail:'🎉',usage_count:9},{id:5,name:'Re-engagement',category:'Automation',thumbnail:'💌',usage_count:15},{id:6,name:'Weekly Digest',category:'Newsletter',thumbnail:'📋',usage_count:32}];
const mockSmtp=[{id:1,name:'Primary SMTP',host:'smtp.sendgrid.net',port:587,encryption:'tls',from_email:'hello@company.com',from_name:'Company',is_default:1,is_verified:1},{id:2,name:'Transactional',host:'smtp.mailgun.org',port:587,encryption:'tls',from_email:'noreply@company.com',from_name:'Company',is_default:0,is_verified:1}];

// ─── API CONFIGURATION ────────────────────────────────────
// IMPORTANT: Change this to your actual API subdomain
const API_BASE = 'https://api.homaessence.com/api/v1';

// ─── API CLIENT ────────────────────────────────────────────
const api = {
  token: localStorage.getItem('mf_token') || null,

setToken(t) {
    this.token = t;
    if (t) localStorage.setItem('mf_token', t);
    else localStorage.removeItem('mf_token');
  },

async request(method, path, body = null) {
    const headers = { 'Content-Type': 'application/json' };
    if (this.token) headers['Authorization'] = 'Bearer ' + this.token;
    try {
      const res = await fetch(API_BASE + path, {
        method,
        headers,
        body: body ? JSON.stringify(body) : null,
      });
      const data = await res.json();
      if (res.status === 401) {
        this.setToken(null);
        window.location.reload();
      }
      return data;
    } catch (e) {
      console.error('API error:', path, e.message);
      return { success: false, message: 'Network error: ' + e.message, data: null };
    }
  },

get(path)             { return this.request('GET',    path); },
  post(path, body)      { return this.request('POST',   path, body); },
  put(path, body)       { return this.request('PUT',    path, body); },
  delete(path)          { return this.request('DELETE', path); },
  patch(path, body)     { return this.request('PATCH',  path, body); },
};

// ─── AUTH HELPERS ──────────────────────────────────────────
const Auth = {
  async login(email, password) {
    const res = await api.post('/auth/login', { email, password });
    if (res.success) {
      api.setToken(res.data.token);
      return res.data;
    }
    throw new Error(res.message || 'Login failed');
  },
  async me() {
    const res = await api.get('/auth/me');
    return res.success ? res.data : null;
  },
  logout() {
    api.post('/auth/logout').catch(() => {});
    api.setToken(null);
  },
  isLoggedIn() { return !!api.token; },
};

// ─── DATA HOOKS ────────────────────────────────────────────
function useApi(path, fallback) {
  const [data, setData] = useState(fallback);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

const fetch_ = useCallback(async () => {
    setLoading(true);
    const res = await api.get(path);
    if (res.success) setData(res.data);
    else setError(res.message);
    setLoading(false);
  }, [path]);

useEffect(() => { fetch_(); }, [fetch_]);
  return { data, loading, error, refetch: fetch_ };
}

// ICON
const Icon=({name,size=16})=>{
  const d={dashboard:<><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,campaigns:<><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></>,contacts:<><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,templates:<><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>,analytics:<><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></>,automation:<><rect x="2" y="2" width="9" height="9" rx="2"/><rect x="13" y="2" width="9" height="9" rx="2"/><rect x="2" y="13" width="9" height="9" rx="2"/><path d="M22 17.5H16"/><path d="M19 15v5"/></>,settings:<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,smtp:<><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.1 19.79 19.79 0 0 1 1.62 4.43 2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></>,users:<><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></>,plus:<><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,search:<><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,bell:<><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,moon:<><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></>,sun:<><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></>,x:<><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,send:<><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,edit:<><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></>,trash:<><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>,eye:<><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,copy:<><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>,pause:<><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></>,play:<><polygon points="5 3 19 12 5 21 5 3"/></>,upload:<><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></>,download:<><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.36"/></>,filter:<><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>,check:<><polyline points="20 6 9 17 4 12"/></>,chevronRight:<><polyline points="9 18 15 12 9 6"/></>,mail:<><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,zap:<><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></>,info:<><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>,activity:<><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></>,menu:<><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></>,trendUp:<><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>,users2:<><path d="M14 19a6 6 0 0 0-12 0"/><circle cx="8" cy="9" r="4"/><path d="M22 19a6 6 0 0 0-6-6 4 4 0 0 0 0-8"/></>};
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{d[name]||null}</svg>;
};

// SHARED
const Modal=({open,onClose,title,children,size='md',footer})=>{
  useEffect(()=>{document.body.style.overflow=open?'hidden':'';return()=>{document.body.style.overflow='';};},[open]);
  if(!open)return null;
  return <div className="modal-overlay" onClick={e=>e.target===e.currentTarget&&onClose()}><div className={`modal modal-${size}`}><div className="modal-header"><div className="modal-title">{title}</div><button className="modal-close" onClick={onClose}><Icon name="x" size={14}/></button></div><div className="modal-body">{children}</div>{footer&&<div className="modal-footer">{footer}</div>}</div></div>;
};
const StatusBadge=({status})=>{
  const m={sent:'badge-sent',draft:'badge-draft',scheduled:'badge-scheduled',sending:'badge-sending',paused:'badge-paused',failed:'badge-failed',subscribed:'badge-subscribed',unsubscribed:'badge-unsubscribed',bounced:'badge-bounced'};
  const l={sent:'Sent',draft:'Draft',scheduled:'Scheduled',sending:'Sending…',paused:'Paused',failed:'Failed',subscribed:'Subscribed',unsubscribed:'Unsubscribed',bounced:'Bounced'};
  return <span className={`badge ${m[status]||'badge-draft'}`}>{status==='sending'&&<span className="status-dot dot-orange"/>}{l[status]||status}</span>;
};

// DASHBOARD
const DashboardPage=({addToast})=>{
  const [liveStats,setLiveStats]=useState(null);
  useEffect(()=>{
    api.get('/analytics/dashboard').then(res=>{
      if(res.success && res.data) setLiveStats(res.data);
    }).catch(()=>{});
  },[]);
  const s = liveStats ? {
    overview: liveStats.overview || mockStats.overview,
    daily_sends: liveStats.daily_sends && liveStats.daily_sends.length ? liveStats.daily_sends.map(d=>({date:d.date.slice(5),count:parseInt(d.count)})) : mockStats.daily_sends,
    top_campaigns: liveStats.top_campaigns || mockStats.top_campaigns,
    recent_campaigns: liveStats.recent_campaigns || mockStats.recent_campaigns,
  } : mockStats;
  const COLORS=['#ff6200','#10b981','#3b82f6','#f59e0b'];
  const week=[{n:'Mon',o:68,c:24},{n:'Tue',o:72,c:31},{n:'Wed',o:58,c:19},{n:'Thu',o:84,c:42},{n:'Fri',o:76,c:35},{n:'Sat',o:49,c:18},{n:'Sun',o:55,c:22}];
  const dev=[{name:'Mobile',value:54},{name:'Desktop',value:31},{name:'Tablet',value:15}];
  return(<div className="page-body">
    <div className="stats-grid">
      {[{l:'Total Contacts',v:s.overview.total_contacts.toLocaleString(),c:'+12.4%',i:'users2',bg:'rgba(255,98,0,0.1)'},{l:'Campaigns',v:s.overview.total_campaigns,c:'+3 this month',i:'send',bg:'rgba(59,130,246,0.1)'},{l:'Emails Sent (30d)',v:`${(s.overview.sent_this_period/1000).toFixed(1)}k`,c:'+18.2%',i:'mail',bg:'rgba(16,185,129,0.1)'},{l:'Avg Open Rate',v:`${s.overview.avg_open_rate}%`,c:'+2.1% vs industry',i:'eye',bg:'rgba(245,158,11,0.1)'}].map((c,i)=>(
        <div key={i} className="stat-card"><div className="stat-label">{c.l}</div><div className="stat-value">{c.v}</div><div className="stat-change up"><Icon name="trendUp" size={12}/>{c.c}</div><div style={{position:'absolute',top:18,right:18,width:38,height:38,borderRadius:10,background:c.bg,display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name={c.i} size={18}/></div></div>
      ))}
    </div>
    <div className="chart-row">
      <div className="card"><div className="card-header"><div className="card-title">Email Sends — Last 14 Days</div></div><div className="card-body"><div style={{height:220}}><ResponsiveContainer width="100%" height="100%"><AreaChart data={s.daily_sends}><defs><linearGradient id="sg" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#ff6200" stopOpacity={0.2}/><stop offset="95%" stopColor="#ff6200" stopOpacity={0}/></linearGradient></defs><CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false}/><XAxis dataKey="date" tick={{fontSize:11,fill:'var(--text-muted)'}} axisLine={false} tickLine={false}/><YAxis tick={{fontSize:11,fill:'var(--text-muted)'}} axisLine={false} tickLine={false} tickFormatter={v=>v>=1000?`${(v/1000).toFixed(1)}k`:v}/><Tooltip contentStyle={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:8,fontSize:12}}/><Area type="monotone" dataKey="count" stroke="#ff6200" strokeWidth={2} fill="url(#sg)" name="Emails Sent"/></AreaChart></ResponsiveContainer></div></div></div>
      <div className="card"><div className="card-header"><div className="card-title">Opens by Device</div></div><div className="card-body"><div style={{height:220}}><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={dev} cx="50%" cy="50%" innerRadius={60} outerRadius={85} paddingAngle={3} dataKey="value">{dev.map((e,i)=><Cell key={i} fill={COLORS[i]}/>)}</Pie><Tooltip contentStyle={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:8,fontSize:12}}/><Legend wrapperStyle={{fontSize:12}}/></PieChart></ResponsiveContainer></div></div></div>
    </div>
    <div className="grid-2" style={{marginBottom:24}}>
      <div className="card"><div className="card-header"><div className="card-title">Weekly Performance</div></div><div className="card-body"><div style={{height:200}}><ResponsiveContainer width="100%" height="100%"><BarChart data={week} barGap={4}><CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false}/><XAxis dataKey="n" tick={{fontSize:11,fill:'var(--text-muted)'}} axisLine={false} tickLine={false}/><YAxis tick={{fontSize:11,fill:'var(--text-muted)'}} axisLine={false} tickLine={false}/><Tooltip contentStyle={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:8,fontSize:12}}/><Bar dataKey="o" fill="#ff6200" radius={[4,4,0,0]} name="Opens"/><Bar dataKey="c" fill="var(--surface-3)" radius={[4,4,0,0]} name="Clicks"/></BarChart></ResponsiveContainer></div></div></div>
      <div className="card"><div className="card-header"><div className="card-title">Top Campaigns</div></div><div className="card-body" style={{padding:'16px 20px'}}>{s.top_campaigns.map((c,i)=>(<div key={i} style={{marginBottom:i<4?14:0}}><div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}><span style={{fontSize:13,fontWeight:500}}>{c.name}</span><span style={{fontSize:13,fontWeight:700,color:'var(--orange)'}}>{c.open_rate}%</span></div><div className="progress-bar"><div className="progress-fill" style={{width:`${c.open_rate}%`}}/></div></div>))}</div></div>
    </div>
    <div className="card"><div className="card-header"><div className="card-title">Recent Campaigns</div><button className="btn btn-secondary btn-sm">View All</button></div><div className="card-body" style={{padding:'0 0 4px'}}><div className="table-wrap"><table><thead><tr><th>Campaign</th><th>Status</th><th>Recipients</th><th>Open Rate</th><th>Click Rate</th><th>Date</th></tr></thead><tbody>{s.recent_campaigns.map(c=>(<tr key={c.id}><td><span style={{fontWeight:500}}>{c.name}</span></td><td><StatusBadge status={c.status}/></td><td>{c.total_recipients.toLocaleString()}</td><td>{c.total_recipients>0?`${(c.unique_opens/c.total_recipients*100).toFixed(1)}%`:'—'}</td><td>{c.total_recipients>0?`${(c.unique_clicks/c.total_recipients*100).toFixed(1)}%`:'—'}</td><td style={{color:'var(--text-muted)',fontSize:12}}>{c.created_at}</td></tr>))}</tbody></table></div></div></div>
  </div>);
};

// CAMPAIGNS
const CampaignsPage=({addToast})=>{
  const [campaigns,setCampaigns]=useState(mockCampaigns);
  const [apiLoading,setApiLoading]=useState(false);

useEffect(()=>{
    setApiLoading(true);
    api.get('/campaigns').then(res=>{
      if(res.success && res.data && res.data.length > 0) setCampaigns(res.data);
    }).catch(()=>{}).finally(()=>setApiLoading(false));
  },[]);
  const [filter,setFilter]=useState('all');
  const [search,setSearch]=useState('');
  const [showCreate,setShowCreate]=useState(false);
  const [selected,setSelected]=useState([]);
  const [form,setForm]=useState({name:'',subject:'',from_name:'',from_email:''});
  const filtered=campaigns.filter(c=>(filter==='all'||c.status===filter)&&(!search||c.name.toLowerCase().includes(search.toLowerCase())));
  const handleCreate=async()=>{
    const res = await api.post('/campaigns', form);
    if(res.success){
      setCampaigns(p=>[{...form,id:res.data.id,status:'draft',sent_count:0,unique_opens:0,unique_clicks:0,total_recipients:0,created_at:new Date().toISOString().slice(0,10)},...p]);
      addToast('Campaign created!','success');
    } else {
      setCampaigns(p=>[{...form,id:Date.now(),status:'draft',sent_count:0,unique_opens:0,unique_clicks:0,total_recipients:0,created_at:new Date().toISOString().slice(0,10)},...p]);
      addToast('Campaign saved (offline mode)','info');
    }
    setShowCreate(false);setForm({name:'',subject:'',from_name:'',from_email:''});
  };
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
      <div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>Campaigns</h2><p style={{color:'var(--text-muted)',fontSize:13}}>{campaigns.length} total campaigns</p></div>
      <button className="btn btn-primary" onClick={()=>setShowCreate(true)}><Icon name="plus" size={15}/>New Campaign</button>
    </div>
    <div style={{display:'flex',gap:12,marginBottom:20,flexWrap:'wrap'}}>
      <div className="filter-tabs">{['all','draft','scheduled','sending','sent','paused'].map(f=><button key={f} className={`filter-tab ${filter===f?'active':''}`} onClick={()=>setFilter(f)}>{f.charAt(0).toUpperCase()+f.slice(1)}</button>)}</div>
      <div className="search-wrap" style={{marginLeft:'auto'}}><Icon name="search" size={15}/><input className="form-input search-input" placeholder="Search..." value={search} onChange={e=>setSearch(e.target.value)} style={{width:220}}/></div>
    </div>
    <div className="card"><div className="table-wrap"><table><thead><tr><th style={{width:40}}><input type="checkbox" className="table-row-select" onChange={e=>setSelected(e.target.checked?filtered.map(c=>c.id):[])}/></th><th>Campaign</th><th>Status</th><th>Recipients</th><th>Open Rate</th><th>Click Rate</th><th>Created</th><th>Actions</th></tr></thead>
    <tbody>{filtered.map(c=>(<tr key={c.id}><td><input type="checkbox" className="table-row-select" checked={selected.includes(c.id)} onChange={()=>setSelected(p=>p.includes(c.id)?p.filter(x=>x!==c.id):[...p,c.id])}/></td><td><div style={{fontWeight:600,marginBottom:2}}>{c.name}</div><div style={{fontSize:12,color:'var(--text-muted)',maxWidth:280,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{c.subject}</div></td><td><StatusBadge status={c.status}/></td><td>{c.total_recipients.toLocaleString()||'—'}</td><td>{c.total_recipients>0?<div><div style={{fontWeight:600,fontSize:13}}>{(c.unique_opens/c.total_recipients*100).toFixed(1)}%</div><div style={{fontSize:11,color:'var(--text-muted)'}}>{c.unique_opens.toLocaleString()} opens</div></div>:'—'}</td><td>{c.total_recipients>0?<div><div style={{fontWeight:600,fontSize:13}}>{(c.unique_clicks/c.total_recipients*100).toFixed(1)}%</div><div style={{fontSize:11,color:'var(--text-muted)'}}>{c.unique_clicks.toLocaleString()} clicks</div></div>:'—'}</td><td style={{color:'var(--text-muted)',fontSize:12}}>{c.created_at}</td><td><div style={{display:'flex',gap:6}}><button className="btn btn-ghost btn-sm"><Icon name="edit" size={14}/></button>{c.status==='draft'&&<button className="btn btn-primary btn-sm" onClick={()=>addToast('Campaign queued!','success')}><Icon name="send" size={14}/>Send</button>}{c.status==='sending'&&<button className="btn btn-secondary btn-sm"><Icon name="pause" size={14}/>Pause</button>}<button className="btn btn-ghost btn-sm"><Icon name="copy" size={14}/></button><button className="btn btn-ghost btn-sm" style={{color:'var(--danger)'}} onClick={()=>{setCampaigns(p=>p.filter(x=>x.id!==c.id));addToast('Deleted','info');}}><Icon name="trash" size={14}/></button></div></td></tr>))}
    {filtered.length===0&&<tr><td colSpan={8}><div className="empty-state"><div className="empty-icon">📭</div><div className="empty-title">No campaigns found</div><div className="empty-text">Create your first campaign to start sending</div><button className="btn btn-primary" onClick={()=>setShowCreate(true)}><Icon name="plus"/>New Campaign</button></div></td></tr>}
    </tbody></table></div></div>
    <Modal open={showCreate} onClose={()=>setShowCreate(false)} title="Create New Campaign" size="md" footer={<><button className="btn btn-secondary" onClick={()=>setShowCreate(false)}>Cancel</button><button className="btn btn-primary" onClick={handleCreate} disabled={!form.name||!form.subject}><Icon name="send"/>Create</button></>}>
      <div className="form-group"><label className="form-label">Campaign Name *</label><input className="form-input" placeholder="e.g. Spring Newsletter 2024" value={form.name} onChange={e=>setForm(p=>({...p,name:e.target.value}))}/></div>
      <div className="form-group"><label className="form-label">Email Subject *</label><input className="form-input" placeholder="Enter subject line" value={form.subject} onChange={e=>setForm(p=>({...p,subject:e.target.value}))}/><div className="form-hint">Keep under 60 characters for best results</div></div>
      <div className="grid-2"><div className="form-group"><label className="form-label">From Name</label><input className="form-input" placeholder="Your Company" value={form.from_name} onChange={e=>setForm(p=>({...p,from_name:e.target.value}))}/></div><div className="form-group"><label className="form-label">From Email</label><input className="form-input" type="email" placeholder="hello@company.com" value={form.from_email} onChange={e=>setForm(p=>({...p,from_email:e.target.value}))}/></div></div>
      <div className="form-group"><label className="form-label">Template</label><div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>{mockTemplates.slice(0,3).map(t=><div key={t.id} className="template-card"><div className="template-preview" style={{height:70,fontSize:24}}>{t.thumbnail}</div><div className="template-info"><div className="template-name" style={{fontSize:11}}>{t.name}</div></div></div>)}</div></div>
    </Modal>
  </div>);
};

// CONTACTS
const ContactsPage=({addToast})=>{
  const [contacts,setContacts]=useState(mockContacts);

useEffect(()=>{
    api.get('/contacts').then(res=>{
      if(res.success && res.data && res.data.length > 0) setContacts(res.data);
    }).catch(()=>{});
  },[]);
  const [groups]=useState(mockGroups);
  const [activeGroup,setActiveGroup]=useState(null);
  const [search,setSearch]=useState('');
  const [showAdd,setShowAdd]=useState(false);
  const [showImport,setShowImport]=useState(false);
  const [form,setForm]=useState({email:'',first_name:'',last_name:'',company:'',phone:''});
  const filtered=contacts.filter(c=>!search||(c.email+c.first_name+c.last_name).toLowerCase().includes(search.toLowerCase()));
  const handleAdd=async()=>{
    if(!form.email)return;
    const res = await api.post('/contacts', form);
    setContacts(p=>[{...form,id:(res.data&&res.data.id)||Date.now(),status:'subscribed',total_opens:0,created_at:new Date().toISOString().slice(0,10),tags:[]},...p]);
    setShowAdd(false);setForm({email:'',first_name:'',last_name:'',company:'',phone:''});
    addToast('Contact added!','success');
  };
  return(<div className="page-body" style={{display:'flex',gap:20}}>
    <div style={{width:220,flexShrink:0}}><div className="card" style={{marginBottom:0}}>
      <div className="card-header"><div className="card-title" style={{fontSize:13}}>Lists & Groups</div><button className="btn btn-ghost btn-sm" style={{padding:'4px 8px'}}><Icon name="plus" size={14}/></button></div>
      <div style={{padding:'8px 0'}}>
        <div className={`nav-item ${!activeGroup?'active':''}`} style={{margin:'0 8px'}} onClick={()=>setActiveGroup(null)}><Icon name="users2" size={15}/>All Contacts<span style={{marginLeft:'auto',fontSize:12,color:'var(--text-muted)'}}>{contacts.length}</span></div>
        {groups.map(g=><div key={g.id} className={`nav-item ${activeGroup===g.id?'active':''}`} style={{margin:'0 8px'}} onClick={()=>setActiveGroup(g.id)}><div style={{width:8,height:8,borderRadius:'50%',background:g.color,flexShrink:0}}/><span style={{flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{g.name}</span><span style={{fontSize:12,color:'var(--text-muted)'}}>{g.contact_count.toLocaleString()}</span></div>)}
      </div>
    </div></div>
    <div style={{flex:1,minWidth:0}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
        <div style={{display:'flex',gap:10}}><div className="search-wrap"><Icon name="search" size={15}/><input className="form-input search-input" placeholder="Search contacts..." value={search} onChange={e=>setSearch(e.target.value)} style={{width:220}}/></div><button className="btn btn-secondary btn-sm"><Icon name="filter" size={14}/>Filter</button></div>
        <div style={{display:'flex',gap:10}}><button className="btn btn-secondary" onClick={()=>setShowImport(true)}><Icon name="upload" size={15}/>Import CSV</button><button className="btn btn-primary" onClick={()=>setShowAdd(true)}><Icon name="plus"/>Add Contact</button></div>
      </div>
      <div className="card"><div className="table-wrap"><table><thead><tr><th style={{width:40}}><input type="checkbox" className="table-row-select"/></th><th>Contact</th><th>Company</th><th>Status</th><th>Opens</th><th>Tags</th><th>Added</th><th>Actions</th></tr></thead>
      <tbody>{filtered.map(c=>(<tr key={c.id}><td><input type="checkbox" className="table-row-select"/></td><td><div style={{display:'flex',alignItems:'center',gap:10}}><div className="user-avatar" style={{width:32,height:32,fontSize:11,flexShrink:0}}>{(c.first_name||c.email)[0].toUpperCase()}</div><div><div style={{fontWeight:600,fontSize:13}}>{c.first_name} {c.last_name}</div><div style={{fontSize:12,color:'var(--text-muted)'}}>{c.email}</div></div></div></td><td style={{color:'var(--text-secondary)',fontSize:13}}>{c.company||'—'}</td><td><StatusBadge status={c.status}/></td><td style={{fontWeight:600}}>{c.total_opens}</td><td><div style={{display:'flex',gap:4,flexWrap:'wrap'}}>{(c.tags||[]).map(t=><span key={t} style={{background:'var(--surface-2)',border:'1px solid var(--border)',borderRadius:4,fontSize:11,padding:'2px 6px',fontWeight:500}}>{t}</span>)}</div></td><td style={{color:'var(--text-muted)',fontSize:12}}>{c.created_at}</td><td><div style={{display:'flex',gap:6}}><button className="btn btn-ghost btn-sm"><Icon name="edit" size={14}/></button><button className="btn btn-ghost btn-sm" style={{color:'var(--danger)'}} onClick={()=>{setContacts(p=>p.filter(x=>x.id!==c.id));addToast('Removed','info');}}><Icon name="trash" size={14}/></button></div></td></tr>))}</tbody></table></div>
      <div style={{padding:'12px 16px',display:'flex',justifyContent:'space-between',alignItems:'center',borderTop:'1px solid var(--border)'}}><span style={{fontSize:13,color:'var(--text-muted)'}}>Showing {filtered.length} of {contacts.length}</span><div style={{display:'flex',gap:4}}><button className="btn btn-secondary btn-sm">Prev</button><button className="btn btn-secondary btn-sm">Next</button></div></div>
    </div></div>
    <Modal open={showAdd} onClose={()=>setShowAdd(false)} title="Add Contact" size="md" footer={<><button className="btn btn-secondary" onClick={()=>setShowAdd(false)}>Cancel</button><button className="btn btn-primary" onClick={handleAdd} disabled={!form.email}>Add Contact</button></>}>
      <div className="form-group"><label className="form-label">Email *</label><input className="form-input" type="email" placeholder="contact@example.com" value={form.email} onChange={e=>setForm(p=>({...p,email:e.target.value}))}/></div>
      <div className="grid-2"><div className="form-group"><label className="form-label">First Name</label><input className="form-input" placeholder="John" value={form.first_name} onChange={e=>setForm(p=>({...p,first_name:e.target.value}))}/></div><div className="form-group"><label className="form-label">Last Name</label><input className="form-input" placeholder="Doe" value={form.last_name} onChange={e=>setForm(p=>({...p,last_name:e.target.value}))}/></div></div>
      <div className="grid-2"><div className="form-group"><label className="form-label">Company</label><input className="form-input" value={form.company} onChange={e=>setForm(p=>({...p,company:e.target.value}))}/></div><div className="form-group"><label className="form-label">Phone</label><input className="form-input" value={form.phone} onChange={e=>setForm(p=>({...p,phone:e.target.value}))}/></div></div>
      <div className="form-group"><label className="form-label">Add to List</label><select className="form-input form-select"><option value="">Select a list...</option>{groups.map(g=><option key={g.id} value={g.id}>{g.name}</option>)}</select></div>
    </Modal>
    <Modal open={showImport} onClose={()=>setShowImport(false)} title="Import Contacts" size="md" footer={<><button className="btn btn-secondary" onClick={()=>setShowImport(false)}>Cancel</button><button className="btn btn-primary" onClick={()=>{setShowImport(false);addToast('847 contacts imported, 12 skipped','success');}}><Icon name="upload"/>Import</button></>}>
      <div className="dropzone" style={{marginBottom:16}}><div style={{fontSize:40,marginBottom:12}}>📂</div><div style={{fontSize:14,fontWeight:500,color:'var(--text-secondary)'}}>Drop your CSV or Excel file here</div><div style={{fontSize:12,color:'var(--text-muted)',marginTop:4}}>or click to browse — CSV, XLS, XLSX supported</div></div>
      <div className="form-group"><label className="form-label">Add to List</label><select className="form-input form-select"><option value="">Select a list (optional)</option>{groups.map(g=><option key={g.id} value={g.id}>{g.name}</option>)}</select></div>
      <div style={{background:'var(--surface-2)',border:'1px solid var(--border)',borderRadius:8,padding:12,fontSize:13}}><div style={{fontWeight:600,marginBottom:6}}>Required columns</div><div style={{color:'var(--text-muted)'}}>Required: <code>email</code> — Optional: <code>first_name</code>, <code>last_name</code>, <code>company</code></div></div>
    </Modal>
  </div>);
};

// TEMPLATES
const TemplatesPage=({addToast})=>{
  const [templates,setTemplates]=useState(mockTemplates);
  const [filter,setFilter]=useState('all');
  const [showCreate,setShowCreate]=useState(false);
  const sampleHtml=`<!DOCTYPE html><html><body style="font-family:sans-serif;background:#f7f7f5;margin:0;padding:20px"><div style="max-width:600px;margin:0 auto;background:white;border-radius:12px;overflow:hidden"><div style="background:#ff6200;padding:32px 40px;text-align:center"><h1 style="color:white;margin:0">{{company_name}}</h1></div><div style="padding:40px"><p>Hi {{first_name}},</p><p style="color:#666;line-height:1.7">Your personalized email content goes here. Use placeholders like {{first_name}} and {{email}} for personalization.</p><div style="text-align:center;margin:32px 0"><a href="#" style="background:#ff6200;color:white;padding:14px 32px;border-radius:8px;text-decoration:none;font-weight:700">Call to Action</a></div></div><div style="background:#f7f7f5;padding:24px;text-align:center;color:#999;font-size:12px"><a href="{{unsubscribe_url}}" style="color:#ff6200">Unsubscribe</a></div></div></body></html>`;
  const cats=['all','Newsletter','Promotional','Transactional','Events','Automation'];
  const filtered=filter==='all'?templates:templates.filter(t=>t.category===filter);
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}><div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>Email Templates</h2><p style={{color:'var(--text-muted)',fontSize:13}}>{templates.length} templates</p></div><button className="btn btn-primary" onClick={()=>setShowCreate(true)}><Icon name="plus"/>New Template</button></div>
    <div className="filter-tabs" style={{marginBottom:20}}>{cats.map(c=><button key={c} className={`filter-tab ${filter===c?'active':''}`} onClick={()=>setFilter(c)}>{c}</button>)}</div>
    <div className="template-grid">
      {filtered.map(t=>(<div key={t.id} className="template-card"><div className="template-preview">{t.thumbnail}</div><div className="template-info"><div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}><div><div className="template-name">{t.name}</div><div className="template-category">{t.category} · Used {t.usage_count}x</div></div><div style={{display:'flex',gap:4}}><button className="btn btn-ghost btn-sm" style={{padding:'4px 6px'}}><Icon name="edit" size={12}/></button><button className="btn btn-ghost btn-sm" style={{padding:'4px 6px'}} onClick={()=>{setTemplates(p=>p.filter(x=>x.id!==t.id));addToast('Template deleted','info');}}><Icon name="trash" size={12}/></button></div></div><button className="btn btn-primary btn-sm" style={{width:'100%',marginTop:10,justifyContent:'center'}}>Use Template</button></div></div>))}
      <div className="template-card" style={{border:'2px dashed var(--border)'}} onClick={()=>setShowCreate(true)}><div className="template-preview" style={{fontSize:36,color:'var(--text-muted)',background:'transparent'}}><Icon name="plus" size={32}/></div><div className="template-info" style={{textAlign:'center'}}><div className="template-name">Create New</div><div className="template-category">Start from scratch</div></div></div>
    </div>
    <Modal open={showCreate} onClose={()=>setShowCreate(false)} title="Create Email Template" size="xl" footer={<><button className="btn btn-secondary" onClick={()=>setShowCreate(false)}>Cancel</button><button className="btn btn-primary" onClick={()=>{setTemplates(p=>[...p,{id:Date.now(),name:'New Template',category:'Custom',thumbnail:'✉️',usage_count:0}]);setShowCreate(false);addToast('Template saved!','success');}}><Icon name="check"/>Save Template</button></>}>
      <div className="grid-2" style={{height:460,gap:0,overflow:'hidden',borderRadius:8,border:'1px solid var(--border)'}}><div style={{borderRight:'1px solid var(--border)',display:'flex',flexDirection:'column'}}><div style={{padding:'10px 12px',borderBottom:'1px solid var(--border)',background:'var(--surface-2)',fontSize:11,fontWeight:700,color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:1}}>HTML Editor</div><textarea className="form-input" defaultValue={sampleHtml} style={{flex:1,resize:'none',border:'none',borderRadius:0,fontFamily:'monospace',fontSize:11,background:'var(--surface-2)',lineHeight:1.6}}/></div><div style={{display:'flex',flexDirection:'column'}}><div style={{padding:'10px 12px',borderBottom:'1px solid var(--border)',background:'var(--surface-2)',fontSize:11,fontWeight:700,color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:1}}>Live Preview</div><iframe srcDoc={sampleHtml} style={{flex:1,border:'none',width:'100%'}} title="Preview"/></div></div>
      <div className="grid-2" style={{marginTop:16}}><div className="form-group" style={{marginBottom:0}}><label className="form-label">Template Name</label><input className="form-input" defaultValue="New Template"/></div><div className="form-group" style={{marginBottom:0}}><label className="form-label">Category</label><select className="form-input form-select"><option>Newsletter</option><option>Promotional</option><option>Transactional</option><option>Events</option></select></div></div>
    </Modal>
  </div>);
};
// ANALYTICS
const AnalyticsPage=({addToast})=>{
  const [period,setPeriod]=useState('30');
  const perf=[{n:'Wk 1',sent:12400,opens:4300,clicks:1200},{n:'Wk 2',sent:15200,opens:5800,clicks:1800},{n:'Wk 3',sent:11800,opens:3900,clicks:980},{n:'Wk 4',sent:18600,opens:7200,clicks:2400}];
  const geo=[{country:'United States',pct:42,color:'#ff6200'},{country:'United Kingdom',pct:18,color:'#ff9a00'},{country:'Canada',pct:12,color:'#10b981'},{country:'Australia',pct:8,color:'#3b82f6'},{country:'Germany',pct:6,color:'#8b5cf6'},{country:'Others',pct:14,color:'var(--border-strong)'}];
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}><div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>Analytics</h2><p style={{color:'var(--text-muted)',fontSize:13}}>Performance insights across all campaigns</p></div><div className="filter-tabs">{['7','30','90'].map(p=><button key={p} className={`filter-tab ${period===p?'active':''}`} onClick={()=>setPeriod(p)}>Last {p}d</button>)}</div></div>
    <div className="stats-grid" style={{marginBottom:24}}>{[{l:'Total Sent',v:'92.4k',c:'+18.2%'},{l:'Avg Open Rate',v:'34.8%',c:'+2.1%'},{l:'Avg Click Rate',v:'9.2%',c:'+0.8%'},{l:'Bounce Rate',v:'1.4%',c:'-0.3%'}].map((s,i)=><div key={i} className="stat-card"><div className="stat-label">{s.l}</div><div className="stat-value">{s.v}</div><div className="stat-change up"><Icon name="trendUp" size={12}/>{s.c}</div></div>)}</div>
    <div className="card" style={{marginBottom:24}}><div className="card-header"><div className="card-title">Campaign Performance</div></div><div className="card-body"><div style={{height:280}}><ResponsiveContainer width="100%" height="100%"><BarChart data={perf} barGap={6}><CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false}/><XAxis dataKey="n" tick={{fontSize:12,fill:'var(--text-muted)'}} axisLine={false} tickLine={false}/><YAxis tick={{fontSize:12,fill:'var(--text-muted)'}} axisLine={false} tickLine={false} tickFormatter={v=>`${(v/1000).toFixed(0)}k`}/><Tooltip contentStyle={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:8,fontSize:12}}/><Legend wrapperStyle={{fontSize:12}}/><Bar dataKey="sent" fill="var(--border-strong)" radius={[4,4,0,0]} name="Sent"/><Bar dataKey="opens" fill="#ff6200" radius={[4,4,0,0]} name="Opens"/><Bar dataKey="clicks" fill="#10b981" radius={[4,4,0,0]} name="Clicks"/></BarChart></ResponsiveContainer></div></div></div>
    <div className="grid-2">
      <div className="card"><div className="card-header"><div className="card-title">Opens by Country</div></div><div className="card-body">{geo.map((g,i)=><div key={i} style={{display:'flex',alignItems:'center',gap:12,marginBottom:i<5?12:0}}><span style={{width:130,fontSize:13,color:'var(--text-secondary)',fontWeight:500}}>{g.country}</span><div style={{flex:1,height:8,background:'var(--surface-3)',borderRadius:4,overflow:'hidden'}}><div style={{height:'100%',width:`${g.pct}%`,background:g.color,borderRadius:4}}/></div><span style={{width:32,textAlign:'right',fontSize:13,fontWeight:700}}>{g.pct}%</span></div>)}</div></div>
      <div className="card"><div className="card-header"><div className="card-title">Email Clients</div></div><div className="card-body">{[{name:'Gmail',pct:44,color:'#ff6200'},{name:'Apple Mail',pct:28,color:'#3b82f6'},{name:'Outlook',pct:16,color:'#8b5cf6'},{name:'Yahoo Mail',pct:8,color:'#10b981'},{name:'Others',pct:4,color:'var(--border-strong)'}].map((e,i)=><div key={i} style={{display:'flex',alignItems:'center',gap:12,marginBottom:i<4?12:0}}><div style={{width:10,height:10,borderRadius:'50%',background:e.color,flexShrink:0}}/><span style={{flex:1,fontSize:13,color:'var(--text-secondary)',fontWeight:500}}>{e.name}</span><div style={{width:110,height:8,background:'var(--surface-3)',borderRadius:4,overflow:'hidden'}}><div style={{height:'100%',width:`${e.pct}%`,background:e.color,borderRadius:4}}/></div><span style={{width:32,textAlign:'right',fontSize:13,fontWeight:700}}>{e.pct}%</span></div>)}</div></div>
    </div>
  </div>);
};

// AUTOMATION
const AutomationPage=({addToast})=>{
  const [workflows]=useState([{id:1,name:'Welcome Series',trigger:'New Subscriber',status:'active',enrolled:2840,completed:1920,emails:3},{id:2,name:'Re-engagement Flow',trigger:'Inactive 90 days',status:'active',enrolled:640,completed:280,emails:4},{id:3,name:'Post-Purchase Follow-up',trigger:'Tag: purchased',status:'inactive',enrolled:0,completed:0,emails:2},{id:4,name:'Abandoned Cart Recovery',trigger:'Tag: cart_abandoned',status:'draft',enrolled:0,completed:0,emails:3}]);
  const [showBuilder,setShowBuilder]=useState(false);
  const nodes=[{type:'trigger',label:'New Subscriber',icon:'🎯',color:'#ff6200'},{type:'wait',label:'Wait 1 day',icon:'⏱️',color:'#3b82f6'},{type:'email',label:'Welcome Email',icon:'📧',color:'#10b981'},{type:'wait',label:'Wait 3 days',icon:'⏱️',color:'#3b82f6'},{type:'condition',label:'Opened first email?',icon:'🔀',color:'#8b5cf6'},{type:'email',label:'Follow-up Email',icon:'📧',color:'#10b981'}];
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}><div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>Automation Workflows</h2><p style={{color:'var(--text-muted)',fontSize:13}}>Automate your email sequences</p></div><button className="btn btn-primary" onClick={()=>setShowBuilder(true)}><Icon name="plus"/>New Workflow</button></div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))',gap:16,marginBottom:24}}>
      {workflows.map(w=><div key={w.id} className="card" style={{padding:0}}>
        <div style={{padding:'16px 20px',borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}><div><div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:15,marginBottom:4}}>{w.name}</div><div style={{fontSize:12,color:'var(--text-muted)'}}>Trigger: {w.trigger}</div></div><span className={`badge ${w.status==='active'?'badge-sent':w.status==='inactive'?'badge-paused':'badge-draft'}`}>{w.status}</span></div>
        <div style={{padding:'16px 20px',display:'flex',justifyContent:'space-between'}}>{[{v:w.enrolled,l:'Enrolled'},{v:w.completed,l:'Completed'},{v:w.emails,l:'Emails'},{v:`${w.enrolled>0?Math.round(w.completed/w.enrolled*100):0}%`,l:'Rate',o:true}].map((s,i)=><div key={i} style={{textAlign:'center'}}><div style={{fontSize:20,fontWeight:800,fontFamily:'var(--font-display)',color:s.o?'var(--orange)':'var(--text-primary)'}}>{typeof s.v==='number'?s.v.toLocaleString():s.v}</div><div style={{fontSize:11,color:'var(--text-muted)'}}>{s.l}</div></div>)}</div>
        <div style={{padding:'0 20px 16px',display:'flex',gap:8}}><button className="btn btn-secondary btn-sm"><Icon name="edit" size={13}/>Edit</button>{w.status==='active'?<button className="btn btn-secondary btn-sm"><Icon name="pause" size={13}/>Pause</button>:<button className="btn btn-primary btn-sm"><Icon name="play" size={13}/>Activate</button>}</div>
      </div>)}
    </div>
    <Modal open={showBuilder} onClose={()=>setShowBuilder(false)} title="Workflow Builder" size="lg" footer={<><button className="btn btn-secondary" onClick={()=>setShowBuilder(false)}>Cancel</button><button className="btn btn-primary" onClick={()=>{setShowBuilder(false);addToast('Workflow saved!','success');}}><Icon name="check"/>Save Workflow</button></>}>
      <div className="grid-2" style={{gap:20}}>
        <div>
          <div className="form-group"><label className="form-label">Workflow Name</label><input className="form-input" defaultValue="Welcome Series"/></div>
          <div className="form-group"><label className="form-label">Trigger</label><select className="form-input form-select"><option>New Subscriber</option><option>Tag Added</option><option>Campaign Opened</option><option>Campaign Clicked</option><option>Date Based</option></select></div>
          <div style={{marginBottom:8,fontSize:13,fontWeight:600,color:'var(--text-secondary)'}}>Available Actions</div>
          {[{icon:'📧',label:'Send Email'},{icon:'⏱️',label:'Wait / Delay'},{icon:'🔀',label:'Condition'},{icon:'🏷️',label:'Add Tag'},{icon:'📋',label:'Update Field'}].map((a,i)=><div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'8px 12px',border:'1px solid var(--border)',borderRadius:8,cursor:'pointer',marginBottom:6,background:'var(--surface-2)',fontSize:13,fontWeight:500}}><span>{a.icon}</span>{a.label}<Icon name="plus" size={13} style={{marginLeft:'auto',color:'var(--text-muted)'}}/></div>)}
        </div>
        <div>
          <div style={{fontSize:13,fontWeight:600,color:'var(--text-secondary)',marginBottom:12}}>Workflow Flow</div>
          {nodes.map((n,i)=><React.Fragment key={i}><div className="workflow-node" style={{borderLeft:`3px solid ${n.color}`}}><div className="workflow-node-icon" style={{background:`${n.color}20`,fontSize:18}}>{n.icon}</div><div><div style={{fontSize:13,fontWeight:600}}>{n.label}</div><div style={{fontSize:11,color:'var(--text-muted)',textTransform:'capitalize'}}>{n.type}</div></div></div>{i<nodes.length-1&&<div className="workflow-connector"/>}</React.Fragment>)}
        </div>
      </div>
    </Modal>
  </div>);
};

// SMTP
const SmtpPage=({addToast})=>{
  const [configs,setConfigs]=useState(mockSmtp);

useEffect(()=>{
    api.get('/smtp').then(res=>{
      if(res.success && res.data && res.data.length > 0) setConfigs(res.data);
    }).catch(()=>{});
  },[]);
  const [showAdd,setShowAdd]=useState(false);
  const [testingId,setTestingId]=useState(null);
  const [form,setForm]=useState({name:'',host:'',port:'587',encryption:'tls',username:'',password:'',from_email:'',from_name:''});
  const providers=[{name:'SendGrid',host:'smtp.sendgrid.net'},{name:'Mailgun',host:'smtp.mailgun.org'},{name:'Amazon SES',host:'email-smtp.us-east-1.amazonaws.com'},{name:'Gmail',host:'smtp.gmail.com'},{name:'Postmark',host:'smtp.postmarkapp.com'},{name:'Brevo',host:'smtp-relay.brevo.com'}];
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}><div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>SMTP Configuration</h2><p style={{color:'var(--text-muted)',fontSize:13}}>Configure email delivery providers</p></div><button className="btn btn-primary" onClick={()=>setShowAdd(true)}><Icon name="plus"/>Add SMTP</button></div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(340px,1fr))',gap:16,marginBottom:24}}>
      {configs.map(c=><div key={c.id} className="card">
        <div style={{padding:'16px 20px',borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center'}}><div style={{display:'flex',alignItems:'center',gap:10}}><div style={{width:40,height:40,borderRadius:10,background:'var(--orange-dim)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:20}}>📬</div><div><div style={{fontWeight:700,fontSize:15}}>{c.name}</div><div style={{fontSize:12,color:'var(--text-muted)'}}>{c.host}:{c.port}</div></div></div><div style={{display:'flex',gap:6}}>{c.is_default===1&&<span className="badge badge-sent">Default</span>}{c.is_verified===1&&<span className="badge badge-sent">✓ Verified</span>}</div></div>
        <div style={{padding:'14px 20px',display:'flex',flexDirection:'column',gap:8}}>
          {[['From Email',c.from_email],['From Name',c.from_name],['Encryption',(c.encryption||'tls').toUpperCase()]].map(([k,v])=><div key={k} style={{display:'flex',justifyContent:'space-between',fontSize:13}}><span style={{color:'var(--text-muted)'}}>{k}</span><span style={{fontWeight:500}}>{v}</span></div>)}
          <div style={{display:'flex',gap:8,marginTop:8}}><button className="btn btn-primary btn-sm" style={{flex:1}} onClick={()=>{setTestingId(c.id);setTimeout(()=>{setTestingId(null);addToast('Test email sent!','success');},2000);}} disabled={testingId===c.id}>{testingId===c.id?<><span className="spinner" style={{width:14,height:14}}/> Testing...</>:<><Icon name="send" size={13}/>Send Test</>}</button><button className="btn btn-secondary btn-sm"><Icon name="edit" size={13}/>Edit</button><button className="btn btn-ghost btn-sm" style={{color:'var(--danger)'}} onClick={()=>{setConfigs(p=>p.filter(x=>x.id!==c.id));addToast('Config deleted','info');}}><Icon name="trash" size={13}/></button></div>
        </div>
      </div>)}
    </div>
    <div className="card"><div className="card-header"><div className="card-title">Common SMTP Providers</div></div><div className="card-body"><div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:12}}>{providers.map((p,i)=><div key={i} style={{border:'1px solid var(--border)',borderRadius:8,padding:'12px 14px',cursor:'pointer',transition:'all .15s'}} onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--orange)';e.currentTarget.style.background='var(--orange-dim)';}} onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.background='transparent';}} onClick={()=>{setForm(f=>({...f,name:p.name,host:p.host}));setShowAdd(true);}}><div style={{fontWeight:600,fontSize:13,marginBottom:3}}>{p.name}</div><div style={{fontSize:11,color:'var(--text-muted)',fontFamily:'monospace'}}>{p.host}</div></div>)}</div></div></div>
    <Modal open={showAdd} onClose={()=>setShowAdd(false)} title="Add SMTP Configuration" size="md" footer={<><button className="btn btn-secondary" onClick={()=>setShowAdd(false)}>Cancel</button><button className="btn btn-primary" onClick={()=>{setConfigs(p=>[...p,{...form,id:Date.now(),is_default:0,is_verified:0,port:parseInt(form.port)}]);setShowAdd(false);addToast('SMTP saved!','success');}}>Save</button></>}>
      <div className="grid-2"><div className="form-group"><label className="form-label">Config Name *</label><input className="form-input" placeholder="Primary SMTP" value={form.name} onChange={e=>setForm(p=>({...p,name:e.target.value}))}/></div><div className="form-group"><label className="form-label">Encryption</label><select className="form-input form-select" value={form.encryption} onChange={e=>setForm(p=>({...p,encryption:e.target.value}))}><option value="tls">TLS</option><option value="ssl">SSL</option><option value="none">None</option></select></div></div>
      <div className="grid-2"><div className="form-group"><label className="form-label">SMTP Host *</label><input className="form-input" placeholder="smtp.example.com" value={form.host} onChange={e=>setForm(p=>({...p,host:e.target.value}))}/></div><div className="form-group"><label className="form-label">Port</label><input className="form-input" placeholder="587" value={form.port} onChange={e=>setForm(p=>({...p,port:e.target.value}))}/></div></div>
      <div className="grid-2"><div className="form-group"><label className="form-label">Username *</label><input className="form-input" value={form.username} onChange={e=>setForm(p=>({...p,username:e.target.value}))}/></div><div className="form-group"><label className="form-label">Password *</label><input className="form-input" type="password" value={form.password} onChange={e=>setForm(p=>({...p,password:e.target.value}))}/></div></div>
      <div className="grid-2"><div className="form-group"><label className="form-label">From Email *</label><input className="form-input" type="email" value={form.from_email} onChange={e=>setForm(p=>({...p,from_email:e.target.value}))}/></div><div className="form-group"><label className="form-label">From Name *</label><input className="form-input" value={form.from_name} onChange={e=>setForm(p=>({...p,from_name:e.target.value}))}/></div></div>
    </Modal>
  </div>);
};

// SETTINGS
const SettingsPage=({addToast})=>{
  const [tab,setTab]=useState('general');
  return(<div className="page-body">
    <h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:20}}>Settings</h2>
    <div style={{display:'flex',gap:24}}>
      <div style={{width:180,flexShrink:0}}><div className="card" style={{padding:'8px 0'}}>{['general','notifications','security','api','billing'].map(t=><div key={t} className={`nav-item ${tab===t?'active':''}`} style={{margin:'0 8px',textTransform:'capitalize'}} onClick={()=>setTab(t)}>{t}</div>)}</div></div>
      <div style={{flex:1}}>
        {tab==='general'&&<div className="card"><div className="card-header"><div className="card-title">General Settings</div></div><div className="card-body"><div className="form-group"><label className="form-label">Company Name</label><input className="form-input" defaultValue="Acme Corporation"/></div><div className="form-group"><label className="form-label">Company Email</label><input className="form-input" type="email" defaultValue="admin@acme.com"/></div><div className="form-group"><label className="form-label">Default From Name</label><input className="form-input" defaultValue="Acme Team"/></div><div className="form-group"><label className="form-label">Timezone</label><select className="form-input form-select"><option>UTC</option><option>America/New_York</option><option>America/Los_Angeles</option><option>Europe/London</option></select></div><div className="form-group"><label className="form-label">Unsubscribe Page URL</label><input className="form-input" defaultValue="https://yourdomain.com/unsubscribe"/><div className="form-hint">Custom unsubscribe landing page</div></div><button className="btn btn-primary" onClick={()=>addToast('Settings saved!','success')}><Icon name="check"/>Save Changes</button></div></div>}
        {tab==='security'&&<div className="card"><div className="card-header"><div className="card-title">Security</div></div><div className="card-body"><div className="form-group"><label className="form-label">Current Password</label><input className="form-input" type="password" placeholder="••••••••"/></div><div className="form-group"><label className="form-label">New Password</label><input className="form-input" type="password" placeholder="Min 8 characters"/></div><div className="form-group"><label className="form-label">Confirm Password</label><input className="form-input" type="password" placeholder="Repeat new password"/></div><button className="btn btn-primary" onClick={()=>addToast('Password updated!','success')}>Update Password</button><div style={{marginTop:24,paddingTop:20,borderTop:'1px solid var(--border)'}}><div style={{fontWeight:600,marginBottom:12}}>Two-Factor Authentication</div><div style={{display:'flex',justifyContent:'space-between',alignItems:'center',background:'var(--surface-2)',border:'1px solid var(--border)',borderRadius:8,padding:'14px 16px'}}><div><div style={{fontWeight:500,fontSize:13}}>Authenticator App</div><div style={{fontSize:12,color:'var(--text-muted)',marginTop:2}}>Add extra security with TOTP</div></div><button className="btn btn-secondary btn-sm">Enable 2FA</button></div></div></div></div>}
        {tab==='api'&&<div className="card"><div className="card-header"><div className="card-title">API & Webhooks</div></div><div className="card-body"><div className="form-group"><label className="form-label">API Token</label><div style={{display:'flex',gap:8}}><input className="form-input" readOnly value="mf_live_sk_xxxxxxxxxxxxxxxxxxxxxxxxxxxx" style={{fontFamily:'monospace',fontSize:12}}/><button className="btn btn-secondary btn-sm" style={{flexShrink:0}} onClick={()=>addToast('Copied!','success')}><Icon name="copy" size={13}/>Copy</button></div><div className="form-hint">Keep secret. Regenerate if compromised.</div></div><div style={{fontWeight:600,fontSize:14,margin:'20px 0 12px'}}>Webhooks</div><div style={{border:'1px solid var(--border)',borderRadius:8,padding:'12px 16px',marginBottom:12}}><div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><div><div style={{fontWeight:600,fontSize:13}}>https://yourapp.com/webhooks/email</div><div style={{fontSize:12,color:'var(--text-muted)',marginTop:2}}>Events: open, click, bounce, unsubscribe</div></div><div style={{display:'flex',gap:8,alignItems:'center'}}><span className="badge badge-sent">Active</span><button className="btn btn-ghost btn-sm"><Icon name="trash" size={13}/></button></div></div></div><button className="btn btn-secondary btn-sm"><Icon name="plus"/>Add Webhook</button></div></div>}
        {tab==='notifications'&&<div className="card"><div className="card-header"><div className="card-title">Notification Preferences</div></div><div className="card-body">{[{l:'Campaign sent',d:'When a campaign finishes sending'},{l:'Campaign failed',d:'When errors occur'},{l:'Weekly digest',d:'Weekly performance summary'},{l:'New unsubscribes',d:'Daily unsubscribe report'},{l:'Bounce alerts',d:'When bounce rate exceeds threshold'},{l:'Import completed',d:'When a contact import finishes'}].map((n,i)=><div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'12px 0',borderBottom:i<5?'1px solid var(--border)':'none'}}><div><div style={{fontWeight:500,fontSize:13}}>{n.l}</div><div style={{fontSize:12,color:'var(--text-muted)'}}>{n.d}</div></div><div style={{display:'flex',gap:16}}>{['Email','In-app'].map(ch=><label key={ch} style={{display:'flex',alignItems:'center',gap:6,fontSize:12,cursor:'pointer'}}><input type="checkbox" defaultChecked style={{accentColor:'var(--orange)'}}/>{ch}</label>)}</div></div>)}<button className="btn btn-primary" style={{marginTop:16}} onClick={()=>addToast('Preferences saved!','success')}><Icon name="check"/>Save Preferences</button></div></div>}
        {tab==='billing'&&<div className="card"><div className="card-header"><div className="card-title">Billing & Plans</div></div><div className="card-body"><div style={{background:'linear-gradient(135deg,var(--orange) 0%,#ff9a00 100%)',borderRadius:12,padding:'24px',color:'white',marginBottom:20}}><div style={{fontSize:11,opacity:.8,marginBottom:4,fontWeight:600,textTransform:'uppercase',letterSpacing:1}}>Current Plan</div><div style={{fontSize:28,fontWeight:800,fontFamily:'var(--font-display)'}}>Professional</div><div style={{fontSize:14,opacity:.9,marginTop:4}}>$49/month · Renews March 1, 2025</div><div style={{marginTop:12,fontSize:13,opacity:.85}}>50,000 emails/month · Unlimited contacts · Priority support</div></div><div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>{[{n:'Starter',p:'$19',e:'10,000',c:'5,000'},{n:'Pro',p:'$49',e:'50,000',c:'Unlimited',cur:true},{n:'Enterprise',p:'Custom',e:'Unlimited',c:'Unlimited'}].map((pl,i)=><div key={i} style={{border:`1.5px solid ${pl.cur?'var(--orange)':'var(--border)'}`,borderRadius:10,padding:'16px',background:pl.cur?'var(--orange-dim)':'transparent'}}><div style={{fontWeight:700,fontSize:15,marginBottom:4}}>{pl.n}</div><div style={{fontSize:22,fontWeight:800,fontFamily:'var(--font-display)',color:pl.cur?'var(--orange)':'var(--text-primary)'}}>{pl.p}</div><div style={{fontSize:11,color:'var(--text-muted)',marginBottom:12}}>/month</div><div style={{fontSize:12,marginBottom:4,color:'var(--text-secondary)'}}>📧 {pl.e} emails</div><div style={{fontSize:12,color:'var(--text-secondary)'}}>👥 {pl.c} contacts</div><button className={`btn btn-sm ${pl.cur?'btn-primary':'btn-secondary'}`} style={{width:'100%',justifyContent:'center',marginTop:12}} disabled={pl.cur}>{pl.cur?'Current Plan':'Upgrade'}</button></div>)}</div></div></div>}
      </div>
    </div>
  </div>);
};

// USERS
const UsersPage=({addToast})=>{
  const [users]=useState([{id:1,name:'Super Admin',email:'admin@mailflow.io',role:'super_admin',status:'active',last_login:'2024-02-24'},{id:2,name:'Jane Manager',email:'jane@company.com',role:'manager',status:'active',last_login:'2024-02-23'},{id:3,name:'Bob Editor',email:'bob@company.com',role:'editor',status:'active',last_login:'2024-02-22'},{id:4,name:'Alice Viewer',email:'alice@company.com',role:'viewer',status:'suspended',last_login:'2024-02-10'}]);
  const roles={super_admin:'Super Admin',admin:'Admin',manager:'Manager',editor:'Editor',viewer:'Viewer'};
  const roleColors={super_admin:'#ff6200',admin:'#8b5cf6',manager:'#3b82f6',editor:'#10b981',viewer:'#999'};
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}><div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>Users & Roles</h2><p style={{color:'var(--text-muted)',fontSize:13}}>{users.length} team members</p></div><button className="btn btn-primary" onClick={()=>addToast('Invite sent!','success')}><Icon name="plus"/>Invite User</button></div>
    <div className="card" style={{marginBottom:20}}><div className="table-wrap"><table><thead><tr><th>User</th><th>Role</th><th>Status</th><th>Last Active</th><th>Actions</th></tr></thead><tbody>{users.map(u=><tr key={u.id}><td><div style={{display:'flex',alignItems:'center',gap:10}}><div className="user-avatar" style={{width:34,height:34,fontSize:13}}>{u.name[0]}</div><div><div style={{fontWeight:600,fontSize:13}}>{u.name}</div><div style={{fontSize:12,color:'var(--text-muted)'}}>{u.email}</div></div></div></td><td><span style={{background:`${roleColors[u.role]}20`,color:roleColors[u.role],padding:'3px 8px',borderRadius:20,fontSize:11,fontWeight:600}}>{roles[u.role]}</span></td><td><StatusBadge status={u.status==='active'?'subscribed':'unsubscribed'}/></td><td style={{color:'var(--text-muted)',fontSize:12}}>{u.last_login}</td><td><div style={{display:'flex',gap:6}}><button className="btn btn-ghost btn-sm"><Icon name="edit" size={14}/></button>{u.id!==1&&<button className="btn btn-ghost btn-sm" style={{color:'var(--danger)'}}><Icon name="trash" size={14}/></button>}</div></td></tr>)}</tbody></table></div></div>
    <div className="card"><div className="card-header"><div className="card-title">Role Permissions Matrix</div></div><div className="card-body" style={{padding:0}}><div className="table-wrap"><table><thead><tr><th>Role</th><th>Campaigns</th><th>Contacts</th><th>Templates</th><th>Analytics</th><th>Settings</th><th>Users</th></tr></thead><tbody>{[{role:'Super Admin',color:'#ff6200',campaigns:'Full',contacts:'Full',templates:'Full',analytics:'Full',settings:'Full',users:'Full'},{role:'Admin',color:'#8b5cf6',campaigns:'Full',contacts:'Full',templates:'Full',analytics:'Full',settings:'Full',users:'View'},{role:'Manager',color:'#3b82f6',campaigns:'Full',contacts:'Full',templates:'Full',analytics:'View',settings:'—',users:'—'},{role:'Editor',color:'#10b981',campaigns:'Create/Edit',contacts:'View',templates:'Full',analytics:'—',settings:'—',users:'—'},{role:'Viewer',color:'#999',campaigns:'View',contacts:'View',templates:'View',analytics:'View',settings:'—',users:'—'}].map((r,i)=><tr key={i}><td><span style={{background:`${r.color}20`,color:r.color,padding:'3px 8px',borderRadius:20,fontSize:11,fontWeight:600}}>{r.role}</span></td>{['campaigns','contacts','templates','analytics','settings','users'].map(p=><td key={p}><span style={{fontSize:12,fontWeight:500,color:r[p]==='Full'?'var(--success)':r[p]==='—'?'var(--text-muted)':'var(--text-secondary)'}}>{r[p]==='Full'?'✓ Full':r[p]==='—'?'—':r[p]}</span></td>)}</tr>)}</tbody></table></div></div></div>
  </div>);
};

// QUEUE PAGE
const QueuePage=({addToast})=>{
  const [jobs]=useState([{id:1001,campaign:'Spring Newsletter',email:'alice@example.com',status:'sent',attempts:1,scheduled_at:'2024-02-20 09:00',sent_at:'2024-02-20 09:01'},{id:1002,campaign:'Spring Newsletter',email:'bob@techcorp.io',status:'sent',attempts:1,scheduled_at:'2024-02-20 09:00',sent_at:'2024-02-20 09:01'},{id:1003,campaign:'Weekly Digest #47',email:'carol@startup.co',status:'pending',attempts:0,scheduled_at:'2024-02-22 10:00',sent_at:null},{id:1004,campaign:'Weekly Digest #47',email:'david@enterprise.com',status:'processing',attempts:1,scheduled_at:'2024-02-22 10:00',sent_at:null},{id:1005,campaign:'Re-engagement',email:'emma@agency.net',status:'failed',attempts:3,scheduled_at:'2024-02-22 09:00',sent_at:null},{id:1006,campaign:'Re-engagement',email:'frank@mail.com',status:'failed',attempts:3,scheduled_at:'2024-02-22 09:00',sent_at:null}]);
  const [sf,setSf]=useState('all');
  const sm={sent:'badge-sent',pending:'badge-scheduled',processing:'badge-sending',failed:'badge-failed'};
  const qs=[{label:'Pending',value:1842,color:'#3b82f6'},{label:'Processing',value:124,color:'#ff6200'},{label:'Sent Today',value:48291,color:'#10b981'},{label:'Failed',value:38,color:'#ef4444'}];
  const fj=sf==='all'?jobs:jobs.filter(j=>j.status===sf);
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}><div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>Email Queue</h2><p style={{color:'var(--text-muted)',fontSize:13}}>Monitor outgoing email jobs in real-time</p></div><div style={{display:'flex',gap:10}}><button className="btn btn-secondary" onClick={()=>addToast('Queue refreshed','info')}><Icon name="activity" size={14}/>Refresh</button><button className="btn btn-danger" onClick={()=>addToast('38 failed jobs retrying','success')}><Icon name="zap" size={14}/>Retry Failed (38)</button></div></div>
    <div className="stats-grid" style={{marginBottom:24}}>{qs.map((s,i)=><div key={i} className="stat-card"><div className="stat-label">{s.label}</div><div className="stat-value" style={{color:s.color}}>{s.value.toLocaleString()}</div><div style={{marginTop:10}}><div className="progress-bar"><div className="progress-fill" style={{width:`${Math.min(s.value/500*100,100)}%`,background:s.color}}/></div></div></div>)}</div>
    <div className="card"><div className="card-header" style={{paddingBottom:16}}><div className="card-title">Queue Jobs</div><div className="filter-tabs">{['all','pending','processing','sent','failed'].map(s=><button key={s} className={`filter-tab ${sf===s?'active':''}`} onClick={()=>setSf(s)} style={{textTransform:'capitalize'}}>{s}</button>)}</div></div>
    <div className="table-wrap"><table><thead><tr><th>#ID</th><th>Campaign</th><th>Recipient</th><th>Status</th><th>Attempts</th><th>Scheduled</th><th>Sent At</th></tr></thead><tbody>{fj.map(j=><tr key={j.id}><td style={{color:'var(--text-muted)',fontSize:12,fontFamily:'monospace'}}>#{j.id}</td><td style={{fontWeight:500,fontSize:13}}>{j.campaign}</td><td style={{fontFamily:'monospace',fontSize:12,color:'var(--text-secondary)'}}>{j.email}</td><td><span className={`badge ${sm[j.status]||'badge-draft'}`}>{j.status==='processing'&&<span className="status-dot dot-orange"/>}{j.status}</span></td><td><div style={{display:'flex',gap:4,alignItems:'center'}}>{[1,2,3].map(n=><div key={n} style={{width:8,height:8,borderRadius:'50%',background:n<=j.attempts?(j.status==='failed'?'var(--danger)':'var(--success)'):'var(--border)'}}/>)}</div></td><td style={{color:'var(--text-muted)',fontSize:12}}>{j.scheduled_at}</td><td style={{color:'var(--text-muted)',fontSize:12}}>{j.sent_at||'—'}</td></tr>)}</tbody></table></div>
    <div style={{padding:'12px 16px',borderTop:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:13,color:'var(--text-muted)'}}>Showing {fj.length} of 50,295 total</span><div style={{display:'flex',gap:4}}><button className="btn btn-secondary btn-sm">Prev</button><button className="btn btn-secondary btn-sm">Next</button></div></div></div>
  </div>);
};

// ACTIVITY LOGS
const ActivityPage=()=>{
  const logs=[{id:1,user:'Super Admin',action:'campaign.sent',desc:"Campaign 'Spring Newsletter 2024' sent to 8,420 recipients",time:'2024-02-20 09:01',ip:'192.168.1.1'},{id:2,user:'Jane Manager',action:'contact.imported',desc:'847 contacts imported from spring_list.csv',time:'2024-02-20 08:30',ip:'192.168.1.45'},{id:3,user:'Super Admin',action:'smtp.tested',desc:"SMTP 'Primary SMTP' test email sent successfully",time:'2024-02-19 16:22',ip:'192.168.1.1'},{id:4,user:'Bob Editor',action:'template.created',desc:"Template 'Summer Sale 2024' created",time:'2024-02-19 14:10',ip:'10.0.0.12'},{id:5,user:'Super Admin',action:'user.login',desc:'User logged in from 192.168.1.1',time:'2024-02-19 09:00',ip:'192.168.1.1'},{id:6,user:'Jane Manager',action:'campaign.created',desc:"Campaign 'Weekly Digest #47' created",time:'2024-02-18 17:45',ip:'192.168.1.45'},{id:7,user:'Alice Viewer',action:'user.login',desc:'User logged in from 10.0.0.55',time:'2024-02-18 11:30',ip:'10.0.0.55'},{id:8,user:'Super Admin',action:'contact.deleted',desc:'Contact frank@mail.com removed from system',time:'2024-02-17 15:20',ip:'192.168.1.1'}];
  const ac={'campaign.sent':'#10b981','campaign.created':'#3b82f6','contact.imported':'#8b5cf6','smtp.tested':'#ff6200','template.created':'#f59e0b','user.login':'#999','contact.deleted':'#ef4444'};
  const ai={'campaign.sent':'📤','campaign.created':'📝','contact.imported':'📥','smtp.tested':'📬','template.created':'🎨','user.login':'🔐','contact.deleted':'🗑️'};
  return(<div className="page-body">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}><div><h2 style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,marginBottom:2}}>Activity Logs</h2><p style={{color:'var(--text-muted)',fontSize:13}}>Full audit trail of all platform actions</p></div><button className="btn btn-secondary"><Icon name="download" size={14}/>Export CSV</button></div>
    <div style={{display:'flex',gap:10,marginBottom:20,flexWrap:'wrap'}}><div className="search-wrap" style={{flex:1,minWidth:200}}><Icon name="search" size={15}/><input className="form-input search-input" placeholder="Search actions, users..."/></div><select className="form-input form-select" style={{width:150,padding:'9px 28px 9px 12px'}}><option>All users</option><option>Super Admin</option><option>Jane Manager</option></select><select className="form-input form-select" style={{width:165,padding:'9px 28px 9px 12px'}}><option>All actions</option><option>campaign.*</option><option>contact.*</option><option>user.*</option></select></div>
    <div className="card">{logs.map((log,i)=><div key={log.id} style={{display:'flex',gap:14,padding:'14px 20px',borderBottom:i<logs.length-1?'1px solid var(--border)':'none',alignItems:'flex-start',transition:'.15s',cursor:'pointer'}} onMouseEnter={e=>e.currentTarget.style.background='var(--surface-2)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}><div style={{width:36,height:36,borderRadius:9,background:`${ac[log.action]||'#999'}18`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:16,flexShrink:0,marginTop:1}}>{ai[log.action]||'⚡'}</div><div style={{flex:1,minWidth:0}}><div style={{display:'flex',alignItems:'center',gap:8,marginBottom:3,flexWrap:'wrap'}}><span style={{fontWeight:600,fontSize:13}}>{log.user}</span><span style={{background:`${ac[log.action]||'#999'}18`,color:ac[log.action]||'#999',padding:'1px 7px',borderRadius:20,fontSize:11,fontWeight:600,fontFamily:'monospace'}}>{log.action}</span></div><div style={{fontSize:13,color:'var(--text-secondary)',marginBottom:4}}>{log.desc}</div><div style={{fontSize:11,color:'var(--text-muted)',display:'flex',gap:14}}><span>🕐 {log.time}</span><span>🌐 {log.ip}</span></div></div></div>)}<div style={{padding:'12px 16px',borderTop:'1px solid var(--border)',textAlign:'center'}}><button className="btn btn-secondary btn-sm">Load more logs</button></div></div>
  </div>);
};
// LOGIN PAGE
const LoginPage=({onLogin})=>{
  const [email,setEmail]=useState('admin@mailflow.io');
  const [password,setPassword]=useState('Admin@123');
  const [loading,setLoading]=useState(false);
  const [error,setError]=useState('');
  const handle=async()=>{
    if(!email||!password){setError('Please enter email and password');return;}
    setError('');setLoading(true);
    try {
      const data = await Auth.login(email, password);
      onLogin(data.user);
    } catch(e) {
      setError(e.message || 'Login failed. Check your credentials.');
    } finally {
      setLoading(false);
    }
  };
  return(<div style={{minHeight:'100vh',display:'flex',background:'var(--surface-2)'}}>
    <div style={{width:'45%',background:'linear-gradient(145deg,#1a1a1a 0%,#2d1500 50%,#1a0a00 100%)',display:'flex',flexDirection:'column',justifyContent:'space-between',padding:'48px',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',top:-100,right:-100,width:400,height:400,borderRadius:'50%',background:'radial-gradient(circle,rgba(255,98,0,0.15) 0%,transparent 70%)'}}/>
      <div style={{position:'absolute',bottom:-80,left:-80,width:300,height:300,borderRadius:'50%',background:'radial-gradient(circle,rgba(255,98,0,0.08) 0%,transparent 70%)'}}/>
      <div style={{position:'relative'}}>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:60}}>
          <div className="logo-mark" style={{width:40,height:40}}><svg viewBox="0 0 24 24" style={{width:22,height:22,fill:'white'}}><path d="M22 2L11 13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></div>
          <span style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:800,color:'white',letterSpacing:-.5}}>Mail<span style={{color:'var(--orange)'}}>Flow</span></span>
        </div>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:40,fontWeight:800,color:'white',lineHeight:1.15,marginBottom:16}}>Email marketing<br/>that <span style={{color:'var(--orange)'}}>delivers</span>.</h1>
        <p style={{color:'rgba(255,255,255,0.5)',fontSize:15,lineHeight:1.7,maxWidth:320}}>Send beautiful campaigns, grow your audience, and track every click — all in one powerful platform.</p>
      </div>
      <div style={{position:'relative'}}>
        {[{icon:'📊',stat:'34.8%',label:'Average open rate'},{icon:'⚡',stat:'< 2s',label:'Delivery time'},{icon:'🔒',stat:'99.9%',label:'Platform uptime'}].map((s,i)=>(
          <div key={i} style={{display:'flex',alignItems:'center',gap:14,marginBottom:i<2?16:0}}>
            <div style={{width:40,height:40,borderRadius:10,background:'rgba(255,255,255,0.06)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:18,flexShrink:0}}>{s.icon}</div>
            <div><div style={{fontFamily:'var(--font-display)',fontSize:20,fontWeight:800,color:'white'}}>{s.stat}</div><div style={{fontSize:12,color:'rgba(255,255,255,0.4)'}}>{s.label}</div></div>
          </div>
        ))}
      </div>
    </div>
    <div style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',padding:'48px'}}>
      <div style={{width:'100%',maxWidth:400}}>
        <div style={{marginBottom:36}}>
          <h2 style={{fontFamily:'var(--font-display)',fontSize:28,fontWeight:800,color:'var(--text-primary)',marginBottom:8}}>Welcome back</h2>
          <p style={{color:'var(--text-muted)',fontSize:14}}>Sign in to your MailFlow account</p>
        </div>
        {error&&<div style={{background:'rgba(239,68,68,0.08)',border:'1px solid rgba(239,68,68,0.2)',borderRadius:8,padding:'10px 14px',marginBottom:16,fontSize:13,color:'var(--danger)',display:'flex',gap:8,alignItems:'center'}}><Icon name="info" size={14}/>{error}</div>}
        <div className="form-group"><label className="form-label">Email Address</label><input className="form-input" type="email" value={email} onChange={e=>{setEmail(e.target.value);setError('');}} onKeyDown={e=>e.key==='Enter'&&handle()}/></div>
        <div className="form-group" style={{marginBottom:24}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><label className="form-label">Password</label><a href="#" style={{fontSize:12,color:'var(--orange)',textDecoration:'none',fontWeight:500}}>Forgot password?</a></div>
          <input className="form-input" type="password" value={password} onChange={e=>{setPassword(e.target.value);setError('');}} onKeyDown={e=>e.key==='Enter'&&handle()}/>
        </div>
        <button className="btn btn-primary btn-lg" style={{width:'100%',justifyContent:'center'}} onClick={handle} disabled={loading}>
          {loading?<><span className="spinner" style={{width:16,height:16,borderColor:'rgba(255,255,255,0.3)',borderTopColor:'white'}}/> Signing in...</>:<>Sign In <Icon name="chevronRight" size={16}/></>}
        </button>
        <div style={{marginTop:24,padding:'16px',background:'var(--surface-2)',border:'1px solid var(--border)',borderRadius:10}}>
          <div style={{fontWeight:700,marginBottom:8,color:'var(--text-secondary)',fontSize:11,textTransform:'uppercase',letterSpacing:.5}}>Demo Credentials</div>
          <div style={{display:'flex',flexDirection:'column',gap:6}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{color:'var(--text-muted)',fontSize:12}}>Email</span><code style={{color:'var(--text-primary)',fontSize:12,background:'var(--surface-3)',padding:'2px 8px',borderRadius:4}}>admin@mailflow.io</code></div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{color:'var(--text-muted)',fontSize:12}}>Password</span><code style={{color:'var(--text-primary)',fontSize:12,background:'var(--surface-3)',padding:'2px 8px',borderRadius:4}}>Admin@123</code></div>
          </div>
        </div>
      </div>
    </div>
  </div>);
};

// NOTIFICATION PANEL
const NotificationPanel=({onClose})=>{
  const notifs=[{id:1,type:'success',title:'Campaign Sent',message:"'Spring Newsletter 2024' sent to 8,420 recipients",time:'2 min ago',read:false},{id:2,type:'info',title:'Import Complete',message:'847 contacts imported successfully',time:'32 min ago',read:false},{id:3,type:'warning',title:'Bounce Alert',message:'Bounce rate for Weekly Digest exceeded 2%',time:'1 hr ago',read:false},{id:4,type:'success',title:'SMTP Verified',message:"'Primary SMTP' connection verified",time:'3 hr ago',read:true},{id:5,type:'info',title:'Workflow Active',message:"'Welcome Series' automation is now live",time:'Yesterday',read:true}];
  return(<div style={{position:'absolute',top:48,right:0,width:340,background:'var(--surface)',border:'1px solid var(--border)',borderRadius:12,boxShadow:'var(--shadow-lg)',zIndex:200,overflow:'hidden',animation:'slideUp .2s cubic-bezier(.4,0,.2,1)'}}>
    <div style={{padding:'14px 16px',borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:14}}>Notifications <span style={{background:'var(--orange)',color:'white',fontSize:10,padding:'1px 6px',borderRadius:20,marginLeft:4}}>3</span></div>
      <div style={{display:'flex',gap:8,alignItems:'center'}}><button style={{fontSize:12,color:'var(--orange)',border:'none',background:'none',cursor:'pointer',fontWeight:600}}>Mark all read</button><button className="modal-close" onClick={onClose}><Icon name="x" size={12}/></button></div>
    </div>
    {notifs.map((n,i)=>(
      <div key={n.id} style={{padding:'12px 16px',borderBottom:i<notifs.length-1?'1px solid var(--border)':'none',display:'flex',gap:10,background:n.read?'transparent':'rgba(255,98,0,0.03)',cursor:'pointer',transition:'.15s'}} onMouseEnter={e=>e.currentTarget.style.background='var(--surface-2)'} onMouseLeave={e=>e.currentTarget.style.background=n.read?'transparent':'rgba(255,98,0,0.03)'}>
        <div style={{fontSize:18,flexShrink:0,marginTop:1}}>{n.type==='success'?'✅':n.type==='warning'?'⚠️':'ℹ️'}</div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:8}}>
            <div style={{fontWeight:n.read?500:700,fontSize:13,color:'var(--text-primary)'}}>{n.title}</div>
            {!n.read&&<div style={{width:7,height:7,borderRadius:'50%',background:'var(--orange)',flexShrink:0,marginTop:4}}/>}
          </div>
          <div style={{fontSize:12,color:'var(--text-muted)',marginTop:2,lineHeight:1.4}}>{n.message}</div>
          <div style={{fontSize:11,color:'var(--text-muted)',marginTop:4}}>{n.time}</div>
        </div>
      </div>
    ))}
    <div style={{padding:'10px 16px',borderTop:'1px solid var(--border)',textAlign:'center'}}><button style={{fontSize:13,color:'var(--orange)',border:'none',background:'none',cursor:'pointer',fontWeight:600}}>View all notifications</button></div>
  </div>);
};

// TOAST
let toastId=0;
const ToastContainer=({toasts,remove})=>(
  <div className="toast-container">
    {toasts.map(t=>(
      <div key={t.id} className={`toast toast-${t.type}`}>
        <span>{t.type==='success'?'✅':t.type==='error'?'❌':'ℹ️'}</span>
        <span style={{flex:1}}>{t.message}</span>
        <button onClick={()=>remove(t.id)} style={{background:'none',border:'none',cursor:'pointer',color:'var(--text-muted)',padding:'2px'}}>✕</button>
      </div>
    ))}
  </div>
);

// MAIN APP
const App=()=>{
  const [isLoggedIn,setIsLoggedIn]=useState(Auth.isLoggedIn());
  const [currentUser,setCurrentUser]=useState(null);
  const [page,setPage]=useState('dashboard');
  const [theme,setTheme]=useState(localStorage.getItem('mf_theme')||'light');
  const [sidebarOpen,setSidebarOpen]=useState(false);
  const [toasts,setToasts]=useState([]);
  const [showNotifs,setShowNotifs]=useState(false);

// Restore session on page load
  useEffect(()=>{
    if(Auth.isLoggedIn() && !currentUser){
      Auth.me().then(u=>{ if(u) setCurrentUser(u); else { Auth.logout(); setIsLoggedIn(false); } });
    }
  },[]);

useEffect(()=>{
    document.documentElement.setAttribute('data-theme',theme);
    localStorage.setItem('mf_theme',theme);
  },[theme]);

const pageTitle={dashboard:'Dashboard',campaigns:'Campaigns',contacts:'Contacts',templates:'Email Templates',analytics:'Analytics',automation:'Automation Workflows',smtp:'SMTP Configuration',users:'Users & Roles',settings:'Settings',queue:'Email Queue',activity:'Activity Logs'};

if(!isLoggedIn)return(<><LoginPage onLogin={handleLogin}/><ToastContainer toasts={toasts} remove={removeToast}/></>);

const navSections=[
    {section:'Main',items:[{id:'dashboard',label:'Dashboard',icon:'dashboard'},{id:'campaigns',label:'Campaigns',icon:'campaigns'},{id:'contacts',label:'Contacts',icon:'contacts'},{id:'templates',label:'Templates',icon:'templates'}]},
    {section:'Growth',items:[{id:'automation',label:'Automation',icon:'automation',badge:'New'},{id:'analytics',label:'Analytics',icon:'analytics'}]},
    {section:'System',items:[{id:'smtp',label:'SMTP Config',icon:'smtp'},{id:'queue',label:'Email Queue',icon:'activity',qc:true},{id:'users',label:'Users & Roles',icon:'users'},{id:'activity',label:'Activity Logs',icon:'zap'},{id:'settings',label:'Settings',icon:'settings'}]},
  ];

return(<div className="app-layout">
    <aside className={`sidebar ${sidebarOpen?'open':''}`}>
      <div className="sidebar-logo">
        <div className="logo-mark"><svg viewBox="0 0 24 24" style={{width:20,height:20,fill:'white'}}><path d="M22 2L11 13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></div>
        <span className="logo-text">Mail<span>Flow</span></span>
      </div>
      <nav className="sidebar-nav">
        {navSections.map(section=>(
          <div key={section.section} className="nav-section">
            <div className="nav-section-label">{section.section}</div>
            {section.items.map(item=>(
              <div key={item.id} className={`nav-item ${page===item.id?'active':''}`} onClick={()=>{setPage(item.id);setSidebarOpen(false);}}>
                <Icon name={item.icon} size={15}/>{item.label}
                {item.badge&&<span className="nav-badge">{item.badge}</span>}
                {item.qc&&<span style={{marginLeft:'auto',fontSize:10,color:'var(--orange)',fontWeight:700}}>1.8k</span>}
              </div>
            ))}
          </div>
        ))}
      </nav>
      <div className="sidebar-footer">
        <div className="nav-item" onClick={()=>setTheme(t=>t==='light'?'dark':'light')}><Icon name={theme==='dark'?'sun':'moon'} size={15}/>{theme==='dark'?'Light Mode':'Dark Mode'}</div>
        <div className="user-card">
          <div className="user-avatar">{currentUser?.name?.[0]||'U'}</div>
          <div className="user-info"><div className="user-name">{currentUser?.name}</div><div className="user-role">Administrator</div></div>
        </div>
      </div>
    </aside>

{sidebarOpen&&<div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.4)',zIndex:99}} onClick={()=>setSidebarOpen(false)}/>}

<div className="main-content">
      <div className="topbar">
        <button className="icon-btn" onClick={()=>setSidebarOpen(p=>!p)}><Icon name="menu" size={18}/></button>
        <div className="topbar-title">{pageTitle[page]||'MailFlow'}</div>
        <div style={{marginRight:'auto'}}>
          {page==='campaigns'&&<button className="btn btn-primary btn-sm" style={{marginLeft:8}} onClick={()=>addToast('Opening campaign builder…','info')}><Icon name="plus" size={13}/>New Campaign</button>}
          {page==='contacts' &&<button className="btn btn-secondary btn-sm" style={{marginLeft:8}} onClick={()=>addToast('Import dialog…','info')}><Icon name="upload" size={13}/>Import CSV</button>}
          {page==='templates'&&<button className="btn btn-primary btn-sm" style={{marginLeft:8}} onClick={()=>addToast('Template editor…','info')}><Icon name="plus" size={13}/>New Template</button>}
        </div>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <button className="btn btn-ghost btn-sm" style={{gap:5,fontSize:12,color:'var(--text-muted)'}} onClick={()=>setPage('queue')}><span className="status-dot dot-orange"/>1,842 queued</button>
          <div style={{position:'relative'}}>
            <button className="icon-btn" onClick={()=>setShowNotifs(p=>!p)}><Icon name="bell" size={17}/></button>
            <div className="notif-dot"/>
            {showNotifs&&<NotificationPanel onClose={()=>setShowNotifs(false)}/>}
          </div>
          <button className="icon-btn" onClick={()=>setTheme(t=>t==='light'?'dark':'light')}><Icon name={theme==='dark'?'sun':'moon'} size={16}/></button>
          <div style={{display:'flex',alignItems:'center',gap:8,padding:'4px 10px',borderRadius:8,cursor:'pointer',border:'1px solid var(--border)',background:'var(--surface-2)'}} onClick={()=>setPage('settings')}>
            <div className="user-avatar" style={{width:26,height:26,fontSize:11}}>{currentUser?.name?.[0]}</div>
            <span style={{fontSize:13,fontWeight:600,color:'var(--text-primary)'}}>{currentUser?.name?.split(' ')[0]}</span>
          </div>
          <button className="icon-btn" title="Logout" onClick={handleLogout} style={{color:'var(--danger)'}}><Icon name="x" size={16}/></button>
        </div>
      </div>
      {renderPage()}
    </div>
    <ToastContainer toasts={toasts} remove={removeToast}/>
  </div>);
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);