/* global React, Card, Badge, Button, Avatar, Icon, ICONS */
const { useState: useFTState, useRef: useFTRef, useEffect: useFTEffect } = React;

// Read Google settings from localStorage directly (avoids dependency on window.useGoogleSettings being loaded)
function _useGS() {
  const [s, setS] = useFTState(() => {
    try { return { calendarEnabled:false, meetEnabled:false, driveEnabled:false, ...JSON.parse(localStorage.getItem('inbrivvo_google_settings') || '{}') }; }
    catch { return { calendarEnabled:false, meetEnabled:false, driveEnabled:false }; }
  });
  return [s, setS];
}

const FT_FOLDERS = [
  { id: 'all',       lab: 'Todos os arquivos', icon: 'folder' },
  { id: 'briefing',  lab: 'Briefing & referências', icon: 'document' },
  { id: 'design',    lab: 'Design & artes', icon: 'palette' },
  { id: 'contratos', lab: 'Contratos', icon: 'shield' },
  { id: 'entregas',  lab: 'Entregas finais', icon: 'check' },
];

const FT_SEED = [
  { id: 'f1',  folder: 'briefing',  name: 'Briefing inicial — Astra.pdf',           type: 'pdf',  size: 2_400_000, ver: 'v3', who: 'Ana Silva',  when: 'Hoje, 09:42',  shared: true,  cli: true },
  { id: 'f2',  folder: 'briefing',  name: 'Moodboard — referências visuais.pdf',     type: 'pdf',  size: 18_700_000,ver: 'v2', who: 'Marcos R',    when: 'Ontem, 16:11', shared: true,  cli: true },
  { id: 'f3',  folder: 'briefing',  name: 'Pesquisa de mercado.xlsx',                type: 'xls',  size: 480_000,   ver: 'v1', who: 'Ana Silva',   when: '12/03',        shared: false, cli: false},
  { id: 'f4',  folder: 'design',    name: 'Identidade visual — explorações.fig',     type: 'fig',  size: 84_300_000,ver: 'v5', who: 'Juliana P',   when: 'Hoje, 11:20',  shared: true,  cli: false},
  { id: 'f5',  folder: 'design',    name: 'Logo Astra — versão final.svg',           type: 'svg',  size: 64_000,    ver: 'v2', who: 'Juliana P',   when: 'Hoje, 14:08',  shared: true,  cli: true },
  { id: 'f6',  folder: 'design',    name: 'Manual de marca.pdf',                     type: 'pdf',  size: 12_100_000,ver: 'v1', who: 'Juliana P',   when: '02/04',        shared: false, cli: false},
  { id: 'f7',  folder: 'design',    name: 'Hero — banner site.png',                  type: 'img',  size: 4_800_000, ver: 'v3', who: 'Lucas V',     when: '04/04',        shared: false, cli: false},
  { id: 'f8',  folder: 'design',    name: 'Aplicações — embalagem.png',              type: 'img',  size: 6_200_000, ver: 'v2', who: 'Lucas V',     when: '05/04',        shared: false, cli: false},
  { id: 'f9',  folder: 'contratos', name: 'Contrato de prestação — Astra.pdf',       type: 'pdf',  size: 320_000,   ver: 'v1', who: 'Marcos R',    when: '12/03',        shared: true,  cli: true },
  { id: 'f10', folder: 'contratos', name: 'NDA assinado.pdf',                        type: 'pdf',  size: 280_000,   ver: 'v1', who: 'Marcos R',    when: '11/03',        shared: true,  cli: true },
  { id: 'f11', folder: 'entregas',  name: 'Pacote final — Astra rebrand.zip',        type: 'zip',  size: 142_800_000,ver:'v1', who: 'Ana Silva',   when: 'Aguardando',   shared: false, cli: false},
];

const FT_TYPE_META = {
  pdf: { color: '#F5325C', lab: 'PDF',  bg: 'rgba(245,50,92,0.14)' },
  fig: { color: '#A861F2', lab: 'FIG',  bg: 'rgba(168,97,242,0.14)' },
  img: { color: '#36CFC9', lab: 'IMG',  bg: 'rgba(54,207,201,0.14)' },
  svg: { color: '#36CFC9', lab: 'SVG',  bg: 'rgba(54,207,201,0.14)' },
  zip: { color: '#FAAD14', lab: 'ZIP',  bg: 'rgba(250,173,20,0.14)' },
  xls: { color: '#52C41A', lab: 'XLS',  bg: 'rgba(82,196,26,0.14)' },
};

function ftFmtSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
  if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB';
  return (bytes / 1024 / 1024 / 1024).toFixed(2) + ' GB';
}

function FilePill({ type }) {
  const m = FT_TYPE_META[type] || { color: 'var(--fg-muted)', lab: type.toUpperCase(), bg: 'var(--bg-elev-2)' };
  return (
    <div style={{
      width: 40, height: 48, borderRadius: 6, background: m.bg, color: m.color,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 10, fontWeight: 700, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
      border: `1px solid ${m.color}33`, flexShrink: 0,
    }}>{m.lab}</div>
  );
}

function FilesTab({ projectName }) {
  const [folder, setFolder] = useFTState('all');
  const [view, setView] = useFTState('list');
  const [query, setQuery] = useFTState('');
  const [files, setFiles] = useFTState(FT_SEED);
  const [drag, setDrag] = useFTState(false);
  const [toast, setToast] = useFTState(null);
  const [preview, setPreview] = useFTState(null);
  const inputRef = useFTRef();
  const [gSettings] = _useGS();
  const [saveToDrive, setSaveToDrive] = useFTState(false);
  const [driveFolderLink, setDriveFolderLink] = useFTState(null);
  const [creatingFolder,  setCreatingFolder]  = useFTState(false);

  // Auto-resume folder creation after Google re-auth redirect
  useFTEffect(() => {
    const PENDING_KEY = 'inbrivvo_pending_drive';
    let pending = null;
    try { pending = JSON.parse(localStorage.getItem(PENDING_KEY) || 'null'); } catch {}
    if (pending && pending.projectName === (projectName || 'Projeto') && (Date.now() - pending.ts < 5 * 60 * 1000)) {
      localStorage.removeItem(PENDING_KEY);
      // Wait a tick so auth session is fully hydrated
      setTimeout(() => handleCreateDriveFolder(), 1200);
    }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  async function handleCreateDriveFolder() {
    let token = null;
    try { const { data } = await window.sb.auth.getSession(); token = data?.session?.provider_token || null; } catch {}
    if (!token) { window.__toast?.('Conecte sua conta Google primeiro nas Configurações', { tone:'danger' }); return; }
    setCreatingFolder(true);
    try {
      const headers = { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };

      // Detect 403 → save pending + trigger re-auth with Drive scope and prompt:consent
      const triggerDriveReauth = () => {
        try { localStorage.setItem('inbrivvo_pending_drive', JSON.stringify({ projectName: projectName || 'Projeto', ts: Date.now() })); } catch {}
        window.__toast?.('Permissão do Google Drive necessária. Você será redirecionada para autorizar — a pasta será criada automaticamente ao voltar.', { tone:'info' });
        setTimeout(() => {
          window.sb.auth.signInWithOAuth({
            provider: 'google',
            options: {
              redirectTo: window.location.href,
              scopes: 'openid email profile https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/calendar',
              queryParams: { access_type: 'offline', prompt: 'consent' },
            },
          }).catch(() => {});
        }, 2200);
      };

      const safeJson = async (r) => {
        if (r.status === 403) { triggerDriveReauth(); return null; }
        if (!r.ok) return null;
        return await r.json();
      };

      const findFolder = async (name, parentId) => {
        const q = parentId
          ? `mimeType='application/vnd.google-apps.folder' and name='${name}' and '${parentId}' in parents and trashed=false`
          : `mimeType='application/vnd.google-apps.folder' and name='${name}' and trashed=false`;
        const r = await fetch(`https://www.googleapis.com/drive/v3/files?q=${encodeURIComponent(q)}&fields=files(id,webViewLink)`, { headers });
        const d = await safeJson(r);
        return d?.files?.[0] || null;
      };
      const mkFolder = async (name, parentId) => {
        const r = await fetch('https://www.googleapis.com/drive/v3/files?fields=id,webViewLink', {
          method: 'POST', headers,
          body: JSON.stringify({ name, mimeType: 'application/vnd.google-apps.folder', parents: parentId ? [parentId] : [] }),
        });
        return await safeJson(r);
      };

      const root = await findFolder('inBrivvo', null) || await mkFolder('inBrivvo', null);
      if (!root?.id) { setCreatingFolder(false); return; } // 403 → re-auth triggered + pending saved

      const proj = await findFolder(projectName || 'Projeto', root.id) || await mkFolder(projectName || 'Projeto', root.id);
      if (!proj?.id) { setCreatingFolder(false); return; }

      const link = proj.webViewLink || `https://drive.google.com/drive/folders/${proj.id}`;
      setDriveFolderLink(link);
      window.__toast?.('Pasta criada no Google Drive!', { tone:'success' });
    } catch(e) {
      window.__toast?.(e.message || 'Erro ao criar pasta no Drive', { tone:'danger' });
    }
    setCreatingFolder(false);
  }

  const filtered = files.filter(f => {
    if (folder !== 'all' && f.folder !== folder) return false;
    if (query && !f.name.toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  });

  const totalSize = files.reduce((s, f) => s + f.size, 0);
  const counts = FT_FOLDERS.reduce((acc, f) => {
    acc[f.id] = f.id === 'all' ? files.length : files.filter(x => x.folder === f.id).length;
    return acc;
  }, {});

  function showToast(msg) {
    setToast(msg);
    setTimeout(() => setToast(null), 2200);
  }

  async function handleUpload(fileList) {
    const target = folder === 'all' ? 'briefing' : folder;
    const incoming = Array.from(fileList).map((f, i) => {
      const ext = f.name.split('.').pop().toLowerCase();
      const t = ['png','jpg','jpeg','gif','webp'].includes(ext) ? 'img'
              : ['pdf'].includes(ext) ? 'pdf'
              : ['fig'].includes(ext) ? 'fig'
              : ['svg'].includes(ext) ? 'svg'
              : ['zip','rar','7z'].includes(ext) ? 'zip'
              : ['xls','xlsx','csv'].includes(ext) ? 'xls'
              : 'pdf';
      return {
        id: 'up' + Date.now() + i, folder: target, name: f.name, type: t,
        size: f.size, ver: 'v1', who: 'Você', when: 'Agora', shared: false, cli: false,
      };
    });
    setFiles(prev => [...incoming, ...prev]);
    showToast(`${incoming.length} arquivo${incoming.length>1?'s':''} adicionado${incoming.length>1?'s':''}`);
    if (saveToDrive && gSettings?.driveEnabled) {
      for (const file of Array.from(fileList)) {
        try {
          const driveFile = window.gdriveUploadProjectFile ? await window.gdriveUploadProjectFile(file, projectName || 'Projeto') : null;
          if (driveFile?.webViewLink) showToast('Enviado ao Google Drive!');
        } catch (e) { console.error('Drive upload error:', e); }
      }
    }
  }

  function downloadOne(f) {
    showToast(`Baixando ${f.name}…`);
  }
  function downloadAll() {
    showToast(`Preparando ${filtered.length} arquivos para download…`);
  }
  function removeOne(id) {
    setFiles(prev => prev.filter(f => f.id !== id));
    showToast('Arquivo removido');
  }
  function toggleShare(id) {
    setFiles(prev => prev.map(f => f.id === id ? { ...f, shared: !f.shared } : f));
  }

  const dropProps = {
    onDragOver: (e) => { e.preventDefault(); setDrag(true); },
    onDragLeave: () => setDrag(false),
    onDrop: (e) => {
      e.preventDefault(); setDrag(false);
      if (e.dataTransfer?.files?.length) handleUpload(e.dataTransfer.files);
    },
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 16 }}>
      {/* Sidebar pastas */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Card padding={12}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', padding: '4px 8px 8px' }}>Pastas</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {FT_FOLDERS.map(f => {
              const active = folder === f.id;
              return (
                <button key={f.id} onClick={()=>setFolder(f.id)} style={{
                  background: active ? 'var(--bg-elev-2)' : 'transparent',
                  border: 'none', textAlign: 'left', cursor: 'pointer',
                  padding: '8px 10px', borderRadius: 6, display: 'flex',
                  alignItems: 'center', gap: 10, color: active ? 'var(--fg-primary)' : 'var(--fg-secondary)',
                  fontSize: 13, fontWeight: active ? 600 : 500,
                }}>
                  <Icon d={ICONS[f.icon] || ICONS.folder} size={14} />
                  <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.lab}</span>
                  <span style={{
                    fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-muted)',
                    background: 'var(--bg-elev-1)', padding: '1px 6px', borderRadius: 4,
                  }}>{counts[f.id]}</span>
                </button>
              );
            })}
          </div>
        </Card>

        <Card padding={16}>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Armazenamento</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--fg-primary)' }}>{ftFmtSize(totalSize)}</span>
            <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>/ 5 GB</span>
          </div>
          <div style={{ height: 6, background: 'var(--bg-elev-1)', borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ width: `${Math.min(100, totalSize / (5 * 1024 * 1024 * 1024) * 100)}%`, height: '100%', background: 'linear-gradient(90deg,#1D39C4,#36CFC9)' }} />
          </div>
          <div style={{ marginTop: 8, fontSize: 11, color: 'var(--fg-muted)' }}>{files.length} arquivos neste projeto</div>
        </Card>
      </div>

      {/* Main */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Toolbar */}
        <Card padding={12}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              background: 'var(--bg-elev-1)', border: '1px solid var(--border-subtle)',
              borderRadius: 8, padding: '7px 12px', flex: 1, minWidth: 220,
            }}>
              <Icon d={ICONS.search} size={14} />
              <input
                value={query} onChange={(e)=>setQuery(e.target.value)}
                placeholder="Buscar arquivos…"
                style={{
                  flex: 1, background: 'transparent', border: 'none', outline: 'none',
                  color: 'var(--fg-primary)', fontSize: 13, fontFamily: 'inherit',
                }}
              />
            </div>
            <div style={{ display: 'flex', background: 'var(--bg-elev-1)', borderRadius: 8, padding: 3, border: '1px solid var(--border-subtle)' }}>
              {[['list','list'],['grid','grid']].map(([id, ic]) => (
                <button key={id} onClick={()=>setView(id)} style={{
                  background: view===id ? 'var(--bg-elev-2)' : 'transparent',
                  border: 'none', padding: '5px 10px', borderRadius: 6, cursor: 'pointer',
                  color: view===id ? 'var(--fg-primary)' : 'var(--fg-muted)',
                  display: 'flex', alignItems: 'center',
                }}>
                  <Icon d={ICONS[ic] || ICONS.list} size={14} />
                </button>
              ))}
            </div>
            <Button variant="ghost" size="sm" icon="download" onClick={downloadAll} disabled={!filtered.length}>Baixar tudo</Button>
            <Button variant="primary" size="sm" icon="upload" onClick={()=>inputRef.current?.click()}>Enviar arquivo</Button>
            {gSettings?.driveEnabled && !driveFolderLink && (
              <button onClick={handleCreateDriveFolder} disabled={creatingFolder} style={{ display:'flex', alignItems:'center', gap:6, padding:'5px 10px', borderRadius:6, border:'1px solid rgba(15,157,88,0.4)', background:'rgba(15,157,88,0.08)', color:'#0f9d58', fontSize:12, fontWeight:600, cursor: creatingFolder ? 'default' : 'pointer', opacity: creatingFolder ? 0.7 : 1, fontFamily:'inherit', flexShrink:0 }}>
                🗂 {creatingFolder ? 'Criando…' : 'Criar pasta Drive'}
              </button>
            )}
            {driveFolderLink && (
              <a href={driveFolderLink} target="_blank" rel="noreferrer" style={{ display:'flex', alignItems:'center', gap:6, padding:'5px 10px', borderRadius:6, border:'1px solid rgba(15,157,88,0.4)', background:'rgba(15,157,88,0.08)', color:'#0f9d58', fontSize:12, fontWeight:600, textDecoration:'none', flexShrink:0 }}>
                🗂 Abrir no Drive ↗
              </a>
            )}
            {gSettings?.driveEnabled && (
              <label style={{ display:'flex', alignItems:'center', gap:6, cursor:'pointer', fontSize:12, color:'var(--fg-secondary)', flexShrink:0, padding:'5px 10px', borderRadius:6, border:'1px solid var(--border-subtle)', background: saveToDrive ? 'rgba(26,115,232,0.1)' : 'transparent', userSelect:'none' }}>
                <input type="checkbox" checked={saveToDrive} onChange={e => setSaveToDrive(e.target.checked)} style={{ accentColor:'#1a73e8', cursor:'pointer' }}/>
                Drive
              </label>
            )}
            <input ref={inputRef} type="file" multiple style={{ display: 'none' }}
              onChange={(e)=>{ if(e.target.files?.length) handleUpload(e.target.files); e.target.value=''; }}/>
          </div>
        </Card>

        {/* Dropzone */}
        <div {...dropProps} style={{
          border: `1.5px dashed ${drag ? 'var(--accent-primary)' : 'var(--border-subtle)'}`,
          background: drag ? 'rgba(29,57,196,0.08)' : 'var(--bg-elev-0)',
          borderRadius: 10, padding: 18, display: 'flex',
          alignItems: 'center', justifyContent: 'center', gap: 14,
          color: 'var(--fg-muted)', fontSize: 13, transition: 'all 0.15s',
          cursor: 'pointer',
        }} onClick={()=>inputRef.current?.click()}>
          <div style={{
            width: 32, height: 32, borderRadius: 8, background: 'var(--bg-elev-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: drag ? 'var(--accent-primary)' : 'var(--fg-secondary)',
          }}>
            <Icon d={ICONS.upload} size={16} />
          </div>
          <div>
            <div style={{ color: 'var(--fg-primary)', fontWeight: 500, fontSize: 13 }}>
              {drag ? 'Solte para enviar' : 'Arraste arquivos para cá'} <span style={{ color: 'var(--fg-muted)', fontWeight: 400 }}> ou clique para selecionar</span>
            </div>
            <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>PDF, FIG, PNG, ZIP, DOC · até 250 MB por arquivo</div>
          </div>
        </div>

        {/* Lista / Grid */}
        {filtered.length === 0 ? (
          <Card padding={48}>
            <div style={{ textAlign: 'center', color: 'var(--fg-muted)' }}>
              <div style={{ fontSize: 14, color: 'var(--fg-secondary)', marginBottom: 4 }}>Nenhum arquivo encontrado</div>
              <div style={{ fontSize: 12 }}>Tente outra busca ou envie o primeiro arquivo desta pasta.</div>
            </div>
          </Card>
        ) : view === 'list' ? (
          <Card padding={0}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 80px 130px 140px 90px',
              padding: '10px 16px', borderBottom: '1px solid var(--border-subtle)',
              fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)',
              textTransform: 'uppercase', letterSpacing: '0.06em',
            }}>
              <div>Arquivo</div>
              <div>Versão</div>
              <div>Modificado</div>
              <div>Tamanho</div>
              <div style={{ textAlign: 'right' }}>Ações</div>
            </div>
            {filtered.map(f => (
              <div key={f.id} onClick={()=>setPreview(f)} style={{
                display: 'grid', gridTemplateColumns: '1fr 80px 130px 140px 90px',
                padding: '12px 16px', borderBottom: '1px solid var(--border-subtle)',
                alignItems: 'center', fontSize: 13, cursor: 'pointer',
                transition: 'background 0.12s',
              }}
              onMouseEnter={(e)=>e.currentTarget.style.background='var(--bg-elev-1)'}
              onMouseLeave={(e)=>e.currentTarget.style.background='transparent'}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
                  <FilePill type={f.type} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ color: 'var(--fg-primary)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-muted)', display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                      <span>{f.who}</span>
                      {f.shared && <><span>·</span><span style={{ color: '#36CFC9' }}>{f.cli ? 'Compartilhado com cliente' : 'Compartilhado com equipe'}</span></>}
                    </div>
                  </div>
                </div>
                <div><Badge tone="neutral">{f.ver}</Badge></div>
                <div style={{ color: 'var(--fg-secondary)', fontSize: 12 }}>{f.when}</div>
                <div style={{ color: 'var(--fg-secondary)', fontSize: 12, fontFamily: 'var(--font-mono)' }}>{ftFmtSize(f.size)}</div>
                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 4 }} onClick={(e)=>e.stopPropagation()}>
                  <button onClick={()=>toggleShare(f.id)} title={f.shared ? 'Parar de compartilhar' : 'Compartilhar'} style={{
                    background: 'transparent', border: 'none', cursor: 'pointer', padding: 6,
                    borderRadius: 6, color: f.shared ? '#36CFC9' : 'var(--fg-muted)',
                  }}><Icon d={ICONS.share || ICONS.link} size={14}/></button>
                  <button onClick={()=>downloadOne(f)} title="Baixar" style={{
                    background: 'transparent', border: 'none', cursor: 'pointer', padding: 6,
                    borderRadius: 6, color: 'var(--fg-secondary)',
                  }}><Icon d={ICONS.download} size={14}/></button>
                  <button onClick={()=>removeOne(f.id)} title="Remover" style={{
                    background: 'transparent', border: 'none', cursor: 'pointer', padding: 6,
                    borderRadius: 6, color: 'var(--fg-muted)',
                  }}><Icon d={ICONS.trash || ICONS.x} size={14}/></button>
                </div>
              </div>
            ))}
          </Card>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(200px,1fr))', gap: 14 }}>
            {filtered.map(f => {
              const m = FT_TYPE_META[f.type] || { color: 'var(--fg-muted)', bg: 'var(--bg-elev-2)' };
              return (
                <Card key={f.id} padding={0} onClick={()=>setPreview(f)} style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
                  <div style={{
                    height: 110, background: `linear-gradient(135deg, ${m.bg}, var(--bg-elev-1))`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
                  }}>
                    <div style={{
                      fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700,
                      color: m.color, letterSpacing: '0.06em',
                    }}>{(FT_TYPE_META[f.type]?.lab) || f.type.toUpperCase()}</div>
                    <div style={{ position: 'absolute', top: 8, right: 8 }}><Badge tone="neutral">{f.ver}</Badge></div>
                  </div>
                  <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
                    <div style={{
                      fontSize: 13, fontWeight: 500, color: 'var(--fg-primary)',
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }} title={f.name}>{f.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{f.when} · {ftFmtSize(f.size)}</div>
                    <div style={{ display: 'flex', gap: 6, marginTop: 'auto', paddingTop: 8 }} onClick={(e)=>e.stopPropagation()}>
                      <Button variant="ghost" size="sm" icon="download" onClick={()=>downloadOne(f)}>Baixar</Button>
                      <button onClick={()=>removeOne(f.id)} title="Remover" style={{
                        background: 'transparent', border: '1px solid var(--border-subtle)',
                        cursor: 'pointer', padding: '6px 8px', borderRadius: 6,
                        color: 'var(--fg-muted)', marginLeft: 'auto',
                      }}><Icon d={ICONS.trash || ICONS.x} size={13}/></button>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        )}
      </div>

      {preview && <FilePreview file={preview} onClose={()=>setPreview(null)} onDownload={()=>{ downloadOne(preview); }} onShare={()=>{ toggleShare(preview.id); setPreview({...preview, shared: !preview.shared}); }} />}

      {toast && (
        <div style={{
          position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--bg-elev-3, #2a2d3a)', color: 'var(--fg-primary)',
          padding: '10px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
          boxShadow: '0 8px 24px rgba(0,0,0,0.3)', zIndex: 200,
          display: 'flex', alignItems: 'center', gap: 8,
          border: '1px solid var(--border-subtle)',
        }}>
          <Icon d={ICONS.check} size={14}/>
          {toast}
        </div>
      )}
    </div>
  );
}

window.FilesTab = FilesTab;

// ─── File preview modal ───────────────────────────────────────────────────
function FilePreview({ file, onClose, onDownload, onShare }) {
  const m = FT_TYPE_META[file.type] || { color: 'var(--fg-muted)', bg: 'var(--bg-elev-2)', lab: file.type.toUpperCase() };

  const renderBody = () => {
    if (file.type === 'img' || file.type === 'svg') {
      return (
        <div style={{
          flex: 1, background: 'repeating-conic-gradient(rgba(255,255,255,0.02) 0% 25%, transparent 0% 50%) 50% / 20px 20px, var(--bg-elev-0)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', position: 'relative',
        }}>
          <div style={{
            width: '70%', maxWidth: 520, aspectRatio: '4/3',
            background: `linear-gradient(135deg, ${m.bg}, var(--bg-elev-2))`,
            border: '1px solid var(--border-subtle)', borderRadius: 12,
            display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
            boxShadow: '0 24px 60px rgba(0,0,0,0.4)',
          }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 800,
              color: m.color, letterSpacing: '-0.04em',
              textShadow: '0 4px 24px rgba(0,0,0,0.2)',
            }}>{(file.name.split('.')[0] || 'Imagem').slice(0,8)}</div>
            <div style={{
              position: 'absolute', bottom: 12, left: 12, fontSize: 10,
              fontFamily: 'var(--font-mono)', color: 'var(--fg-muted)',
              background: 'rgba(0,0,0,0.4)', padding: '3px 6px', borderRadius: 4,
            }}>1920 × 1080 · {m.lab}</div>
          </div>
        </div>
      );
    }
    if (file.type === 'pdf') {
      return (
        <div style={{ flex: 1, overflow: 'auto', padding: 32, background: 'var(--bg-elev-0)' }}>
          <div style={{
            maxWidth: 520, margin: '0 auto', background: '#ffffff', color: '#1c1c1f',
            padding: '48px 56px', borderRadius: 4, boxShadow: '0 24px 60px rgba(0,0,0,0.4)',
            fontFamily: 'Georgia, serif', minHeight: 600,
          }}>
            <div style={{ fontSize: 11, color: '#9a9a9a', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 24 }}>{file.ver} · {file.when}</div>
            <h1 style={{ fontSize: 26, fontWeight: 700, margin: '0 0 12px', lineHeight: 1.2 }}>{file.name.replace(/\.[^.]+$/, '')}</h1>
            <div style={{ height: 2, width: 48, background: '#1D39C4', marginBottom: 24 }} />
            <p style={{ fontSize: 13, lineHeight: 1.7, color: '#3a3a3a', margin: '0 0 16px' }}>
              Documento gerado pela equipe inBrivvo · Cliente Astra Cosméticos. Este briefing consolida os principais
              direcionamentos estratégicos, posicionamento de marca e diretrizes visuais que orientam a execução do projeto.
            </p>
            <h2 style={{ fontSize: 15, fontWeight: 700, margin: '24px 0 8px' }}>1. Contexto</h2>
            <p style={{ fontSize: 13, lineHeight: 1.7, color: '#3a3a3a', margin: 0 }}>
              A marca Astra busca rejuvenescer sua identidade mantendo a sofisticação histórica. O público-alvo
              prioritário são consumidoras 25–40 anos do segmento premium acessível.
            </p>
            <h2 style={{ fontSize: 15, fontWeight: 700, margin: '24px 0 8px' }}>2. Objetivos</h2>
            <ul style={{ fontSize: 13, lineHeight: 1.8, color: '#3a3a3a', paddingLeft: 18, margin: 0 }}>
              <li>Modernizar a expressão visual sem romper com o legado.</li>
              <li>Reforçar atributos de naturalidade, ciência e brasilidade.</li>
              <li>Padronizar aplicações em e-commerce e ponto de venda.</li>
            </ul>
          </div>
        </div>
      );
    }
    if (file.type === 'fig') {
      return (
        <div style={{
          flex: 1, background: 'var(--bg-elev-0)', overflow: 'auto', padding: 24,
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
            {[0,1,2,3,4,5].map(i => (
              <div key={i} style={{
                aspectRatio: '4/3', background: `linear-gradient(${135 + i*30}deg, ${m.bg}, var(--bg-elev-2))`,
                borderRadius: 8, border: '1px solid var(--border-subtle)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: m.color, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
              }}>Frame {i+1}</div>
            ))}
          </div>
          <div style={{ marginTop: 14, fontSize: 12, color: 'var(--fg-muted)', textAlign: 'center' }}>
            Pré-visualização de {6} frames · abra no Figma para edição completa
          </div>
        </div>
      );
    }
    if (file.type === 'xls') {
      const cols = ['Categoria','Concorrente','Preço médio','Share'];
      const rows = [
        ['Premium', 'Natura Una', 'R$ 189', '14%'],
        ['Premium', 'Granado',    'R$ 142', '11%'],
        ['Médio',   'Nivea',      'R$  68', '22%'],
        ['Médio',   'Dove',       'R$  54', '18%'],
        ['Popular', 'Avon',       'R$  39', '16%'],
      ];
      return (
        <div style={{ flex: 1, overflow: 'auto', padding: 24, background: 'var(--bg-elev-0)' }}>
          <div style={{ background: 'var(--bg-elev-1)', borderRadius: 8, border: '1px solid var(--border-subtle)', overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', background: 'var(--bg-elev-2)', borderBottom: '1px solid var(--border-subtle)' }}>
              {cols.map(c => <div key={c} style={{ padding: '10px 14px', fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{c}</div>)}
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid var(--border-subtle)' }}>
                {r.map((v, j) => <div key={j} style={{ padding: '12px 14px', fontSize: 13, color: j===0 ? 'var(--fg-muted)' : 'var(--fg-primary)', fontFamily: j>=2 ? 'var(--font-mono)' : 'inherit' }}>{v}</div>)}
              </div>
            ))}
          </div>
        </div>
      );
    }
    if (file.type === 'zip') {
      const inside = [
        { n: 'Logo/', s: '—', i: 'folder' },
        { n: 'Manual de marca.pdf', s: '12.1 MB', i: 'document' },
        { n: 'Aplicações/', s: '—', i: 'folder' },
        { n: 'Fontes/', s: '—', i: 'folder' },
        { n: 'README.txt', s: '4 KB', i: 'document' },
      ];
      return (
        <div style={{ flex: 1, overflow: 'auto', padding: 24, background: 'var(--bg-elev-0)' }}>
          <div style={{ maxWidth: 480, margin: '0 auto', background: 'var(--bg-elev-1)', borderRadius: 10, border: '1px solid var(--border-subtle)', overflow: 'hidden' }}>
            <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-subtle)', fontSize: 12, color: 'var(--fg-muted)' }}>
              Conteúdo do arquivo · {inside.length} itens
            </div>
            {inside.map((it, i) => (
              <div key={i} style={{ padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: i<inside.length-1 ? '1px solid var(--border-subtle)' : 'none' }}>
                <Icon d={ICONS[it.i]} size={14} />
                <span style={{ flex: 1, fontSize: 13, color: 'var(--fg-primary)' }}>{it.n}</span>
                <span style={{ fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>{it.s}</span>
              </div>
            ))}
          </div>
        </div>
      );
    }
    return (
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-muted)', fontSize: 13 }}>
        Pré-visualização não disponível · use Baixar para abrir no app nativo.
      </div>
    );
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(4px)',
      zIndex: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32,
    }}>
      <div onClick={(e)=>e.stopPropagation()} style={{
        width: '100%', maxWidth: 880, height: 'min(720px, 90vh)',
        background: 'var(--bg-elev-1)', border: '1px solid var(--border-subtle)',
        borderRadius: 12, display: 'flex', flexDirection: 'column', overflow: 'hidden',
        boxShadow: '0 32px 80px rgba(0,0,0,0.6)',
      }}>
        <div style={{
          padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <FilePill type={file.type} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.name}</div>
            <div style={{ fontSize: 11, color: 'var(--fg-muted)', display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
              <Badge tone="neutral">{file.ver}</Badge>
              <span>·</span><span>{file.who}</span>
              <span>·</span><span>{file.when}</span>
              <span>·</span><span style={{ fontFamily: 'var(--font-mono)' }}>{ftFmtSize(file.size)}</span>
            </div>
          </div>
          <Button variant="ghost" size="sm" icon="share" onClick={onShare}>{file.shared ? 'Compartilhado' : 'Compartilhar'}</Button>
          <Button variant="primary" size="sm" icon="download" onClick={onDownload}>Baixar</Button>
          <button onClick={onClose} title="Fechar" style={{
            background: 'transparent', border: 'none', cursor: 'pointer', padding: 6,
            borderRadius: 6, color: 'var(--fg-muted)',
          }}><Icon d={ICONS.x} size={16}/></button>
        </div>
        {renderBody()}
      </div>
    </div>
  );
}