/* global React */
const { useState: useStateD, useMemo: useMemoD, useEffect: useEffectD } = React;

const TABS = [
  { id: 'overview', label: 'Overview' },
  { id: 'logs', label: 'Logs' },
  { id: 'jobs', label: 'Recent jobs' },
  { id: 'config', label: 'Config' },
  { id: 'api', label: 'API' },
];

function InstanceDetail({ instance, worker, onClose, onAction, toast }) {
  const [tab, setTab] = useStateD('overview');
  const [logFilter, setLogFilter] = useStateD('all');
  const [logSearch, setLogSearch] = useStateD('');
  const [showStop, setShowStop] = useStateD(false);

  const series = useMemoD(() => window.generateTimeSeries(instance, 60), [instance.id]);
  const histogram = useMemoD(() => window.generateHistogram(instance), [instance.id]);
  const heatmap = useMemoD(() => window.generateHeatmap(instance), [instance.id]);
  const logs = useMemoD(() => window.generateLogs(instance, 250), [instance.id]);
  const jobs = useMemoD(() => window.generateJobs(instance, 25), [instance.id]);

  const latencySeries = series.map(s => s.latency);
  const throughputSeries = series.map(s => s.throughput);
  const queueSeries = series.map(s => s.queue);
  const totalSuccess = series.reduce((s, x) => s + x.success, 0);
  const totalErrors = series.reduce((s, x) => s + x.errors, 0);

  const filteredLogs = logs.filter(l => {
    if (logFilter !== 'all' && l.level !== logFilter) return false;
    if (logSearch && !l.msg.toLowerCase().includes(logSearch.toLowerCase())) return false;
    return true;
  });

  useEffectD(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  const isPaused = instance.status === 'paused' || instance.status === 'stopped';
  const cpUrl = worker.controlPlane;
  const tenantPath = `/tenants/${instance.tenant}`;

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="drawer">
        <div className="drawer-header">
          <window.StatusBadge status={instance.status}/>
          <div className="drawer-title">
            <h2>
              {instance.workerName} <span style={{ opacity: 0.5 }}>·</span> <span className="tenant-tag">{instance.tenant}</span>
            </h2>
            <div className="sub">
              <span>id: {instance.instanceId}</span>
              <span>host: {instance.host}</span>
              <span>uptime: {instance.uptime}</span>
              <span>{worker.version}</span>
              <span>API: {cpUrl}{tenantPath}</span>
            </div>
          </div>
          <div className="drawer-actions">
            <button className="btn" onClick={() => onAction(instance, isPaused ? 'start' : 'pause')}>
              <window.Icon name={isPaused ? 'play' : 'pause'}/> {isPaused ? 'Start' : 'Pausar'}
            </button>
            <button className="btn" onClick={() => onAction(instance, 'restart')}>
              <window.Icon name="restart"/> Restart
            </button>
            <button className="btn danger" onClick={() => setShowStop(true)}>
              <window.Icon name="stop"/> Parar
            </button>
            <button className="icon-btn" onClick={onClose}><window.Icon name="close" size={16}/></button>
          </div>
        </div>

        <div className="drawer-tabs">
          {TABS.map(t => (
            <div key={t.id} className={`drawer-tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
              {t.label}
              {t.id === 'logs' && <span className="count">{logs.length}</span>}
              {t.id === 'jobs' && <span className="count">{jobs.length}</span>}
            </div>
          ))}
        </div>

        <div className="drawer-body">
          {tab === 'overview' && (
            <>
              <div className="detail-stats">
                <div className="detail-stat"><div className="lbl">Pending</div><div className="val">{window.fmtNum(instance.pending)}</div></div>
                <div className="detail-stat"><div className="lbl">Processing</div><div className="val">{instance.processing}<span className="unit">/{instance.concurrency}</span></div></div>
                <div className="detail-stat"><div className="lbl">Avg latency</div><div className="val">{window.fmtMs(instance.avgMs)}</div></div>
                <div className="detail-stat"><div className="lbl">P95 latency</div><div className="val">{window.fmtMs(instance.p95Ms)}</div></div>
                <div className="detail-stat"><div className="lbl">Throughput</div><div className="val">{instance.throughput}<span className="unit">/min</span></div></div>
                <div className="detail-stat"><div className="lbl">Error rate</div><div className="val" style={{ color: instance.errorRate > 5 ? 'var(--destructive)' : 'var(--foreground)' }}>{instance.errorRate}<span className="unit">%</span></div></div>
              </div>

              <div className="charts-grid">
                <div className="chart-card">
                  <div className="chart-header">
                    <span className="chart-title">Tempo médio de processamento</span>
                    <span className="chart-meta">last 60min</span>
                    <div className="chart-legend"><div className="legend-item"><span className="legend-swatch" style={{ background: 'var(--info)' }}></span>latency (ms)</div></div>
                  </div>
                  <window.LineChart series={latencySeries} color="var(--info)" formatY={v => Math.round(v) + 'ms'}/>
                </div>
                <div className="chart-card">
                  <div className="chart-header">
                    <span className="chart-title">Throughput</span>
                    <span className="chart-meta">jobs/min</span>
                    <div className="chart-legend"><div className="legend-item"><span className="legend-swatch" style={{ background: 'var(--success)' }}></span>jobs/min</div></div>
                  </div>
                  <window.LineChart series={throughputSeries} color="var(--success)"/>
                </div>
                <div className="chart-card">
                  <div className="chart-header"><span className="chart-title">Sucesso vs Erros</span><span className="chart-meta">last 60min</span></div>
                  <window.DonutChart data={[
                    { label: 'Completed', value: totalSuccess, color: 'var(--success)' },
                    { label: 'Failed', value: totalErrors, color: 'var(--destructive)' },
                  ]}/>
                </div>
                <div className="chart-card">
                  <div className="chart-header">
                    <span className="chart-title">Queue size</span>
                    <span className="chart-meta">pending jobs</span>
                    <div className="chart-legend"><div className="legend-item"><span className="legend-swatch" style={{ background: 'var(--warning)' }}></span>queue depth</div></div>
                  </div>
                  <window.LineChart series={queueSeries} color="var(--warning)"/>
                </div>
                <div className="chart-card full">
                  <div className="chart-header"><span className="chart-title">Distribuição de duração</span><span className="chart-meta">last 24h</span></div>
                  <window.Histogram data={histogram}/>
                </div>
                <div className="chart-card full">
                  <div className="chart-header"><span className="chart-title">Activity heatmap</span><span className="chart-meta">jobs/hour by weekday</span></div>
                  <window.Heatmap data={heatmap}/>
                </div>
              </div>
            </>
          )}

          {tab === 'logs' && (
            <>
              <div className="logs-toolbar">
                <input className="search-input" placeholder="Filter logs..." value={logSearch} onChange={e => setLogSearch(e.target.value)} style={{ flex: 1 }}/>
                <div className="btn-group">
                  {['all', 'INFO', 'WARN', 'ERROR'].map(l => (
                    <button key={l} className={`btn ${logFilter === l ? 'active' : ''}`} onClick={() => setLogFilter(l)}>{l}</button>
                  ))}
                </div>
                <button className="btn" onClick={() => toast('info', 'Exported ' + filteredLogs.length + ' lines')}><window.Icon name="download"/> Export</button>
              </div>
              <div className="logs-terminal">
                {filteredLogs.length === 0 ? (
                  <div style={{ padding: 20, color: 'var(--muted-foreground)' }}>No matching log lines.</div>
                ) : filteredLogs.map((l, i) => (
                  <div key={i} className="log-line">
                    <span className="ts">{window.fmtTime(l.t)}</span>
                    <span className={`lvl lvl-${l.level}`}>{l.level}</span>
                    <span className="msg">{l.msg}</span>
                  </div>
                ))}
              </div>
            </>
          )}

          {tab === 'jobs' && (
            <div className="jobs-list">
              <div className="jobs-row head">
                <div>Job ID</div><div>Status</div><div className="num">Duration</div><div className="num">Attempts</div><div>Enqueued</div><div className="num">Payload</div>
              </div>
              {jobs.map(j => (
                <div key={j.id} className="jobs-row">
                  <div style={{ color: 'var(--foreground)' }}>{j.id}</div>
                  <div>
                    <span className={`status status-${j.status === 'completed' ? 'running' : j.status === 'failed' ? 'error' : j.status === 'processing' ? 'restarting' : 'idle'}`}>
                      <span className="dot"></span>{j.status}
                    </span>
                  </div>
                  <div className="num muted">{j.duration ? window.fmtMs(j.duration) : '—'}</div>
                  <div className="num muted">{j.attempts}</div>
                  <div className="muted">{window.fmtRelTime(j.enqueuedAt)}</div>
                  <div className="num muted">{(j.payloadSize/1024).toFixed(1)} KB</div>
                </div>
              ))}
            </div>
          )}

          {tab === 'config' && (
            <div className="chart-card" style={{ padding: 20 }}>
              <div className="chart-header" style={{ marginBottom: 14 }}>
                <span className="chart-title">Configuração da instância</span>
                <span className="chart-meta">{instance.id}</span>
              </div>
              <div className="form-row"><label>Concurrency</label><input type="number" defaultValue={instance.concurrency}/></div>
              <div className="form-row"><label>Priority</label>
                <select defaultValue={instance.priority}><option>low</option><option>normal</option><option>high</option><option>critical</option></select>
              </div>
              <div className="form-row"><label>Max retries</label><input type="number" defaultValue="5"/></div>
              <div className="form-row"><label>Timeout (s)</label><input type="number" defaultValue="60"/></div>
              <div className="form-row"><label>Tenant</label><input defaultValue={instance.tenant} readOnly/></div>
              <div style={{ display: 'flex', gap: 8, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
                <button className="btn primary" onClick={() => toast('success', 'PATCH ' + cpUrl + tenantPath + '/config — saved')}>Salvar</button>
                <button className="btn" onClick={() => toast('info', 'Queue cleared (' + instance.pending + ' jobs)')}><window.Icon name="trash"/> Limpar fila</button>
                <button className="btn" onClick={() => toast('info', 'Reprocessing ' + instance.failed24h + ' failed jobs')}><window.Icon name="refresh"/> Reprocessar falhas</button>
              </div>
            </div>
          )}

          {tab === 'api' && (
            <div className="api-contract">
              {[
                { v: 'GET', p: tenantPath + '/status', d: 'Estado detalhado da instância' },
                { v: 'GET', p: tenantPath + '/metrics', d: 'Métricas Prometheus-compatible' },
                { v: 'GET', p: tenantPath + '/jobs', d: 'Jobs recentes (últimos N)' },
                { v: 'GET', p: tenantPath + '/jobs/:id', d: 'Detalhe de um job específico' },
                { v: 'GET', p: tenantPath + '/logs?stream=sse', d: 'Stream de logs em tempo real (SSE)' },
                { v: 'POST', p: tenantPath + '/pause', d: 'Pausar processamento desta instância' },
                { v: 'POST', p: tenantPath + '/resume', d: 'Retomar processamento' },
                { v: 'POST', p: tenantPath + '/restart', d: 'Reiniciar a instância (preserva fila)' },
                { v: 'POST', p: tenantPath + '/stop', d: 'Parar definitivamente (jobs pendentes ficam na fila)' },
                { v: 'POST', p: tenantPath + '/jobs/retry-failed', d: 'Reprocessar todos os jobs falhos' },
                { v: 'POST', p: tenantPath + '/queue/clear', d: 'Limpar fila pendente' },
                { v: 'PATCH', p: tenantPath + '/config', d: 'Atualizar concurrency, priority, retries' },
                { v: 'DELETE', p: tenantPath, d: 'Remover este tenant do worker em runtime' },
              ].map((m, i) => (
                <div key={i} className="api-method">
                  <span className={`verb verb-${m.v}`}>{m.v}</span>
                  <div>
                    <div className="path">{cpUrl}{m.p}</div>
                    <div className="desc">{m.d}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {showStop && (
        <div className="modal-overlay" onClick={() => setShowStop(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-header"><window.Icon name="alert" size={16}/><h3 className="modal-title">Parar instância</h3></div>
            <div className="modal-body">
              Vai chamar <code>POST {cpUrl}{tenantPath}/stop</code>. Há <code>{instance.pending}</code> jobs pendentes que ficarão aguardando.
            </div>
            <div className="modal-footer">
              <button className="btn" onClick={() => setShowStop(false)}>Cancelar</button>
              <button className="btn danger" onClick={() => { onAction(instance, 'stop'); setShowStop(false); }}>
                <window.Icon name="stop"/> Parar instância
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

window.InstanceDetail = InstanceDetail;