import { useCollection, useIdentity, exportCSV, exportJSON, useAILookup } from '@deplixo/sdk';
import Dashboard from './components/Dashboard.jsx';
import Companies from './components/Companies.jsx';
import Insights from './components/Insights.jsx';
import Reports from './components/Reports.jsx';

const TABS = [
  { id: 'dashboard', label: 'Dashboard' },
  { id: 'companies', label: 'Imprese' },
  { id: 'insights', label: 'Insight AI' },
  { id: 'reports', label: 'Report' },
];

function App() {
  const { user } = useIdentity();
  const { items: allCompanies, add, update, remove } = useCollection('lumen-companies');
  const [tab, setTab] = useState('dashboard');

  // Per-user private portfolio
  const companies = (allCompanies || []).filter(
    (c) => c.author?.id === user?.id
  );

  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          <div className="brand-logo" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="4" />
              <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
            </svg>
          </div>
          <div>
            <div className="brand-name">lumen</div>
            <div className="brand-tag">dati imprese → informazioni</div>
          </div>
        </div>
        {user && (
          <div className="user-chip" aria-label="Utente attivo">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <circle cx="12" cy="8" r="4" />
              <path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" />
            </svg>
            {user.name}
          </div>
        )}
      </header>

      <nav className="tabs" role="tablist" aria-label="Navigazione principale">
        {TABS.map((t) => (
          <button
            key={t.id}
            className="tab"
            role="tab"
            aria-current={tab === t.id ? 'page' : undefined}
            aria-selected={tab === t.id}
            onClick={() => setTab(t.id)}
            data-testid={`tab-${t.id}`}
          >
            {t.label}
          </button>
        ))}
      </nav>

      <main>
        {tab === 'dashboard' && <Dashboard companies={companies} />}
        {tab === 'companies' && (
          <Companies
            companies={companies}
            onAdd={add}
            onUpdate={update}
            onRemove={remove}
          />
        )}
        {tab === 'insights' && <Insights companies={companies} />}
        {tab === 'reports' && <Reports companies={companies} />}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);