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 { Button } from "@/components/ui/Button";
import { SelectField, TextField, TextareaField } from "@/components/ui/Field";
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>
        <TextareaField
          label="Notiztext"
          rows={3}
          value={noteText}
          onChange={setNoteText}
          placeholder="Notiz zum/zur Mitarbeiter:in … (z. B. Gesprächsinhalt, Vereinbarung, Beobachtung)"
        />
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <SelectField
            label="Kategorie"
            value={category}
            onChange={(v) => setCategory(v as NoteCategory)}
            options={CATEGORIES.map((c) => ({ value: c, label: c }))}
          />
          <TextField label="Wiedervorlage am (optional)" type="date" value={dueDate} onChange={setDueDate} />
        </div>
        <div className="flex justify-end">
          <Button onClick={handleSubmit} pending={pending}>
            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
                  variant="ghost"
                  size="sm"
                  onClick={() => handleComplete(n.id)}
                  pending={completingId === n.id}
                  className="mt-2 !px-0 text-success-text hover:!bg-transparent hover:underline"
                >
                  ✓ Erledigt
                </Button>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}