import { useState, useEffect } from 'react';
import { AppLayout } from '../components/AppLayout';
import { fetchObjects } from '../lib/api';
import type { NetObject, ViewKey } from '../types';

export function InventoryView({ onNavigate }: { onNavigate: (v: ViewKey) => void }) {
  const [objects, setObjects] = useState<NetObject[]>([]);

  useEffect(() => {
    fetchObjects().then(setObjects);
  }, []);

  return (
    <AppLayout current="inventory" onNavigate={onNavigate}>
      <header className="header">
        <h1 className="page-title">Inventory</h1>
      </header>
      <div className="card">
        <table className="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Vendor</th>
              <th>Model</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {objects.length === 0 && (
              <tr>
                <td colSpan={5} className="empty">Nessun oggetto</td>
              </tr>
            )}
            {objects.map((o: NetObject) => (
              <tr key={o.id}>
                <td>{o.name}</td>
                <td>{o.type}</td>
                <td>{o.vendor ?? '-'}</td>
                <td>{o.model ?? '-'}</td>
                <td>{o.status ?? '-'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AppLayout>
  );
}