import { useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { MOCK_CHAMADO } from '../mock'

const TABS = ['Assist', 'Observables', 'Infra', 'Acções']

export default function ChamadoHub() {
  const { publicId } = useParams()
  const [tab, setTab] = useState('Assist')
  const c = { ...MOCK_CHAMADO, public_id: publicId || MOCK_CHAMADO.public_id }

  return (
    <>
      <p><Link to="/chamados">← Chamados</Link></p>
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
        <h2 style={{ margin: 0 }}>{c.public_id}</h2>
        <div>
          <span className="badge">{c.status}</span>
          {c.max_severity ? <span className="badge badge-sev-high" style={{ marginLeft: '0.35rem' }}>L{c.max_severity}</span> : null}
        </div>
      </div>
      <p style={{ color: 'var(--lb-text-secondary)' }}>{c.domain} · assignee: {c.assignee}</p>

      <div className="hub-grid">
        <div className="card">
          <h3 style={{ marginTop: 0 }}>Timeline de investigação</h3>
          <ul className="timeline">
            {c.timeline.map((ev, i) => (
              <li key={i}>
                <span className={`badge badge-${ev.source === 'wazuh' ? 'wazuh' : ev.source === 'onboard' ? 'onboard' : ''}`}>{ev.source}</span>{' '}
                <strong>{ev.event_type}</strong> — {ev.summary}
                {ev.severity ? ` (L${ev.severity})` : ''}
              </li>
            ))}
          </ul>
        </div>

        <div className="card">
          <div className="tabs">
            {TABS.map((t) => (
              <button key={t} type="button" className={`tab${tab === t ? ' active' : ''}`} onClick={() => setTab(t)}>{t}</button>
            ))}
          </div>
          {tab === 'Assist' && (
            <dl className="kv">
              <dt>Passo wizard</dt><dd>{c.assist.wizard_step_label}</dd>
              <dt>Tempo no passo</dt><dd>{c.assist.time_on_step_sec}s</dd>
              <dt>Último erro</dt><dd>{c.assist.last_error || '—'}</dd>
              <dt>Email planeado</dt><dd>{c.assist.planned_email}</dd>
            </dl>
          )}
          {tab === 'Observables' && (
            <ul className="timeline">
              {c.observables.map((o) => (
                <li key={`${o.tipo}-${o.valor}`}>
                  <code>{o.tipo}</code> = {o.valor} <span className="badge">{o.fonte}</span>
                </li>
              ))}
            </ul>
          )}
          {tab === 'Infra' && <p style={{ fontSize: '0.85rem', color: 'var(--lb-text-secondary)' }}>Scorecard 8/8 — API VM122 (009) em breve</p>}
          {tab === 'Acções' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
              <button type="button" className="btn btn-primary">Assumir</button>
              <button type="button" className="btn">Executar runbook</button>
              <a className="btn" href={c.links.wazuh_deep_link} target="_blank" rel="noreferrer">Investigar no Wazuh</a>
            </div>
          )}
        </div>
      </div>
    </>
  )
}
