import { redirect } from "next/navigation";
import { isAdminSession, hasPermission, getAllPermissions } from "@/lib/adminAuth";
import { connectDB } from "@/lib/db";
import { Department } from "@/models/Department";
import { Position } from "@/models/Position";
import { Team } from "@/models/Team";
import { Client } from "@/models/Client";
import { TeamActivity } from "@/models/TeamActivity";
import { AdminNavLinks } from "@/components/admin/AdminNavLinks";
import { AdminPageHeader } from "@/components/admin/AdminPageHeader";
import { AdminEmptyState } from "@/components/admin/AdminEmptyState";
import { NewDepartmentForm } from "@/components/admin/NewDepartmentForm";
import { NewPositionForm } from "@/components/admin/NewPositionForm";
import { NewTeamForm } from "@/components/admin/NewTeamForm";
import { DeleteEntityButton } from "@/components/admin/DeleteEntityButton";
import { StaffAssignmentCard } from "@/components/admin/StaffAssignmentCard";
import { PositionRow } from "@/components/admin/PositionRow";
import { RenameField } from "@/components/admin/RenameField";
import { DepartmentColorPicker } from "@/components/admin/DepartmentColorPicker";
import { HourlyWageField } from "@/components/admin/HourlyWageField";
import {
  deleteDepartmentAction,
  deleteTeamAction,
  updateDepartmentNameAction,
  updateDepartmentSalaryAction,
  updateTeamNameAction,
} from "@/lib/actions/team";

export const dynamic = "force-dynamic";

function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
  return (
    <section className="mb-12">
      <h2 className="text-sm font-medium text-[var(--rk-ink)] mb-1">{title}</h2>
      {subtitle && <p className="text-xs text-[var(--rk-ink-muted)] mb-4">{subtitle}</p>}
      {children}
    </section>
  );
}

export default async function AdminTeamPage() {
  if (!(await isAdminSession())) redirect("/de/login?next=%2Fde%2Fadmin%2Forders");
  if (!(await hasPermission("team_management_view"))) redirect("/de/account");
  const permissions = await getAllPermissions();

  await connectDB();
  const recentActivity = await TeamActivity.find({}).sort({ createdAt: -1 }).limit(30).lean();
  const [departments, positions, teams, staff] = await Promise.all([
    Department.find({}).sort({ sortOrder: 1 }).lean(),
    Position.find({}).sort({ sortOrder: 1 }).lean(),
    Team.find({}).sort({ sortOrder: 1 }).lean(),
    Client.find({ role: "staff" }).sort({ name: 1 }).lean(),
  ]);

  const departmentOptions = departments.map((d) => ({ id: String(d._id), name: d.name }));
  const positionOptions = positions.map((p) => ({ id: String(p._id), name: p.name, departmentId: String(p.departmentId) }));
  const teamOptions = teams.map((t) => ({ id: String(t._id), name: t.name }));

  return (
    <main className="px-6 pt-4 pb-24 max-w-5xl mx-auto">
      <AdminNavLinks permissions={permissions} />
      <AdminPageHeader
        title="Team & Rechte"
        subtitle="Abteilungen, Positionen und Teams verwalten. Berechtigungen werden direkt pro Mitarbeiter vergeben."
      />

      <Section title="Abteilungen">
        <NewDepartmentForm />
        <div className="flex flex-col gap-2">
          {departments.map((d) => (
            <div key={String(d._id)} className="flex items-center justify-between bg-[var(--rk-surface)] border border-white/10 rounded-xl px-4 py-2.5">
              <div className="flex items-center gap-3">
                <DepartmentColorPicker id={String(d._id)} color={d.color} />
                <RenameField id={String(d._id)} name={d.name} action={updateDepartmentNameAction} />
              </div>
              <div className="flex items-center gap-3">
                <HourlyWageField id={String(d._id)} value={d.defaultHourlyWage ?? null} fieldName="defaultHourlyWage" action={updateDepartmentSalaryAction} />
                <DeleteEntityButton id={String(d._id)} action={deleteDepartmentAction} confirmMessage={`Abteilung „${d.name}" wirklich löschen?`} />
              </div>
            </div>
          ))}
          {departments.length === 0 && <AdminEmptyState message="Noch keine Abteilungen angelegt." />}
        </div>
      </Section>

      <Section
        title="Positionen"
        subtitle="Gehören jeweils zu einer Abteilung. Berechtigungen werden hier pro Position vergeben und gelten für alle Mitarbeiter mit dieser Position."
      >
        <NewPositionForm departments={departmentOptions} />
        <div className="flex flex-col gap-3">
          {positions.map((p) => {
            const dept = departments.find((d) => String(d._id) === String(p.departmentId));
            return (
              <PositionRow
                key={String(p._id)}
                position={{ id: String(p._id), name: p.name, permissions: p.permissions ?? null, defaultHourlyWage: p.defaultHourlyWage ?? null }}
                departmentName={dept?.name ?? ""}
              />
            );
          })}
          {positions.length === 0 && <AdminEmptyState message="Noch keine Positionen angelegt." />}
        </div>
      </Section>

      <Section title="Teams">
        <NewTeamForm />
        <div className="flex flex-wrap gap-2">
          {teams.map((t) => (
            <div
              key={String(t._id)}
              className="flex items-center gap-2 border rounded-full px-3 py-1.5"
              style={{ borderColor: `${t.color}66` }}
            >
              <RenameField id={String(t._id)} name={t.name} action={updateTeamNameAction} textStyle={{ color: t.color }} />
              <DeleteEntityButton id={String(t._id)} action={deleteTeamAction} confirmMessage={`Team „${t.name}" wirklich löschen?`} />
            </div>
          ))}
          {teams.length === 0 && <AdminEmptyState message="Noch keine Teams angelegt." />}
        </div>
      </Section>

      <Section title="Mitarbeiter" subtitle="Abteilung, Position und Teams pro Mitarbeiter zuordnen.">
        <div className="flex flex-col gap-3">
          {staff.map((c) => (
            <StaffAssignmentCard
              key={String(c._id)}
              client={{
                id: String(c._id),
                name: c.name,
                email: c.email,
                avatarPath: c.avatarPath || "",
                departmentId: c.departmentId ? String(c.departmentId) : "",
                positionId: c.positionId ? String(c.positionId) : "",
                teamIds: (c.teamIds || []).map(String),
              }}
              departments={departmentOptions}
              positions={positionOptions}
              teams={teamOptions}
            />
          ))}
          {staff.length === 0 && <AdminEmptyState message="Noch keine Mitarbeiter." />}
        </div>
        <p className="mt-4 text-xs text-[var(--rk-ink-muted)]">
          Neue Mitarbeiter zuerst als normales Konto registrieren lassen, dann in der{" "}
          <a href="/de/admin/clients" className="underline hover:text-[var(--rk-ink)]">
            Kundenliste
          </a>{" "}
          zu Mitarbeitern befördern.
        </p>
      </Section>

      <Section title="Aktivitätsprotokoll" subtitle="Wer hat wann sensible Team-/Kontenänderungen vorgenommen — Rechte, Mitarbeiterstatus, Kundenkonten.">
        {recentActivity.length === 0 ? (
          <p className="text-xs text-[var(--rk-ink-muted)]">Noch keine protokollierten Änderungen.</p>
        ) : (
          <div className="flex flex-col gap-1.5">
            {recentActivity.map((a) => (
              <div
                key={String(a._id)}
                className="flex items-center justify-between gap-3 text-xs border-b border-white/5 pb-1.5"
              >
                <span className="text-[var(--rk-ink)]">
                  <strong className="font-medium">{a.actorName}</strong> — {a.action}
                  {a.targetLabel && <span className="text-[var(--rk-ink-muted)]"> · {a.targetLabel}</span>}
                </span>
                <span className="text-[var(--rk-ink-muted)] shrink-0">
                  {new Date(a.createdAt).toLocaleString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" })}
                </span>
              </div>
            ))}
          </div>
        )}
      </Section>
    </main>
  );
}