// 1Radar v3 — Saved Ads with folders sidebar + grid

const SavedV3 = ({ onOpenAd, onAnalyzeAd, folderId, onFolderChange }) => {
  const [activeFolder, setActiveFolder] = React.useState(folderId || 'all');

  const changeFolder = (id) => {
    setActiveFolder(id);
    onFolderChange && onFolderChange(id);
  };

  const [search, setSearch]     = React.useState('');
  const [sort, setSort]         = React.useState('recent');
  const [sortDir, setSortDir]   = React.useState('desc');
  const [sortOpen, setSortOpen] = React.useState(false);
  const [custOpen, setCustOpen] = React.useState(false);
  const [cardFields, setCardFields] = React.useState(AD_CARD_FIELDS_DEFAULT);
  const [contentTab, setContentTab] = React.useState('ads');

  React.useEffect(() => { setContentTab('ads'); }, [activeFolder]);

  // ── Folders from API ─────────────────────────────────────────────────────────
  const [folders, setFolders]       = React.useState(window.SAVE_FOLDERS_V3 || SAVE_FOLDERS_V3);
  const [creatingRoot, setCreatingRoot] = React.useState(false);

  React.useEffect(() => {
    const sync = () => setFolders(window.SAVE_FOLDERS_V3 || []);
    window.addEventListener('folders-updated', sync);
    if (window.loadFolders) window.loadFolders();
    return () => window.removeEventListener('folders-updated', sync);
  }, []);

  const handleCreateFolder = async (name, iconChoice, parentId) => {
    try {
      await apiFetch('/folders', 'POST', {
        name,
        icon: iconChoice?.icon || 'folder',
        color: iconChoice?.color || null,
        parentId: parentId || null,
      });
      if (window.loadFolders) window.loadFolders();
    } catch {}
  };

  const handleDeleteFolder = async (id) => {
    if (!confirm('Supprimer ce dossier ?')) return;
    try { await apiFetch(`/folders/${id}`, 'DELETE'); if (window.loadFolders) window.loadFolders(); } catch {}
  };

  const handleRenameFolder = async (id, newName) => {
    try { await apiFetch(`/folders/${id}`, 'PATCH', { name: newName }); if (window.loadFolders) window.loadFolders(); } catch {}
  };

  // ── AI Images from API ───────────────────────────────────────────────────────
  const [aiImages, setAiImages]   = React.useState([]);
  const [aiLoading, setAiLoading] = React.useState(false);

  const loadAiImages = () => {
    setAiLoading(true);
    apiFetch('/images')
      .then(setAiImages)
      .catch(() => setAiImages([]))
      .finally(() => setAiLoading(false));
  };

  React.useEffect(() => { loadAiImages(); }, []);

  const handleDeleteImage = async (id) => {
    try {
      await apiFetch(`/images/${id}`, 'DELETE');
      setAiImages(prev => prev.filter(i => i._id !== id));
    } catch {}
  };

  const folderImages = activeFolder === 'all'
    ? aiImages
    : aiImages.filter(i => i.folderId === activeFolder);

  // ── Ads (still mock) ─────────────────────────────────────────────────────────
  const filtered = sortAds(
    ADS_V3.filter(a => !search || a.brand.toLowerCase().includes(search.toLowerCase())),
    sort, sortDir,
  );
  const activeSort = AD_SORT_OPTIONS.find(o => o.id === sort) || AD_SORT_OPTIONS[0];
  const activeF    = folders.find(f => f.id === activeFolder);

  return (
    <>
      <PageHeader
        icon="bookmark"
        title="Saved"
        subtitle="Votre bibliothèque de créatifs et générations IA"
        right={
          <>
            <button className="btn btn-stroke btn-sm" onClick={() => setCreatingRoot(true)}>
              <Icon name="folder" size={14}/> Nouveau dossier
            </button>
            <button className="btn btn-night btn-sm"><Icon name="export" size={14}/> Export all</button>
          </>
        }
      />

      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
        {/* ── Folder sidebar ── */}
        <div style={{
          width: 248, borderRight: '1px solid var(--border)',
          padding: 16, display: 'flex', flexDirection: 'column', gap: 4,
          overflowY: 'auto', flexShrink: 0,
        }} className="scroll">
          <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.06em', padding: '4px 8px 8px' }}>
            Library
          </div>
          {folders.filter(f => f.system).map(f => (
            <button key={f.id} onClick={() => changeFolder(f.id)} className={`nav-item ${activeFolder === f.id ? 'active' : ''}`}>
              <span style={{ display: 'inline-flex', width: 18, color: 'var(--text-faint)' }}>
                <Icon name={f.icon} size={16}/>
              </span>
              <span style={{ flex: 1, textAlign: 'left' }}>{f.name}</span>
              {f.id === 'all' && (
                <span style={{ fontSize: 11, color: 'var(--text-faint)', fontVariantNumeric: 'tabular-nums' }}>
                  {aiImages.length}
                </span>
              )}
            </button>
          ))}

          <div style={{ height: 1, background: 'var(--border)', margin: '10px 0 6px' }}/>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 8px 6px' }}>
            <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Dossiers</span>
            <button onClick={() => setCreatingRoot(true)} title="Nouveau dossier"
              style={{ width: 20, height: 20, borderRadius: 5, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-soft)'; e.currentTarget.style.color = 'var(--accent)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = 'var(--text-faint)'; }}>
              <Icon name="plus" size={13}/>
            </button>
          </div>

          {folders.filter(f => !f.system && !f.parentId).map(f => (
            <FolderTreeItem
              key={f.id}
              folder={f}
              allFolders={folders}
              depth={0}
              activeId={activeFolder}
              onSelect={changeFolder}
              onCreateFolder={handleCreateFolder}
              onDelete={handleDeleteFolder}
              onRename={handleRenameFolder}
              defaultOpen={true}
            />
          ))}

          {creatingRoot && (
            <InlineFolderCreateForm
              depth={0}
              onCommit={(name, iconChoice) => { handleCreateFolder(name, iconChoice, null); setCreatingRoot(false); }}
              onCancel={() => setCreatingRoot(false)}
            />
          )}
        </div>

        {/* ── Content ── */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {/* Tabs */}
          {!activeF?.system && (
            <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border)', padding: '0 24px' }}>
              {[
                { id: 'ads', icon: 'bookmark', label: 'Ads' },
                { id: 'ai',  icon: 'sparkles', label: 'AI Generation' },
              ].map(tab => (
                <button key={tab.id} onClick={() => setContentTab(tab.id)} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  height: 40, padding: '0 4px', marginRight: 20,
                  background: 'none', border: 'none',
                  borderBottom: `2px solid ${contentTab === tab.id ? 'var(--accent)' : 'transparent'}`,
                  color: contentTab === tab.id ? 'var(--accent)' : 'var(--text-2)',
                  fontSize: 13, fontWeight: contentTab === tab.id ? 600 : 400,
                  cursor: 'pointer', fontFamily: 'inherit',
                  transition: 'color 120ms, border-color 120ms',
                }}>
                  <Icon name={tab.icon} size={13}/>
                  {tab.label}
                  {tab.id === 'ai' && folderImages.length > 0 && (
                    <span style={{ fontSize: 11, fontWeight: 500, background: 'var(--accent-soft)', color: 'var(--accent)', borderRadius: 999, padding: '1px 6px' }}>
                      {folderImages.length}
                    </span>
                  )}
                </button>
              ))}
            </div>
          )}

          {/* Toolbar */}
          <div style={{ padding: '14px 24px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--text)', display: 'flex', alignItems: 'center', gap: 8 }}>
              {activeF && <Icon name={activeF.icon} size={18}/>}
              {activeF?.name || 'All saved'}
              <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--text-faint)', fontFamily: 'var(--font-sans)' }}>
                · {contentTab === 'ai' ? folderImages.length : filtered.slice(0, 16).length} items
              </span>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <div style={{ position: 'relative', width: 240 }}>
                <Icon name="search" size={14} style={{ position: 'absolute', left: 10, top: 9, color: 'var(--text-faint)' }}/>
                <input className="input" placeholder="Search…" value={search} onChange={e => setSearch(e.target.value)} style={{ paddingLeft: 32, height: 32 }}/>
              </div>
              <div style={{ position: 'relative' }}>
                <button className="chip" style={{ height: 32, color: sortOpen ? 'var(--accent)' : 'var(--text)', background: sortOpen ? 'var(--accent-soft)' : undefined }} onClick={() => setSortOpen(v => !v)}>
                  <Icon name={sortDir === 'asc' ? 'arrow-up' : 'sort-desc'} size={14}/> {activeSort.label}
                  <Icon name="arrow-down-s" size={14}/>
                </button>
                {sortOpen && <SortMenuV3 options={AD_SORT_OPTIONS} value={sort} direction={sortDir} onChange={setSort} onDirectionChange={setSortDir} onClose={() => setSortOpen(false)}/>}
              </div>
            </div>
          </div>

          {/* Content area */}
          <div style={{ flex: 1, overflow: 'auto', padding: 24 }} className="scroll">

            {/* AI Images tab */}
            {(activeF?.system === undefined || !activeF?.system || contentTab === 'ai') && contentTab === 'ai' && (
              aiLoading ? (
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-faint)', fontSize: 13 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--accent)', display: 'inline-block', animation: 'pulse 1s infinite' }}/>
                  Chargement…
                </div>
              ) : folderImages.length === 0 ? (
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '80px 0', gap: 12, color: 'var(--text-faint)' }}>
                  <Icon name="sparkles" size={32}/>
                  <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--text-2)' }}>Aucune génération dans ce dossier</div>
                  <div style={{ fontSize: 13 }}>Générez des images depuis le Workflow ou l'outil Image et sauvegardez-les ici</div>
                </div>
              ) : (
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 12 }}>
                  {folderImages.map(img => (
                    <div key={img._id} style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-soft)', aspectRatio: '1/1', cursor: 'pointer', border: '1px solid var(--border)' }}
                      onClick={() => window.open(img.url, '_blank')}>
                      <img src={img.url} alt={img.prompt || 'AI image'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
                      {/* Overlay on hover */}
                      <div className="img-overlay" style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0)', transition: 'background 150ms', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 8 }}
                        onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.38)'}
                        onMouseLeave={e => e.currentTarget.style.background = 'rgba(0,0,0,0)'}>
                        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                          <button onClick={e => { e.stopPropagation(); handleDeleteImage(img._id); }}
                            style={{ width: 26, height: 26, borderRadius: 6, background: 'rgba(220,53,69,0.85)', border: 'none', cursor: 'pointer', color: '#fff', display: 'grid', placeItems: 'center', opacity: 0, transition: 'opacity 150ms' }}
                            onMouseEnter={e => { e.currentTarget.style.opacity = 1; e.currentTarget.parentElement.parentElement.style.background = 'rgba(0,0,0,0.38)'; }}
                            onMouseLeave={e => { e.currentTarget.style.opacity = 0; }}>
                            <Icon name="trash" size={12}/>
                          </button>
                        </div>
                        {img.prompt && (
                          <div style={{ fontSize: 11, color: '#fff', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
                            {img.prompt}
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )
            )}

            {/* Ads tab (mock for now) */}
            {(contentTab === 'ads' || activeF?.system) && contentTab !== 'ai' && (
              <div style={{ columnCount: 4, columnGap: 12 }}>
                {filtered.slice(0, 16).map(ad => (
                  <AdCard key={ad.id} ad={ad} fields={cardFields} onOpen={onOpenAd} onAnalyze={onAnalyzeAd} onSave={() => {}}/>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { SavedV3 });