/* Mediathek tab — campaigns by channel + email integration drop zone */

const COMPOSE_HANDOFF_KEY = 'hookline:compose-incoming';
const NEW_CAMPAIGN_PALETTE = ['#e5a3c3', '#79d2a3', '#7aa7ff', '#f1c054', '#c8c6c5'];

function formatDateShort(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  if (isNaN(d)) return iso;
  return d.toLocaleDateString('en-US', { month: 'short', day: '2-digit' });
}

function toDateInput(display) {
  if (!display) return '';
  if (/^\d{4}-\d{2}-\d{2}$/.test(display)) return display;
  const year = new Date().getFullYear();
  const d = new Date(`${display} ${year}`);
  if (isNaN(d)) return '';
  const yyyy = d.getFullYear();
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${yyyy}-${mm}-${dd}`;
}

function slugifyCampaign(name) {
  const base = (name || 'campaign')
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/(^-|-$)/g, '');
  return `${base}-${Math.random().toString(36).slice(2, 6)}`;
}

function Toast({ message, onDone }) {
  useEffect(() => {
    const t = setTimeout(onDone, 3000);
    return () => clearTimeout(t);
  }, []);
  return (
    <div style={{
      position: 'fixed', bottom: 28, right: 28, zIndex: 2000,
      background: 'var(--good, #3ecf8e)', color: '#fff',
      padding: '10px 18px', borderRadius: 10,
      fontSize: 13.5, fontWeight: 500,
      boxShadow: '0 4px 20px rgba(0,0,0,.25)',
      pointerEvents: 'none',
      animation: 'fadeInUp .2s ease',
    }}>
      {message}
    </div>
  );
}

function MediathekTab() {
  const [campaigns, setCampaigns] = useState(CAMPAIGNS);
  const [activeCampaign, setActiveCampaign] = useState('spring-popup');
  const [activeFormat, setActiveFormat] = useState('all'); // all | photo | video
  const [activeMarket, setActiveMarket] = useState('all');
  const [view, setView] = useState('grid');
  const [allAssets, setAllAssets] = useState(() =>
    MEDIA_ASSETS.map((a, i) => ({ ...a, uid: `seed-${i}` }))
  );
  const [toast, setToast] = useState(null);
  const [briefModal, setBriefModal] = useState(null);
  const [newCampaignModal, setNewCampaignModal] = useState(null);
  const [campaignBriefs, setCampaignBriefs] = useState({});
  const fileInputRef = useRef(null);

  const campaign = campaigns.find(c => c.id === activeCampaign);
  const assets = allAssets.filter(a =>
    (activeCampaign === 'all' || a.campaign === activeCampaign) &&
    (activeFormat   === 'all' || a.kind     === activeFormat) &&
    (activeMarket   === 'all' || a.mk       === activeMarket)
  );

  function showToast(msg) {
    setToast(msg);
  }

  function handleUploadClick() {
    fileInputRef.current && fileInputRef.current.click();
  }

  function handleFilesSelected(e) {
    const files = Array.from(e.target.files);
    if (!files.length) return;
    const stamp = Date.now();
    const newAssets = files.map((f, i) => ({
      uid: `up-${stamp}-${i}`,
      name: f.name,
      kind: f.type.startsWith('video') ? 'video' : 'photo',
      mk: activeMarket === 'all' ? 'de' : activeMarket,
      campaign: activeCampaign === 'all' ? null : activeCampaign,
      ph: 'ph-photo',
    }));
    setAllAssets(prev => [...prev, ...newAssets]);
    const campaignName = campaign ? campaign.name : 'All campaigns';
    showToast(`${files.length} file${files.length > 1 ? 's' : ''} added to ${campaignName}`);
    e.target.value = '';
  }

  function moveAsset(uid, newCampaignId) {
    setAllAssets(prev => prev.map(a => a.uid === uid ? { ...a, campaign: newCampaignId } : a));
    const targetName = newCampaignId
      ? (campaigns.find(c => c.id === newCampaignId) || {}).name || 'campaign'
      : 'Unfiled';
    showToast(`Moved to ${targetName}`);
  }

  function deleteAsset(uid) {
    setAllAssets(prev => prev.filter(a => a.uid !== uid));
    showToast('Creative deleted');
  }

  function deleteCampaign(id) {
    const camp = campaigns.find(c => c.id === id);
    if (!camp) return;
    if (!window.confirm(`Delete "${camp.name}"? Its creatives will move to Unfiled.`)) return;
    setCampaigns(prev => prev.filter(c => c.id !== id));
    setAllAssets(prev => prev.map(a => a.campaign === id ? { ...a, campaign: null } : a));
    setCampaignBriefs(prev => {
      const next = { ...prev };
      delete next[id];
      return next;
    });
    if (activeCampaign === id) {
      const remaining = campaigns.filter(c => c.id !== id);
      setActiveCampaign(remaining.length ? remaining[0].id : 'all');
    }
    showToast(`Campaign "${camp.name}" deleted`);
  }

  function openEditBrief(c) {
    setBriefModal({
      campaign: c,
      brief: campaignBriefs[c.id] || 'Define the creative direction, goals, and guidelines for this campaign.',
      keyVisuals: '',
      targetAudience: '',
      start: toDateInput(c.start),
      end: toDateInput(c.end),
      markets: [...c.markets],
    });
  }

  function toggleBriefMarket(code) {
    setBriefModal(prev => {
      if (!prev) return prev;
      const has = prev.markets.includes(code);
      return { ...prev, markets: has ? prev.markets.filter(m => m !== code) : [...prev.markets, code] };
    });
  }

  function saveBrief() {
    if (!briefModal) return;
    setCampaignBriefs(prev => ({ ...prev, [briefModal.campaign.id]: briefModal.brief }));
    setCampaigns(prev => prev.map(c => c.id === briefModal.campaign.id ? {
      ...c,
      start: briefModal.start ? formatDateShort(briefModal.start) : c.start,
      end:   briefModal.end   ? formatDateShort(briefModal.end)   : c.end,
      markets: briefModal.markets.length ? briefModal.markets : c.markets,
    } : c));
    showToast('Brief updated');
    setBriefModal(null);
  }

  function openNewCampaign() {
    setNewCampaignModal({
      name: '',
      start: '',
      end: '',
      audience: '',
      description: '',
      markets: [],
    });
  }

  function toggleNewCampaignMarket(code) {
    setNewCampaignModal(prev => {
      if (!prev) return prev;
      const has = prev.markets.includes(code);
      return { ...prev, markets: has ? prev.markets.filter(m => m !== code) : [...prev.markets, code] };
    });
  }

  function saveNewCampaign() {
    if (!newCampaignModal) return;
    const name = newCampaignModal.name.trim();
    if (!name) { showToast('Campaign needs a name'); return; }
    const id = slugifyCampaign(name);
    const color = NEW_CAMPAIGN_PALETTE[campaigns.length % NEW_CAMPAIGN_PALETTE.length];
    const created = {
      id,
      name,
      color,
      status: 'planning',
      start: newCampaignModal.start ? formatDateShort(newCampaignModal.start) : '—',
      end:   newCampaignModal.end   ? formatDateShort(newCampaignModal.end)   : '—',
      posts: 0, scheduled: 0, live: 0, drafts: 0,
      markets: newCampaignModal.markets,
      creatives: 0,
      source: 'manual',
      summary: newCampaignModal.description.trim() || 'New campaign — add a brief, key visuals and markets to get started.',
    };
    setCampaigns(prev => [...prev, created]);
    if (newCampaignModal.audience.trim() || newCampaignModal.description.trim()) {
      setCampaignBriefs(prev => ({
        ...prev,
        [id]: newCampaignModal.description.trim() || 'Define the creative direction, goals, and guidelines for this campaign.',
      }));
    }
    setActiveCampaign(id);
    setNewCampaignModal(null);
    showToast(`Campaign "${name}" created`);
  }

  function handleGenerate() {
    try {
      sessionStorage.setItem(COMPOSE_HANDOFF_KEY, JSON.stringify({
        source: 'higgsfield',
        campaign: activeCampaign !== 'all' ? activeCampaign : null,
      }));
    } catch (e) {}
    window.postMessage({ type: 'navigate', to: 'compose' }, '*');
  }

  return (
    <div style={{ display: 'flex', minHeight: '100%' }}>
      <input
        ref={fileInputRef}
        type="file"
        multiple
        accept="video/*,image/*"
        style={{ display: 'none' }}
        onChange={handleFilesSelected}
      />

      {toast && <Toast message={toast} onDone={() => setToast(null)} />}

      {briefModal && (
        <div
          onClick={() => setBriefModal(null)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{ background: 'var(--bg-1)', borderRadius: 12, padding: 24, maxWidth: 520, width: '90%', boxShadow: '0 8px 40px rgba(0,0,0,.3)', display: 'flex', flexDirection: 'column', gap: 16 }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 4, height: 28, borderRadius: 4, background: briefModal.campaign.color, flexShrink: 0 }} />
              <div className="headline" style={{ fontSize: 17 }}>{briefModal.campaign.name}</div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Brief</label>
              <textarea
                className="input"
                style={{ minHeight: 120, resize: 'vertical', fontFamily: 'inherit', fontSize: 13.5, lineHeight: 1.55 }}
                value={briefModal.brief}
                onChange={e => setBriefModal(prev => ({ ...prev, brief: e.target.value }))}
              />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Key visuals</label>
              <input
                className="input"
                placeholder="e.g. Spring palette, hero product shots, outdoor settings"
                value={briefModal.keyVisuals}
                onChange={e => setBriefModal(prev => ({ ...prev, keyVisuals: e.target.value }))}
              />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Target audience</label>
              <input
                className="input"
                placeholder="e.g. 25–40, urban, sustainability-minded"
                value={briefModal.targetAudience}
                onChange={e => setBriefModal(prev => ({ ...prev, targetAudience: e.target.value }))}
              />
            </div>

            <div style={{ display: 'flex', gap: 10 }}>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Start</label>
                <input
                  type="date"
                  className="input"
                  value={briefModal.start}
                  onChange={e => setBriefModal(prev => ({ ...prev, start: e.target.value }))}
                />
              </div>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>End</label>
                <input
                  type="date"
                  className="input"
                  value={briefModal.end}
                  onChange={e => setBriefModal(prev => ({ ...prev, end: e.target.value }))}
                />
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Markets</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {MARKETS.map(m => {
                  const on = briefModal.markets.includes(m.code);
                  return (
                    <button
                      key={m.code}
                      type="button"
                      onClick={() => toggleBriefMarket(m.code)}
                      className="press"
                      style={{
                        display: 'inline-flex', alignItems: 'center', gap: 6,
                        padding: '5px 10px', borderRadius: 6,
                        background: on ? 'rgba(122,167,255,.12)' : 'var(--bg-2)',
                        border: '1px solid ' + (on ? 'rgba(122,167,255,.45)' : 'var(--line-2)'),
                        color: on ? 'var(--accent)' : 'var(--fg-2)',
                        fontSize: 11.5, cursor: 'pointer',
                      }}
                    >
                      <Flag code={m.code} size={11} /> {m.code.toUpperCase()}
                    </button>
                  );
                })}
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button className="btn press" onClick={() => setBriefModal(null)}>Cancel</button>
              <button className="btn primary press" onClick={saveBrief}><Icon name="check" size={15} /> Save</button>
            </div>
          </div>
        </div>
      )}

      {newCampaignModal && (
        <div
          onClick={() => setNewCampaignModal(null)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{ background: 'var(--bg-1)', borderRadius: 12, padding: 24, maxWidth: 520, width: '90%', boxShadow: '0 8px 40px rgba(0,0,0,.3)', display: 'flex', flexDirection: 'column', gap: 16 }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 4, height: 28, borderRadius: 4, background: NEW_CAMPAIGN_PALETTE[campaigns.length % NEW_CAMPAIGN_PALETTE.length], flexShrink: 0 }} />
              <div className="headline" style={{ fontSize: 17 }}>{newCampaignModal.name.trim() || 'New campaign'}</div>
              <Tick tone="idle">Planning</Tick>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Name</label>
              <input
                className="input"
                placeholder="e.g. Autumn Editorial · 2026"
                value={newCampaignModal.name}
                onChange={e => setNewCampaignModal(prev => ({ ...prev, name: e.target.value }))}
                autoFocus
              />
            </div>

            <div style={{ display: 'flex', gap: 10 }}>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Start</label>
                <input
                  type="date"
                  className="input"
                  value={newCampaignModal.start}
                  onChange={e => setNewCampaignModal(prev => ({ ...prev, start: e.target.value }))}
                />
              </div>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>End</label>
                <input
                  type="date"
                  className="input"
                  value={newCampaignModal.end}
                  onChange={e => setNewCampaignModal(prev => ({ ...prev, end: e.target.value }))}
                />
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Audience</label>
              <input
                className="input"
                placeholder="e.g. 25–40, urban, sustainability-minded"
                value={newCampaignModal.audience}
                onChange={e => setNewCampaignModal(prev => ({ ...prev, audience: e.target.value }))}
              />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Markets</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {MARKETS.map(m => {
                  const on = newCampaignModal.markets.includes(m.code);
                  return (
                    <button
                      key={m.code}
                      type="button"
                      onClick={() => toggleNewCampaignMarket(m.code)}
                      className="press"
                      style={{
                        display: 'inline-flex', alignItems: 'center', gap: 6,
                        padding: '5px 10px', borderRadius: 6,
                        background: on ? 'rgba(122,167,255,.12)' : 'var(--bg-2)',
                        border: '1px solid ' + (on ? 'rgba(122,167,255,.45)' : 'var(--line-2)'),
                        color: on ? 'var(--accent)' : 'var(--fg-2)',
                        fontSize: 11.5, cursor: 'pointer',
                      }}
                    >
                      <Flag code={m.code} size={11} /> {m.code.toUpperCase()}
                    </button>
                  );
                })}
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label className="caps" style={{ color: 'var(--fg-3)', fontSize: 10 }}>Description</label>
              <textarea
                className="input"
                style={{ minHeight: 96, resize: 'vertical', fontFamily: 'inherit', fontSize: 13.5, lineHeight: 1.55, paddingTop: 9 }}
                placeholder="Creative direction, goals, key visuals…"
                value={newCampaignModal.description}
                onChange={e => setNewCampaignModal(prev => ({ ...prev, description: e.target.value }))}
              />
            </div>

            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button className="btn press" onClick={() => setNewCampaignModal(null)}>Cancel</button>
              <button className="btn primary press" onClick={saveNewCampaign} disabled={!newCampaignModal.name.trim()}>
                <Icon name="add" size={15} /> Create campaign
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Campaign rail */}
      <div style={{ width: 320, borderRight: '1px solid var(--line)', padding: '20px 16px', display: 'flex', flexDirection: 'column', gap: 14, flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div className="caps" style={{ color: 'var(--fg-3)' }}>Campaigns</div>
          <span className="chip mono" style={{ fontSize: 10 }}>{campaigns.length}</span>
          <div style={{ flex: 1 }} />
          <button className="btn sm press" onClick={openNewCampaign}><Icon name="add" size={14} /> New</button>
        </div>

        <input className="input" placeholder="Search campaigns…" />

        <div className="stagger" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button onClick={() => setActiveCampaign('all')} className="press lift" style={campaignBtn(activeCampaign === 'all')}>
            <Icon name="apps" size={16} style={{ color: 'var(--fg-3)' }} />
            <span style={{ flex: 1, textAlign: 'left' }}>All campaigns</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>{allAssets.length}</span>
          </button>

          {campaigns.map(c => (
            <button key={c.id} onClick={() => setActiveCampaign(c.id)} className="press lift" style={campaignBtn(activeCampaign === c.id)}>
              <span style={{ width: 4, height: 28, borderRadius: 4, background: c.color, flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>
                  {c.start} → {c.end} · {c.creatives} creatives
                </div>
              </div>
              {c.source === 'email' && <Icon name="mail" size={14} style={{ color: 'var(--accent)' }} />}
            </button>
          ))}
        </div>

        <div style={{ flex: 1 }} />
        <EmailDropZone />
      </div>

      {/* Asset workspace */}
      <div style={{ flex: 1, padding: '24px 36px 60px', display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
        {campaign && activeCampaign !== 'all' && (
          <CampaignHeader campaign={campaign} onEditBrief={() => openEditBrief(campaign)} onDelete={() => deleteCampaign(campaign.id)} />
        )}

        {/* Filter strip — channel segmentation is gone; assets categorise by
            format (photo/video), campaign, and market only. */}
        <div className="anim-fade-up" style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <div className="seg">
            <button className={activeFormat==='all'?'on':''}   onClick={()=>setActiveFormat('all')}>All formats</button>
            <button className={activeFormat==='photo'?'on':''} onClick={()=>setActiveFormat('photo')} style={{ display:'inline-flex', alignItems:'center', gap: 6 }}>
              <Icon name="photo" size={12} /> Photo
            </button>
            <button className={activeFormat==='video'?'on':''} onClick={()=>setActiveFormat('video')} style={{ display:'inline-flex', alignItems:'center', gap: 6 }}>
              <Icon name="movie" size={12} /> Video
            </button>
          </div>

          <div className="seg">
            <button className={activeMarket==='all'?'on':''} onClick={()=>setActiveMarket('all')}>All markets</button>
            {MARKETS.map(m => (
              <button key={m.code} className={activeMarket===m.code?'on':''} onClick={()=>setActiveMarket(m.code)} style={{ display:'inline-flex', alignItems:'center', gap: 6 }}>
                <Flag code={m.code} size={11} /> {m.code.toUpperCase()}
              </button>
            ))}
          </div>

          <div style={{ flex: 1 }} />

          <div className="seg">
            <button className={view==='grid'?'on':''} onClick={()=>setView('grid')}><Icon name="grid_view" size={14}/></button>
            <button className={view==='list'?'on':''} onClick={()=>setView('list')}><Icon name="view_list" size={14}/></button>
          </div>
          <button className="btn press" onClick={handleUploadClick}><Icon name="upload_file" size={16} /> Upload</button>
          <button className="btn primary press" onClick={handleGenerate}><Icon name="auto_awesome" size={16} /> Generate</button>
        </div>

        {/* Per-format sections (photo / video) */}
        {activeCampaign !== 'all' && (
          <FormatSections
            campaign={campaign}
            assets={assets}
            view={view}
            campaigns={campaigns}
            onMoveAsset={moveAsset}
            onDeleteAsset={deleteAsset}
          />
        )}

        {activeCampaign === 'all' && (
          <AllCampaignsBoard campaigns={campaigns} />
        )}
      </div>
    </div>
  );
}

function campaignBtn(active) {
  return {
    display: 'flex', alignItems: 'center', gap: 10,
    background: active ? 'var(--bg-2)' : 'transparent',
    border: '1px solid ' + (active ? 'var(--line-2)' : 'transparent'),
    borderRadius: 10, padding: '10px 12px',
    cursor: 'pointer', color: 'var(--fg)',
  };
}

function CampaignHeader({ campaign, onEditBrief, onDelete }) {
  return (
    <div className="panel anim-fade-up" style={{ padding: 22, display: 'flex', alignItems: 'flex-start', gap: 22 }}>
      <div style={{ width: 4, height: 56, borderRadius: 4, background: campaign.color, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
          <div className="display" style={{ fontSize: 24 }}>{campaign.name}</div>
          {campaign.status === 'active' && <Status tone="live" label="Active" />}
          {campaign.status === 'planning' && <Tick tone="idle">Planning</Tick>}
          {campaign.status === 'idea' && <Tick tone="warn">Brief from email</Tick>}
          {campaign.source === 'email' && (
            <span className="chip" style={{ color: 'var(--accent)', borderColor: 'rgba(122,167,255,.3)' }}>
              <Icon name="mail" size={11} /> auto-structured
            </span>
          )}
        </div>
        <div style={{ color: 'var(--fg-3)', fontSize: 13.5, marginBottom: 12 }}>{campaign.summary}</div>

        <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
          <Metric label="Range" value={`${campaign.start} → ${campaign.end}`} />
          <Metric label="Markets" value={campaign.markets.map(m => m.toUpperCase()).join(' · ')} />
          <Metric label="Creatives" value={campaign.creatives} />
          <Metric label="Scheduled" value={campaign.scheduled} tone="accent" />
          <Metric label="Live" value={campaign.live} tone="good" />
          <Metric label="Drafts" value={campaign.drafts} />
        </div>
      </div>

      <div style={{ display: 'flex', gap: 8 }}>
        <button className="btn press"><Icon name="share" size={16} /> Share</button>
        <button className="btn primary press" onClick={onEditBrief}><Icon name="edit" size={16} /> Edit brief</button>
        <button className="btn destructive press" onClick={onDelete} title="Delete campaign">
          <Icon name="delete" size={16} />
        </button>
      </div>
    </div>
  );
}

function Metric({ label, value, tone }) {
  const c = tone === 'accent' ? 'var(--accent)' : tone === 'good' ? 'var(--good)' : 'var(--fg)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <span className="caps" style={{ color: 'var(--fg-3)' }}>{label}</span>
      <span style={{ fontFamily: 'Hanken Grotesk', fontWeight: 600, fontSize: 16, color: c }}>{value}</span>
    </div>
  );
}

function FormatSections({ campaign, assets, view, campaigns, onMoveAsset, onDeleteAsset }) {
  // Assets are platform-agnostic — group by format (Photo / Video). A section
  // only renders if the campaign has assets in that bucket.
  const formats = [
    { id: 'photo', name: 'Photos', icon: 'photo' },
    { id: 'video', name: 'Videos', icon: 'movie' },
  ];
  const formatsToShow = formats.filter(f => assets.some(a => a.kind === f.id));
  const finalFormats = formatsToShow.length ? formatsToShow : [formats[0]];

  return (
    <div className="stagger" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      {finalFormats.map(f => {
        const fAssets = assets.filter(a => a.kind === f.id);
        return (
          <div key={f.id} className="panel" style={{ padding: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{
                width: 26, height: 26, borderRadius: 8,
                background: 'var(--bg-3)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={f.icon} size={14} />
              </div>
              <div className="headline" style={{ fontSize: 15 }}>{f.name}</div>
              <span className="chip mono" style={{ fontSize: 10 }}>{fAssets.length} assets</span>
              <div style={{ flex: 1 }} />
              <div style={{ display: 'flex', gap: 6 }}>
                {campaign.markets.map(m => (
                  <span key={m} className="chip" style={{ padding: '3px 8px' }}>
                    <Flag code={m} size={11} /> {m.toUpperCase()}
                  </span>
                ))}
              </div>
            </div>

            {view === 'grid' && (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(168px, 1fr))', gap: 10 }}>
                {fAssets.map(a => (
                  <AssetTile
                    key={a.uid}
                    asset={a}
                    campaigns={campaigns}
                    onMove={onMoveAsset}
                    onDelete={onDeleteAsset}
                  />
                ))}
              </div>
            )}
            {view === 'list' && (
              <div style={{ display: 'flex', flexDirection: 'column', borderRadius: 10, border: '1px solid var(--line)', overflow: 'hidden' }}>
                {fAssets.map((a, i) => (
                  <AssetRow
                    key={a.uid}
                    asset={a}
                    last={i === fAssets.length - 1}
                    campaigns={campaigns}
                    onMove={onMoveAsset}
                    onDelete={onDeleteAsset}
                  />
                ))}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function AssetMenu({ asset, campaigns, onMove, onDelete, onClose }) {
  const others = campaigns.filter(c => c.id !== asset.campaign);
  return (
    <>
      <div
        onClick={onClose}
        style={{ position: 'fixed', inset: 0, zIndex: 50, background: 'transparent' }}
      />
      <div
        onClick={e => e.stopPropagation()}
        style={{
          position: 'absolute', top: 30, right: 6, zIndex: 60, minWidth: 200,
          background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 8,
          boxShadow: '0 8px 24px rgba(0,0,0,.4)', padding: 6,
          display: 'flex', flexDirection: 'column', gap: 2,
        }}
      >
        <div className="caps" style={{ color: 'var(--fg-3)', padding: '6px 8px 4px' }}>Move to</div>
        {others.length === 0 && (
          <div style={{ padding: '6px 8px', fontSize: 12, color: 'var(--fg-3)' }}>No other campaigns</div>
        )}
        {others.map(c => (
          <button
            key={c.id}
            className="press"
            onClick={() => { onMove(asset.uid, c.id); onClose(); }}
            style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '6px 8px', borderRadius: 6,
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: 'var(--fg)', textAlign: 'left', fontSize: 12.5,
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-3)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <span style={{ width: 3, height: 14, borderRadius: 2, background: c.color, flexShrink: 0 }} />
            <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</span>
          </button>
        ))}
        {asset.campaign !== null && (
          <button
            className="press"
            onClick={() => { onMove(asset.uid, null); onClose(); }}
            style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '6px 8px', borderRadius: 6,
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: 'var(--fg-2)', textAlign: 'left', fontSize: 12.5,
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-3)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <Icon name="inbox" size={13} /> Unfile
          </button>
        )}
        <div style={{ height: 1, background: 'var(--line)', margin: '4px 0' }} />
        <button
          className="press"
          onClick={() => { onDelete(asset.uid); onClose(); }}
          style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 8px', borderRadius: 6,
            background: 'transparent', border: 'none', cursor: 'pointer',
            color: 'var(--bad)', textAlign: 'left', fontSize: 12.5,
          }}
          onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,138,126,.1)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
        >
          <Icon name="delete" size={13} /> Delete
        </button>
      </div>
    </>
  );
}

function AssetTile({ asset, campaigns, onMove, onDelete }) {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <div className="lift" style={{
      background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 10,
      cursor: 'pointer', display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <div style={{ position: 'relative', borderRadius: '10px 10px 0 0', overflow: 'hidden' }}>
        <PhotoTile ph={asset.ph} video={asset.kind==='video'} dur={asset.dur} style={{ aspectRatio: '1 / 1' }} />
        <button
          className="press"
          onClick={e => { e.stopPropagation(); setMenuOpen(o => !o); }}
          aria-label="Asset options"
          style={{
            position: 'absolute', top: 6, right: 6,
            width: 26, height: 26, borderRadius: 6,
            background: 'rgba(14,14,16,.7)', border: '1px solid var(--line-2)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', color: 'var(--fg)', backdropFilter: 'blur(4px)',
          }}
        >
          <Icon name="more_horiz" size={14} />
        </button>
      </div>
      {menuOpen && (
        <AssetMenu
          asset={asset}
          campaigns={campaigns}
          onMove={onMove}
          onDelete={onDelete}
          onClose={() => setMenuOpen(false)}
        />
      )}
      <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 3 }}>
        <div style={{ fontSize: 11.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{asset.name}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Flag code={asset.mk} size={10} />
          <span className="mono" style={{ fontSize: 9.5, color: 'var(--fg-3)', textTransform: 'uppercase' }}>{asset.kind}</span>
        </div>
      </div>
    </div>
  );
}

function AssetRow({ asset, last, campaigns, onMove, onDelete }) {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <div className="lift" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderBottom: last ? 'none' : '1px solid var(--line)', background: 'var(--bg-1)', position: 'relative' }}>
      <PhotoTile ph={asset.ph} video={asset.kind==='video'} dur={asset.dur} style={{ width: 48, height: 48, borderRadius: 6, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 500 }}>{asset.name}</div>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>
          {asset.kind} · <Flag code={asset.mk} size={11} /> {asset.mk.toUpperCase()}
        </div>
      </div>
      <button className="btn sm press" onClick={e => { e.stopPropagation(); setMenuOpen(o => !o); }}>
        <Icon name="more_horiz" size={14} />
      </button>
      {menuOpen && (
        <AssetMenu
          asset={asset}
          campaigns={campaigns}
          onMove={onMove}
          onDelete={onDelete}
          onClose={() => setMenuOpen(false)}
        />
      )}
    </div>
  );
}

function EmailDropZone() {
  return (
    <div className="panel" style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8, position: 'relative', overflow: 'hidden' }}>
      <div className="dotgrid" style={{ position: 'absolute', inset: 0, opacity: .35, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icon name="mark_email_unread" size={16} style={{ color: 'var(--accent)' }} fill />
        <div className="caps" style={{ color: 'var(--fg)' }}>Email integration</div>
        <Tick tone="live" bars>Inbox live</Tick>
      </div>
      <div style={{ position: 'relative', fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.5 }}>
        Send a brief to <span className="mono" style={{ color: 'var(--fg)', background: 'var(--bg-3)', padding: '1px 6px', borderRadius: 4 }}>campaigns@hookline.io</span> and the bot will auto-structure a campaign with channels, markets and folders.
      </div>
      <div className="hairline" style={{ position: 'relative', borderRadius: 8, padding: 8, background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="mail" size={12} style={{ color: 'var(--accent)' }} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>"Summer Launch — please structure for IG/TT, DE/UK/PL"</div>
          <div className="mono" style={{ fontSize: 9.5, color: 'var(--fg-3)' }}>from anna@brand.de · 2 min ago · structured ✓</div>
        </div>
      </div>
    </div>
  );
}

function AllCampaignsBoard({ campaigns }) {
  return (
    <div className="stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 14 }}>
      {campaigns.map(c => (
        <div key={c.id} className="panel lift" style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 12, cursor: 'pointer' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 4, height: 28, borderRadius: 4, background: c.color }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="headline" style={{ fontSize: 16 }}>{c.name}</div>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{c.start} → {c.end}</div>
            </div>
            {c.status === 'active' && <Status tone="live" label="Active" compact />}
            {c.status === 'idea' && <Tick tone="warn">Brief</Tick>}
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.45 }}>{c.summary}</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {c.markets.map(m => <span key={m} className="chip" style={{ padding: '2px 8px' }}><Flag code={m} size={10} /> {m.toUpperCase()}</span>)}
          </div>
          <div className="hairline-t" style={{ paddingTop: 10, display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-3)' }}>
            <span>{c.creatives} creatives · {c.posts} posts</span>
            <span style={{ display: 'flex', gap: 10 }}>
              <span style={{ color: 'var(--good)' }}>● {c.live}</span>
              <span style={{ color: 'var(--accent)' }}>● {c.scheduled}</span>
              <span>● {c.drafts}</span>
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { MediathekTab });