// Expanded AI Assistant with 4 tabs
const AIAssistant = () => {
  const [tab, setTab] = React.useState('chat');
  const A = window.REGULA_EXT.assistant;

  const tabs = [
    { id: 'chat', label: 'Chat' },
    { id: 'alerts', label: 'Alert Center', count: A.alerts.length },
    { id: 'insights', label: 'Insight Feed', count: A.insights.length },
    { id: 'actions', label: 'Action Proposals', count: A.actions.length }
  ];

  return (
    <div className="chat-full" style={{ height: '100%' }}>
      <div className="topbar">
        <div className="breadcrumb">
          <span>Regula</span><span className="sep">/</span><span className="current">AI Assistant</span>
        </div>
        <div className="topbar-spacer" />
        <button className="btn"><Icon name="settings" size={12} /> Configura soglie</button>
      </div>

      <div className="tabs" style={{ marginTop: 0, padding: '0 24px' }}>
        {tabs.map(t => (
          <div key={t.id} className={`tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
            {t.label}
            {t.count != null && <span className="tab-count">{t.count}</span>}
          </div>
        ))}
      </div>

      {tab === 'chat' && <ChatFullPage embedded />}

      {tab === 'alerts' && (
        <div className="chat-full-body" style={{ padding: '28px 48px' }}>
          <div style={{ maxWidth: 900, margin: '0 auto' }}>
            <div style={{ display: 'flex', gap: 6, marginBottom: 16 }}>
              <span className="chip red">● 2 Critici</span>
              <span className="chip amber">● 2 Avvisi</span>
              <span className="chip">● 1 Info</span>
              <div style={{ flex: 1 }} />
              <button className="btn"><Icon name="plus" size={12} /> Nuova soglia</button>
            </div>
            <div className="panel">
              {A.alerts.map((a, i) => (
                <div key={i} style={{ padding: '14px 18px', borderBottom: i < A.alerts.length - 1 ? '1px solid var(--border)' : 'none', display: 'flex', gap: 14 }}>
                  <span className={`alert-severity sev-${a.severity}`} style={{ flex: 'none', height: 'fit-content' }}>
                    {a.severity === 'critical' ? 'Critico' : a.severity === 'warning' ? 'Avviso' : 'Info'}
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{a.title}</div>
                      <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)' }}>{a.created}</span>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 4 }}>{a.detail}</div>
                    <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                      <span className="chip">{a.company}</span>
                      <button className="btn" style={{ padding: '2px 8px', fontSize: 11 }}>Apri società</button>
                      <button className="btn" style={{ padding: '2px 8px', fontSize: 11 }}>Delega al CFO</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'insights' && (
        <div className="chat-full-body" style={{ padding: '28px 48px' }}>
          <div style={{ maxWidth: 780, margin: '0 auto' }}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Insight proattivi di Regula</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>Suggerimenti generati analizzando pattern, rischi e opportunità sui dati di gruppo.</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {A.insights.map((ins, i) => (
                <div key={i} className="panel" style={{ padding: 16 }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'var(--f-mono)', fontSize: 13, fontWeight: 600, flex: 'none' }}>R</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 4 }}>
                        <span className="chip accent">{ins.kind}</span>
                        <span style={{ fontSize: 13, fontWeight: 600 }}>{ins.title}</span>
                        <span style={{ flex: 1 }} />
                        <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)' }}>{ins.ts}</span>
                      </div>
                      <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>{ins.text}</div>
                      <div style={{ marginTop: 10, display: 'flex', gap: 6 }}>
                        <button className="btn" style={{ fontSize: 11 }}><Icon name="check" size={10} /> Utile</button>
                        <button className="btn" style={{ fontSize: 11 }}>Scarta</button>
                        <button className="btn" style={{ fontSize: 11 }}>Approfondisci</button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'actions' && (
        <div className="chat-full-body" style={{ padding: '28px 48px' }}>
          <div style={{ maxWidth: 900, margin: '0 auto' }}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Proposte di azione</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>Azioni concrete che Regula può orchestrare per ottimizzare il patrimonio.</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {A.actions.map(a => (
                <div key={a.id} className="panel" style={{ padding: 16 }}>
                  <div style={{ display: 'flex', gap: 14 }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                        <span className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{a.id}</span>
                        <span style={{ fontSize: 13.5, fontWeight: 600 }}>{a.title}</span>
                      </div>
                      <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginBottom: 6 }}>{a.desc}</div>
                      <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--accent-ink)' }}>{a.impact}</div>
                    </div>
                    <div style={{ flex: 'none', width: 90, textAlign: 'right' }}>
                      <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)' }}>Confidenza</div>
                      <div className="mono" style={{ fontSize: 20, fontWeight: 500 }}>{a.confidence}%</div>
                      <div style={{ height: 3, background: 'var(--surface-2)', borderRadius: 2, marginTop: 4 }}>
                        <div style={{ width: a.confidence + '%', height: 3, background: 'var(--accent)', borderRadius: 2 }} />
                      </div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                    <button className="btn btn-primary"><Icon name="check" size={12} /> Approva</button>
                    <button className="btn"><Icon name="edit" size={12} /> Modifica parametri</button>
                    <button className="btn">Scarta</button>
                    <div style={{ flex: 1 }} />
                    <button className="btn" style={{ fontSize: 11 }}>Vedi simulazione completa</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { AIAssistant });