import React from 'react';
import { Package, AlertTriangle } from 'lucide-react';

export const InventoryView: React.FC = () => {
  const parts = [
    { name: 'Buderus Logamax plus GB172-24', category: 'Gas-Brennwertgerät', stock: 4, minStock: 2, status: 'Ausreichend' },
    { name: 'Bosch EasyControl CT200', category: 'Raumthermostat', stock: 1, minStock: 3, status: 'Nachbestellen' },
    { name: 'Honeywell Hauswasserfilter FF06', category: 'Wasserfilter', stock: 0, minStock: 2, status: 'Kritisch' },
    { name: 'Grundfos Magna3 32-120 F', category: 'Heizungsumwälzpumpe', stock: 6, minStock: 3, status: 'Ausreichend' },
    { name: 'Viessmann Vitodens 200-W', category: 'Gas-Brennwertgerät', stock: 2, minStock: 2, status: 'Ausreichend' },
  ];

  return (
    <>
      <header className="header-bar">
        <h1 className="header-title">Lager & Teileverwaltung</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#ef4444', fontWeight: 600, fontSize: '0.9rem' }}>
          <AlertTriangle size={18} /> 2 Bestandswarnungen
        </div>
      </header>

      <section className="content-card">
        <h2 className="card-heading">Ersatzteilbestand & Bestellwarnungen</h2>
        <table className="orders-table">
          <thead>
            <tr>
              <th>Artikelbezeichnung</th>
              <th>Kategorie</th>
              <th>Lagerbestand</th>
              <th>Mindestbestand</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {parts.map((p, idx) => (
              <tr key={idx}>
                <td style={{ fontWeight: 600, color: '#0f172a' }}>{p.name}</td>
                <td style={{ color: '#64748b' }}>{p.category}</td>
                <td style={{ fontWeight: 700, color: p.stock <= p.minStock ? '#ef4444' : '#0f172a' }}>
                  {p.stock} Stk.
                </td>
                <td>{p.minStock} Stk.</td>
                <td>
                  <span className={`badge ${
                    p.status === 'Kritisch' || p.status === 'Nachbestellen'
                      ? 'badge-scheduled'
                      : 'badge-in-progress'
                  }`} style={{
                    backgroundColor: p.status === 'Kritisch' ? '#fef2f2' : p.status === 'Nachbestellen' ? '#fffbeb' : '#dcfce7',
                    color: p.status === 'Kritisch' ? '#991b1b' : p.status === 'Nachbestellen' ? '#b45309' : '#15803d'
                  }}>
                    {p.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </>
  );
};
