import React from 'react';
import { 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>
        <div className="table-responsive">
          <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>
        </div>
      </section>
    </>
  );
};