alpenwerk-hr/components/positions/PositionsPageClient.tsx

"use client";

import { Plus, Trash2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { deletePosition } from "@/actions/positions";
import { useToast } from "@/components/ui/Toast";
import { fmtDate, todayIso } from "@/lib/format";
import type { OpenPositionResolved } from "@/lib/positions";
import { CreatePositionModal } from "./CreatePositionModal";

type OpenPositionWithDays = OpenPositionResolved & { daysOpen: number };

type PositionsPageClientProps = {
  openPositions: OpenPositionWithDays[];
  teams: { id: string; org_number: string; name: string; department_id: string }[];
};

export function PositionsPageClient({ openPositions, teams }: PositionsPageClientProps) {
  const { showToast } = useToast();
  const router = useRouter();
  const [createOpen, setCreateOpen] = useState(false);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const today = todayIso();

  async function handleDelete(id: string) {
    setDeletingId(id);
    const result = await deletePosition(id);
    setDeletingId(null);
    if (result.success) {
      showToast("Position gelöscht.");
      router.refresh();
    } else {
      showToast(result.error ?? "Fehler beim Löschen.", "error");
    }
  }

  return (
    <div className="flex flex-col gap-6">
      <div className="rounded border border-border bg-white p-4">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
          <h2 className="text-sm font-bold text-ink">Offene Positionen ({openPositions.length})</h2>
          <button
            type="button"
            onClick={() => setCreateOpen(true)}
            className="flex items-center gap-1.5 rounded bg-brand-500 px-3 py-2 text-sm font-semibold text-white hover:bg-brand-600"
          >
            <Plus className="h-4 w-4" />
            Position ausschreiben
          </button>
        </div>
        {openPositions.length === 0 ? (
          <p className="text-sm text-ink-muted">Derzeit keine offenen Positionen.</p>
        ) : (
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {openPositions.map((p) => {
              const notYetValid = p.valid_from > today;
              return (
                <div key={p.id} className="flex flex-col rounded border border-border p-3">
                  <div className="flex items-start justify-between gap-2">
                    <div className="text-sm font-semibold text-ink">{p.title}</div>
                    <button
                      type="button"
                      onClick={() => handleDelete(p.id)}
                      disabled={deletingId === p.id}
                      aria-label="Position löschen"
                      className="-mr-1 -mt-1 rounded p-2 text-ink-muted hover:text-danger-solid disabled:opacity-50"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </button>
                  </div>
                  <div className="text-xs text-ink-muted">
                    {p.position_number} · {p.orgLabel}
                  </div>
                  <div className="mt-1 text-xs text-ink-muted">seit {p.daysOpen} Tagen offen</div>
                  {notYetValid && <div className="mt-1 text-xs font-semibold text-warning-text">Gültig ab {fmtDate(p.valid_from)}</div>}
                </div>
              );
            })}
          </div>
        )}
      </div>

      <CreatePositionModal open={createOpen} onClose={() => setCreateOpen(false)} teams={teams} />
    </div>
  );
}