// ── Static Deployments Page ─────────────────────────────────────────────

function StaticPage({ user, setUser }) {
  const [deploys, setDeploys] = useState([]);
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);
  const [expandedDeploy, setExpandedDeploy] = useState(null);
  const [deployFiles, setDeployFiles] = useState([]);
  const [filesLoading, setFilesLoading] = useState(false);

  const hascode = !!(user.invite_code);

  const loadDeploys = useCallback(async () => {
    if (!user.invite_code) return;
    setLoading(true);
    try { setDeploys(await api('/api/static/deployments')); }
    catch {}
    finally { setLoading(false); }
  }, [user.invite_code]);

  useEffect(() => { loadDeploys(); }, [loadDeploys]);

  const copyCode = () => {
    if (!user.invite_code) return;
    navigator.clipboard.writeText(user.invite_code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const deleteDeploy = async (id) => {
    if (!confirm('Delete deployment ' + id + '?')) return;
    try {
      await api('/api/static/deployments/' + id, { method: 'DELETE' });
      loadDeploys();
    } catch {}
  };

  const toggleFiles = async (deployId) => {
    if (expandedDeploy === deployId) {
      setExpandedDeploy(null);
      setDeployFiles([]);
      return;
    }
    setExpandedDeploy(deployId);
    setFilesLoading(true);
    try {
      const files = await api(`/api/static/deployments/${deployId}/files`);
      setDeployFiles(files);
    } catch { setDeployFiles([]); }
    finally { setFilesLoading(false); }
  };

  const fmtBytes = (bytes) => {
    if (!bytes) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
  };

  const fmtTime = (t) => t ? t.replace('T', ' ').slice(0, 19) : '-';

  return (
    <>
      <h2>Static Sites</h2>
      <div className="page-sub">Deploy static sites with a single command</div>

      <div className="profile-card" style={{maxWidth:600}}>
        <h3>Your Invite Code</h3>
        <p style={{fontSize:13,color:'var(--text-dim)',marginBottom:12}}>
          Use this code with the vibey CLI to deploy static sites.
        </p>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <code style={{flex:1,background:'var(--bg)',border:'1px solid var(--border)',borderRadius:8,padding:'10px 14px',fontSize:14,fontFamily:'SF Mono,Menlo,Consolas,monospace',color:'var(--text)',letterSpacing:'0.5px'}}>{user.invite_code || 'No code assigned'}</code>
          {hascode && (
            <button className="btn-sm btn-ghost" onClick={copyCode} style={{height:42,whiteSpace:'nowrap'}}>
              {copied ? 'Copied!' : 'Copy'}
            </button>
          )}
        </div>
        {!hascode && (
          <p style={{fontSize:12,color:'var(--text-dim)',marginTop:8}}>Contact an admin to get an invite code assigned.</p>
        )}
      </div>

      {hascode && (
        <div className="profile-card" style={{marginTop:16,maxWidth:'none'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
            <h3 style={{margin:0}}>Your Deployments</h3>
            <button className="btn-sm btn-ghost" onClick={loadDeploys} disabled={loading}>
              {loading ? 'Loading...' : 'Refresh'}
            </button>
          </div>

          {deploys.length === 0 && !loading && (
            <div style={{textAlign:'center',padding:'32px 0',color:'var(--text-dim)'}}>
              <p style={{marginBottom:12}}>No deployments yet</p>
              <div style={{background:'var(--bg)',border:'1px solid var(--border)',borderRadius:8,padding:16,display:'inline-block',textAlign:'left'}}>
                <code style={{fontSize:13,color:'var(--text)'}}>
                  $ vibey deploy ./dist
                </code>
              </div>
            </div>
          )}

          {deploys.length > 0 && (
            <div style={{overflowX:'auto'}}>
              <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
                <thead>
                  <tr style={{borderBottom:'1px solid var(--border)'}}>
                    <th style={{textAlign:'left',padding:'8px 12px',color:'var(--text-dim)',fontWeight:500}}>URL</th>
                    <th style={{textAlign:'left',padding:'8px 12px',color:'var(--text-dim)',fontWeight:500}}>Folder</th>
                    <th style={{textAlign:'right',padding:'8px 12px',color:'var(--text-dim)',fontWeight:500}}>Files</th>
                    <th style={{textAlign:'right',padding:'8px 12px',color:'var(--text-dim)',fontWeight:500}}>Size</th>
                    <th style={{textAlign:'left',padding:'8px 12px',color:'var(--text-dim)',fontWeight:500}}>Updated</th>
                    <th style={{textAlign:'center',padding:'8px 12px',color:'var(--text-dim)',fontWeight:500}}>Status</th>
                    <th style={{textAlign:'center',padding:'8px 12px',color:'var(--text-dim)',fontWeight:500}}>Password</th>
                    <th style={{padding:'8px 12px'}}></th>
                  </tr>
                </thead>
                <tbody>
                  {deploys.map(d => (
                    <React.Fragment key={d.id}>
                      <tr style={{borderBottom: expandedDeploy === d.id ? 'none' : '1px solid var(--border)', cursor:'pointer'}}
                          onClick={() => d.status === 'active' && toggleFiles(d.id)}>
                        <td style={{padding:'10px 12px'}}>
                          <div style={{display:'flex',alignItems:'center',gap:8}}>
                            <span style={{fontSize:10,color:'var(--text-dim)',transition:'transform 0.2s',transform: expandedDeploy === d.id ? 'rotate(90deg)' : 'rotate(0deg)'}}>▶</span>
                            <a href={d.url} target="_blank" rel="noopener" onClick={e => e.stopPropagation()}
                               style={{color:'var(--accent)',textDecoration:'none',fontFamily:'monospace',fontSize:12}}>
                              {d.url}
                            </a>
                          </div>
                        </td>
                        <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:12,color:'var(--text-dim)'}}>{d.folder_name || '—'}</td>
                        <td style={{textAlign:'right',padding:'10px 12px',fontFamily:'monospace',fontSize:12}}>{d.file_count}</td>
                        <td style={{textAlign:'right',padding:'10px 12px',fontFamily:'monospace',fontSize:12}}>{fmtBytes(d.total_size)}</td>
                        <td style={{padding:'10px 12px',fontSize:12,color:'var(--text-dim)'}}>{fmtTime(d.updated_at)}</td>
                        <td style={{textAlign:'center',padding:'10px 12px'}}>
                          <span style={{
                            fontSize:11, padding:'2px 8px', borderRadius:4,
                            background: d.status === 'active' ? 'rgba(52,211,153,0.15)' : 'rgba(248,113,113,0.15)',
                            color: d.status === 'active' ? 'var(--green)' : 'var(--red)',
                          }}>{d.status}</span>
                        </td>
                        <td style={{textAlign:'center',padding:'10px 12px',fontFamily:'monospace',fontSize:12}}>
                          {d.password ? (
                            <span style={{background:'rgba(251,191,36,0.12)',color:'var(--yellow, #fbbf24)',padding:'2px 8px',borderRadius:4,fontSize:11}}>
                              {d.password}
                            </span>
                          ) : (
                            <span style={{color:'var(--text-dim)'}}>—</span>
                          )}
                        </td>
                        <td style={{padding:'10px 12px'}} onClick={e => e.stopPropagation()}>
                          {d.status === 'active' && (
                            <button className="btn-sm btn-danger" onClick={() => deleteDeploy(d.id)}>Delete</button>
                          )}
                        </td>
                      </tr>
                      {expandedDeploy === d.id && (
                        <tr style={{borderBottom:'1px solid var(--border)'}}>
                          <td colSpan="8" style={{padding:'0 12px 12px 30px'}}>
                            {filesLoading ? (
                              <div style={{padding:'12px 0',color:'var(--text-dim)',fontSize:12}}>Loading files...</div>
                            ) : deployFiles.length === 0 ? (
                              <div style={{padding:'12px 0',color:'var(--text-dim)',fontSize:12}}>No files found</div>
                            ) : (
                              <div style={{background:'var(--bg)',border:'1px solid var(--border)',borderRadius:8,padding:'8px 0',maxHeight:300,overflowY:'auto'}}>
                                {deployFiles.map((f,i) => (
                                  <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'4px 14px',fontSize:12,fontFamily:'SF Mono,Menlo,Consolas,monospace',borderBottom: i < deployFiles.length - 1 ? '1px solid var(--border)' : 'none'}}>
                                    <a href={`${d.url}/${f.path}`} target="_blank" rel="noopener"
                                       style={{color:'var(--text)',textDecoration:'none',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>
                                      {f.path}
                                    </a>
                                    <span style={{color:'var(--text-dim)',marginLeft:16,whiteSpace:'nowrap'}}>{fmtBytes(f.size)}</span>
                                  </div>
                                ))}
                              </div>
                            )}
                          </td>
                        </tr>
                      )}
                    </React.Fragment>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      <div className="profile-card" style={{marginTop:16}}>
        <h3>Install vibey CLI</h3>
        <div style={{fontSize:13,color:'var(--text-dim)',lineHeight:1.8}}>
          <p>You need the <strong style={{color:'var(--text)'}}>vibey</strong> CLI to deploy static sites. Pick your platform:</p>
          <div style={{marginTop:12}}>
            <p style={{marginBottom:4,color:'var(--text)',fontWeight:600,fontSize:12,textTransform:'uppercase',letterSpacing:'0.5px'}}>macOS / Linux</p>
            <pre style={{background:'var(--bg)',border:'1px solid var(--border)',borderRadius:8,padding:12,fontSize:12,fontFamily:'SF Mono,Menlo,Consolas,monospace',color:'var(--text)',whiteSpace:'pre-wrap',margin:0,cursor:'pointer',position:'relative'}} onClick={e => { navigator.clipboard.writeText('/bin/bash -c "$(curl -fsSL https://vibey.cloud:3000/tunnel/install.sh)"'); const t = e.currentTarget; t.style.borderColor='var(--accent)'; setTimeout(() => t.style.borderColor='', 1000); }}>{`$ /bin/bash -c "$(curl -fsSL https://vibey.cloud:3000/tunnel/install.sh)"`}</pre>
          </div>
          <div style={{marginTop:12}}>
            <p style={{marginBottom:4,color:'var(--text)',fontWeight:600,fontSize:12,textTransform:'uppercase',letterSpacing:'0.5px'}}>Windows (PowerShell)</p>
            <pre style={{background:'var(--bg)',border:'1px solid var(--border)',borderRadius:8,padding:12,fontSize:12,fontFamily:'SF Mono,Menlo,Consolas,monospace',color:'var(--text)',whiteSpace:'pre-wrap',margin:0,cursor:'pointer',position:'relative'}} onClick={e => { navigator.clipboard.writeText('curl.exe -fsSL https://vibey.cloud:3000/tunnel/install.ps1 | powershell -'); const t = e.currentTarget; t.style.borderColor='var(--accent)'; setTimeout(() => t.style.borderColor='', 1000); }}>{`> curl.exe -fsSL https://vibey.cloud:3000/tunnel/install.ps1 | powershell -`}</pre>
          </div>
          <p style={{marginTop:10,fontSize:12,color:'var(--text-dim)'}}>Click a command to copy. The installer adds <code style={{fontSize:11,background:'var(--surface)',padding:'2px 6px',borderRadius:4}}>vibey</code> to your PATH — no root/admin required.</p>
        </div>
      </div>

      <div className="profile-card" style={{marginTop:16}}>
        <h3>Quick Start</h3>
        <div style={{fontSize:13,color:'var(--text-dim)',lineHeight:1.8}}>
          <p>Deploy any folder of static files (HTML, CSS, JS) with a single command:</p>
          <pre style={{marginTop:8,background:'var(--bg)',border:'1px solid var(--border)',borderRadius:8,padding:16,fontSize:12,fontFamily:'SF Mono,Menlo,Consolas,monospace',color:'var(--text)',whiteSpace:'pre-wrap'}}>
{`# Deploy a folder
$ vibey deploy ./dist

# Deploy with password protection
$ vibey deploy ./dist --pass secret123

# Re-deploy (same URL, updates in-place)
$ vibey deploy ./dist

# List all your deployments
$ vibey deploys

# Delete a deployment
$ vibey teardown <id>`}
          </pre>
          <p style={{marginTop:12}}>A <code style={{fontSize:11,background:'var(--surface)',padding:'2px 6px',borderRadius:4}}>.vibey</code> file is created in your project directory to track the deployment.</p>
        </div>
      </div>

      <div className="profile-card" style={{marginTop:16}}>
        <h3>Limits</h3>
        <div style={{fontSize:13,color:'var(--text-dim)',lineHeight:1.6}}>
          <p style={{marginBottom:10}}>Current limits per account (admin-configurable):</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'6px 24px'}}>
            <div style={{display:'flex',justifyContent:'space-between'}}><span>Deployments</span><strong style={{color:'var(--text)'}}>10</strong></div>
            <div style={{display:'flex',justifyContent:'space-between'}}><span>Per deployment</span><strong style={{color:'var(--text)'}}>100 MB</strong></div>
            <div style={{display:'flex',justifyContent:'space-between'}}><span>Total storage</span><strong style={{color:'var(--text)'}}>500 MB</strong></div>
            <div style={{display:'flex',justifyContent:'space-between'}}><span>Monthly bandwidth</span><strong style={{color:'var(--text)'}}>10 GB</strong></div>
            <div style={{display:'flex',justifyContent:'space-between'}}><span>Max file size</span><strong style={{color:'var(--text)'}}>50 MB</strong></div>
          </div>
          <p style={{marginTop:14,marginBottom:8}}>Rate limits per IP:</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'6px 24px'}}>
            <div style={{display:'flex',justifyContent:'space-between'}}><span>Deploy uploads</span><strong style={{color:'var(--text)'}}>10 / min</strong></div>
            <div style={{display:'flex',justifyContent:'space-between'}}><span>Page requests</span><strong style={{color:'var(--text)'}}>300 / min</strong></div>
          </div>
        </div>
      </div>
    </>
  );
}
