alpenwerk-hr/components/employees/tabs/NotizenTab.tsx

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { addEmployeeNote, completeEmployeeNote } from "@/actions/employees";
import { useToast } from "@/components/ui/Toast";
import { NOTE_CATEGORY_STYLES } from "@/lib/colors";
import { fmtDate } from "@/lib/format";
import type { Database, NoteCategory } from "@/lib/supabase/types";

type Note = Database["public"]["Tables"]["employee_notes"]["Row"];

const CATEGORIES: NoteCategory[] = ["Allgemein", "Vertraulich", "Personalgespräch", "Wiedervorlage", "Lob / Anerkennung"];

export function NotizenTab({ employeeId, notes }: { employeeId: string; notes: Note[] }) {
  const { showToast } = useToast();
  const router = useRouter();
  const [category, setCategory] = useState<NoteCategory>("Allgemein");
  const [noteText, setNoteText] = useState("");
  const [dueDate, setDueDate] = useState("");
  const [pending, setPending] = useState(false);
  const [completingId, setCompletingId] = useState<string | null>(null);

  async function handleSubmit() {
    if (!noteText.trim()) {
      showToast("Bitte einen Notiztext eingeben.", "error");
      return;
    }
    setPending(true);
    const result = await addEmployeeNote({
      employee_id: employeeId,
      category,
      note_text: noteText.trim(),
      due_date: dueDate || undefined,
    });
    setPending(false);
    if (result.success) {
      showToast("Notiz hinzugefügt.");
      setNoteText("");
      setDueDate("");
      setCategory("Allgemein");
      router.refresh();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  async function handleComplete(noteId: string) {
    setCompletingId(noteId);
    const result = await completeEmployeeNote({ note_id: noteId, employee_id: employeeId });
    setCompletingId(null);
    if (result.success) {
      showToast("Notiz erledigt.");
      router.refresh();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-start gap-2 rounded bg-info-bg px-4 py-3 text-sm text-info-text">
        🔒 Interne HR-Notizen – nur für die Personalabteilung sichtbar. Jede Notiz wird mit Verfasser:in und Datum protokolliert.
      </div>

      <div className="flex flex-col gap-3 rounded border border-border p-4">
        <h3 className="text-sm font-bold text-ink">Neue Notiz erfassen</h3>
        <div>
          <textarea
            value={noteText}
            onChange={(e) => setNoteText(e.target.value)}
            rows={3}
            placeholder="Notiz zum/zur Mitarbeiter:in … (z. B. Gesprächsinhalt, Vereinbarung, Beobachtung)"
            className="w-full rounded border border-border px-3 py-2 text-sm"
          />
        </div>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <div>
            <label className="mb-1 block text-sm font-semibold text-ink">Kategorie</label>
            <select value={category} onChange={(e) => setCategory(e.target.value as NoteCategory)} className="w-full rounded border border-border px-3 py-2 text-sm">
              {CATEGORIES.map((c) => (
                <option key={c} value={c}>
                  {c}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="mb-1 block text-sm font-semibold text-ink">Wiedervorlage am (optional)</label>
            <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
          </div>
        </div>
        <div className="flex justify-end">
          <button onClick={handleSubmit} disabled={pending} className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50">
            Notiz speichern
          </button>
        </div>
      </div>

      {notes.length === 0 ? (
        <p className="text-sm text-ink-muted">Keine Notizen vorhanden.</p>
      ) : (
        <ul className="flex flex-col divide-y divide-border">
          {notes.map((n) => (
            <li key={n.id} className="py-3">
              <div className="flex flex-wrap items-center gap-2">
                <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${NOTE_CATEGORY_STYLES[n.category]}`}>{n.category}</span>
                <span className="text-sm font-semibold text-ink">{n.author_name}</span>
                <span className="text-xs text-ink-muted">{fmtDate(n.created_at)}</span>
                {n.done ? (
                  <span className="rounded-full bg-success-bg px-2 py-0.5 text-xs font-semibold text-success-text">Erledigt</span>
                ) : (
                  <span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700">Offen</span>
                )}
              </div>
              <p className="mt-1 text-sm text-ink">{n.note_text}</p>
              {n.due_date && !n.done && <p className="mt-1 text-xs text-warning-text">🔔 fällig {fmtDate(n.due_date)}</p>}
              {!n.done && (
                <button
                  type="button"
                  onClick={() => handleComplete(n.id)}
                  disabled={completingId === n.id}
                  className="mt-2 text-xs font-semibold text-success-text hover:underline disabled:opacity-50"
                >
                  ✓ Erledigt
                </button>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}