import { useState, useEffect } from 'react';
import { useAuth } from '../context/AuthContext';

const EMPTY_FORM = {
  erlNummer: '',
  seriennummer: '',
  artikelNr: '',
  bezeichnung: '',
  defekt: '',
  lagerstandortId: '',
  zustaendig: '',
  prio: 'mittel',
  kommentar: '',
};

export default function DefektForm({ onAdd, showToast, lagerstandorte, colleagues }) {
  const { user } = useAuth();
  const ownName = user?.name || user?.email || '';
  const [form, setForm] = useState({ ...EMPTY_FORM, zustaendig: ownName });

  useEffect(() => {
    if (ownName && !form.zustaendig) {
      setForm((f) => ({ ...f, zustaendig: ownName }));
    }
  }, [ownName]);

  function handleChange(e) {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  }

  async function handleSubmit(e) {
    e.preventDefault();

    if (!form.erlNummer.trim() || !form.seriennummer.trim() || !form.zustaendig.trim()) {
      showToast('Bitte ERL, Seriennummer und Zuständig ausfüllen!', '#C62828');
      return;
    }

    try {
      await onAdd({
        erlNummer: form.erlNummer.trim(),
        seriennummer: form.seriennummer.trim(),
        artikelNr: form.artikelNr.trim(),
        bezeichnung: form.bezeichnung.trim(),
        defekt: form.defekt.trim(),
        lagerstandortId: form.lagerstandortId,
        zustaendig: form.zustaendig.trim(),
        prio: form.prio,
        kommentar: form.kommentar.trim(),
      });
      showToast('Asset erfasst: ' + form.erlNummer.trim());
      setForm({ ...EMPTY_FORM, zustaendig: ownName });
    } catch {
      showToast('Fehler beim Speichern!', '#C62828');
    }
  }

  return (
    <div className="form-card">
      <div className="form-header">Defekte Ware erfassen</div>
      <form className="form-body" onSubmit={handleSubmit}>
        <div className="form-group">
          <label>ERL-Nummer (Logistik) *</label>
          <input name="erlNummer" value={form.erlNummer} onChange={handleChange} placeholder="z.B. ERL-00001" />
        </div>
        <div className="form-group">
          <label>Seriennummer *</label>
          <input name="seriennummer" value={form.seriennummer} onChange={handleChange} placeholder="z.B. SN-ABC123456" />
        </div>
        <div className="form-group">
          <label>Artikelnummer</label>
          <input name="artikelNr" value={form.artikelNr} onChange={handleChange} placeholder="z.B. ART-20341" />
        </div>
        <div className="form-group">
          <label>Bezeichnung</label>
          <input name="bezeichnung" value={form.bezeichnung} onChange={handleChange} placeholder="z.B. Hydraulikpumpe XL" />
        </div>
        <div className="form-group">
          <label>Defektbeschreibung</label>
          <textarea name="defekt" value={form.defekt} onChange={handleChange} placeholder="Was genau ist defekt? Wie sieht der Schaden aus?" />
        </div>
        <div className="form-group">
          <label>Lagerstandort</label>
          <select name="lagerstandortId" value={form.lagerstandortId} onChange={handleChange}>
            <option value="">-- Standort wählen --</option>
            {(lagerstandorte || []).map((ls) => (
              <option key={ls.$id} value={ls.$id}>{ls.name}</option>
            ))}
          </select>
        </div>
        <div className="form-group">
          <label>Zuständig *</label>
          <select name="zustaendig" value={form.zustaendig} onChange={handleChange}>
            <option value="">-- Mitarbeiter wählen --</option>
            {(colleagues || []).map((c) => (
              <option key={c.userId} value={c.userName}>
                {c.userName}{c.userName === ownName ? ' (Ich)' : ''}
              </option>
            ))}
          </select>
        </div>
        <div className="form-group">
          <label>Priorität *</label>
          <select name="prio" value={form.prio} onChange={handleChange}>
            <option value="niedrig">Niedrig</option>
            <option value="mittel">Mittel</option>
            <option value="hoch">Hoch</option>
            <option value="kritisch">Kritisch</option>
          </select>
        </div>
        <div className="form-group">
          <label>Kommentar</label>
          <textarea name="kommentar" value={form.kommentar} onChange={handleChange} placeholder="*E-Mail Betreff* Notizen... (Betreff mit * markieren)" />
        </div>
        <button type="submit" className="btn-submit">Ware erfassen</button>
      </form>
    </div>
  );
}