import { ArrowDown, ArrowUp, CheckCircle2, Eye, EyeOff, MoreHorizontal, Pencil, Play, Plus, RotateCcw, Save, Search, SlidersHorizontal, Star, Trash2 } from "lucide-react";
import { FormEvent, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { HelpLink } from "@/components/HelpLink";
import { MultiFilterDropdown, type MultiFilterOption } from "@/components/MultiFilterDropdown";
import { OrganizationSelect } from "@/components/OrganizationSelect";
import { cn } from "@/lib/utils";
import { addFavoriteTicket, createProject, getProjects, hideProject, lookupTicket, unhideProject, updateProject, updateProjectStatus } from "../api";
import { currentMonth, formatMinutes } from "../format";
import { projectHasRecurringBilling } from "../recurring-billings";
import { ticketPattern } from "../timers";
import type { ProjectSummary, ProjectTeamspaceEntry, TicketMeta } from "../types";
import {
  matchesZammadPriorityFilter,
  matchesZammadStateFilter,
  ZammadPriorityBadge,
  zammadPriorityFilterOptions,
  zammadPriorityLabel,
  zammadPrioritySortRank,
  zammadId,
  zammadStateId,
  ZammadStateBadge,
  zammadStateFilterOptions,
  zammadStateLabel,
  zammadStateSortRank
} from "../zammad-meta";

type ProjectsPageProps = {
  onNavigate: (to: string) => void;
  onStartTimer: (ticketNumber: string) => Promise<boolean>;
};

type ProjectForm = {
  ticketNumber: string;
  title: string;
  organizationId: string;
  organizationName: string | null;
  description: string;
  startsOn: string;
  endsOn: string;
  teamspaceEntries: ProjectTeamspaceEntryForm[];
};

type ProjectTeamspaceEntryForm = {
  clientId: string;
  teamspaceProject: string;
  hourBudget: string;
  budgetSyncDisabled: boolean;
  manualConsumption: string;
  isDefault: boolean;
};

type ProjectSortBy = "updated" | "ticket" | "title" | "organization" | "status" | "zammadStatus" | "zammadPriority" | "consumption" | "consumptionPercent" | "remaining" | "budget";
type ProjectSortDirection = "asc" | "desc";
type ProjectGroupBy = "none" | "organization" | "status" | "zammadStatus" | "zammadPriority" | "budgetState" | "teamspace";
type ProjectFilterOption = MultiFilterOption;

type ProjectViewSettings = {
  query: string;
  filterValues: string[];
  organizationValues: string[];
  standardTeamspaceOnly: boolean;
  groupBy: ProjectGroupBy;
  groupDirection: ProjectSortDirection;
  sortBy: ProjectSortBy;
  sortDirection: ProjectSortDirection;
};

const projectViewSettingsKey = "tickettracker.projects.viewSettings";

const defaultProjectViewSettings: ProjectViewSettings = {
  query: "",
  filterValues: ["open"],
  organizationValues: [],
  standardTeamspaceOnly: false,
  groupBy: "none",
  groupDirection: "asc",
  sortBy: "updated",
  sortDirection: "desc"
};

const projectStaticFilterOptions: ProjectFilterOption[] = [
  { value: "open", label: "TT Offen" },
  { value: "closed", label: "TT Geschl." },
  { value: "hidden", label: "Ausgebl." },
  { value: "budgeted", label: "Mit Kontingent" },
  { value: "withoutBudget", label: "Ohne Kontingent" },
  { value: "remaining", label: "Mit Rest" },
  { value: "overBudget", label: "Überzogen" },
  ...zammadStateFilterOptions.filter((option) => option.value !== "all").map((option) => ({ value: `zammadState:${option.value}`, label: `ZA ${option.label}` })),
  ...zammadPriorityFilterOptions.filter((option) => option.value !== "all").map((option) => ({ value: `zammadPriority:${option.value}`, label: `ZA Prio ${option.label}` }))
];

const projectStaticFilterValues = new Set(projectStaticFilterOptions.map((option) => option.value));

const projectSortValues: ProjectSortBy[] = ["updated", "ticket", "title", "organization", "status", "zammadStatus", "zammadPriority", "consumption", "consumptionPercent", "remaining", "budget"];
const projectGroupValues: ProjectGroupBy[] = ["none", "organization", "status", "zammadStatus", "zammadPriority", "budgetState", "teamspace"];

const projectSortOptions: Array<{ value: ProjectSortBy; label: string }> = [
  { value: "updated", label: "Aktualisierung" },
  { value: "ticket", label: "Ticket" },
  { value: "title", label: "Titel" },
  { value: "organization", label: "Organisation" },
  { value: "status", label: "Status" },
  { value: "zammadStatus", label: "ZA Status" },
  { value: "zammadPriority", label: "ZA Prio" },
  { value: "consumption", label: "Verbrauch" },
  { value: "consumptionPercent", label: "Verbrauch %" },
  { value: "remaining", label: "Reststunden" },
  { value: "budget", label: "Kontingent" }
];

const projectGroupOptions: Array<{ value: ProjectGroupBy; label: string }> = [
  { value: "none", label: "Keine Gruppierung" },
  { value: "organization", label: "Organisation" },
  { value: "status", label: "TT-Status" },
  { value: "zammadStatus", label: "Zammad-Status" },
  { value: "zammadPriority", label: "Zammad-Prio" },
  { value: "budgetState", label: "Kontingentstatus" },
  { value: "teamspace", label: "Standard-Teamspace" }
];

function projectEntryId() {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }

  return `entry-${Date.now()}-${Math.random().toString(16).slice(2)}`;
}

function emptyProjectTeamspaceEntry(isDefault = false): ProjectTeamspaceEntryForm {
  return {
    clientId: projectEntryId(),
    teamspaceProject: "",
    hourBudget: "",
    budgetSyncDisabled: false,
    manualConsumption: "",
    isDefault
  };
}

function isKnownProjectFilterValue(value: unknown): value is string {
  if (typeof value !== "string") {
    return false;
  }

  return projectStaticFilterValues.has(value);
}

function normalizedProjectFilterValues(values: unknown, fallback = defaultProjectViewSettings.filterValues) {
  if (!Array.isArray(values)) {
    return fallback;
  }

  return Array.from(new Set(values.filter(isKnownProjectFilterValue)));
}

function legacyProjectBudgetFilter(value: unknown) {
  if (value === "with-budget") {
    return "budgeted";
  }

  if (value === "without-budget") {
    return "withoutBudget";
  }

  if (value === "remaining") {
    return "remaining";
  }

  if (value === "over-budget") {
    return "overBudget";
  }

  return null;
}

function legacyProjectFilters(parsed: Partial<ProjectViewSettings> & Record<string, unknown>) {
  const filters: string[] = [];
  const hasLegacyFilter = ["status", "zammadStatus", "zammadPriority", "organization", "budget"].some((key) => Object.prototype.hasOwnProperty.call(parsed, key));

  if (parsed.status === "open" || parsed.status === "closed" || parsed.status === "hidden") {
    filters.push(parsed.status);
  }

  if (typeof parsed.zammadStatus === "string" && parsed.zammadStatus !== "all" && zammadStateFilterOptions.some((option) => option.value === parsed.zammadStatus)) {
    filters.push(`zammadState:${parsed.zammadStatus}`);
  }

  if (typeof parsed.zammadPriority === "string" && parsed.zammadPriority !== "all" && zammadPriorityFilterOptions.some((option) => option.value === parsed.zammadPriority)) {
    filters.push(`zammadPriority:${parsed.zammadPriority}`);
  }

  const budgetFilter = legacyProjectBudgetFilter(parsed.budget);

  if (budgetFilter) {
    filters.push(budgetFilter);
  }

  if (hasLegacyFilter) {
    return Array.from(new Set(filters));
  }

  return filters.length > 0 ? Array.from(new Set(filters)) : defaultProjectViewSettings.filterValues;
}

function normalizedProjectOrganizationValues(values: unknown) {
  if (!Array.isArray(values)) {
    return [];
  }

  return Array.from(
    new Set(
      values
        .map((value) => {
          if (typeof value !== "string") {
            return "";
          }

          return value.startsWith("organization:") ? value.slice("organization:".length).trim() : value.trim();
        })
        .filter(Boolean)
    )
  );
}

function legacyProjectOrganizationValues(parsed: Partial<ProjectViewSettings> & Record<string, unknown>) {
  if (Array.isArray(parsed.organizationValues)) {
    return normalizedProjectOrganizationValues(parsed.organizationValues);
  }

  if (Array.isArray(parsed.filterValues)) {
    return normalizedProjectOrganizationValues(parsed.filterValues.filter((value) => typeof value === "string" && value.startsWith("organization:")));
  }

  if (typeof parsed.organization === "string" && parsed.organization !== "all") {
    return [parsed.organization];
  }

  return defaultProjectViewSettings.organizationValues;
}

function legacyStandardTeamspaceOnly(parsed: Partial<ProjectViewSettings> & Record<string, unknown>) {
  if (typeof parsed.standardTeamspaceOnly === "boolean") {
    return parsed.standardTeamspaceOnly;
  }

  return Array.isArray(parsed.filterValues) && parsed.filterValues.includes("standardBudgetOnly");
}

function readStoredProjectViewSettings(): ProjectViewSettings {
  if (typeof window === "undefined") {
    return defaultProjectViewSettings;
  }

  try {
    const raw = window.localStorage.getItem(projectViewSettingsKey);

    if (!raw) {
      return defaultProjectViewSettings;
    }

    const parsed = JSON.parse(raw) as Partial<ProjectViewSettings>;
    const filterValues = Array.isArray(parsed.filterValues)
      ? normalizedProjectFilterValues(parsed.filterValues)
      : legacyProjectFilters(parsed as Partial<ProjectViewSettings> & Record<string, unknown>);

    return {
      query: typeof parsed.query === "string" ? parsed.query : defaultProjectViewSettings.query,
      filterValues,
      organizationValues: legacyProjectOrganizationValues(parsed as Partial<ProjectViewSettings> & Record<string, unknown>),
      standardTeamspaceOnly: legacyStandardTeamspaceOnly(parsed as Partial<ProjectViewSettings> & Record<string, unknown>),
      groupBy: projectGroupValues.find((value) => value === parsed.groupBy) ?? defaultProjectViewSettings.groupBy,
      groupDirection: parsed.groupDirection === "desc" ? "desc" : defaultProjectViewSettings.groupDirection,
      sortBy: projectSortValues.find((value) => value === parsed.sortBy) ?? defaultProjectViewSettings.sortBy,
      sortDirection: parsed.sortDirection === "asc" ? "asc" : defaultProjectViewSettings.sortDirection
    };
  } catch {
    return defaultProjectViewSettings;
  }
}

function emptyProjectForm(): ProjectForm {
  return {
    ticketNumber: "",
    title: "",
    organizationId: "",
    organizationName: null,
    description: "",
    startsOn: "",
    endsOn: "",
    teamspaceEntries: [emptyProjectTeamspaceEntry(true)]
  };
}

function combinedProjectDescription(project: ProjectSummary) {
  return [project.description, project.goals].map((part) => part.trim()).filter(Boolean).join("\n\n");
}

function formatHoursInput(minutes?: number | null) {
  if (minutes === null || minutes === undefined) {
    return "";
  }

  return new Intl.NumberFormat("de-DE", { maximumFractionDigits: 2 }).format(minutes / 60);
}

function formatDecimalHours(minutes: number) {
  return `${new Intl.NumberFormat("de-DE", { maximumFractionDigits: 2 }).format(minutes / 60)} h`;
}

function projectTeamspaceEntries(project: ProjectSummary): ProjectTeamspaceEntry[] {
  if (project.teamspace_entries?.length) {
    return project.teamspace_entries;
  }

  return [
    {
      id: `${project.id}-default`,
      teamspace_project: project.teamspace_project,
      is_default: true,
      hour_budget_minutes: project.hour_budget_minutes,
      manual_consumption_minutes: project.manual_consumption_minutes ?? 0,
      teamspace_consumption_minutes: project.teamspace_consumption_minutes ?? 0,
      consumption_minutes: project.consumption_minutes ?? project.teamspace_consumption_minutes ?? 0,
      display_order: 0
    }
  ];
}

function budgetedProjectTeamspaceEntries(project: ProjectSummary) {
  return projectTeamspaceEntries(project).filter((entry) => Number(entry.hour_budget_minutes ?? 0) > 0);
}

function projectEntryConsumption(entry: ProjectTeamspaceEntry) {
  return Number(entry.consumption_minutes ?? 0);
}

function defaultProjectTeamspaceEntry(project: ProjectSummary) {
  const entries = projectTeamspaceEntries(project);

  return entries.find((entry) => entry.is_default) ?? entries[0] ?? null;
}

function projectEntryPercent(entry: ProjectTeamspaceEntry) {
  if (!entry.hour_budget_minutes || entry.hour_budget_minutes <= 0) {
    return null;
  }

  return Math.round((projectEntryConsumption(entry) / entry.hour_budget_minutes) * 100);
}

function projectConsumptionBarClass(percent: number) {
  if (percent >= 100) {
    return "bg-blue-500";
  }

  if (percent >= 90) {
    return "bg-red-500";
  }

  return "bg-emerald-500";
}

function SortDirectionIcon({ direction }: { direction: ProjectSortDirection }) {
  return direction === "asc" ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />;
}

function parseHoursInput(value: string) {
  const trimmed = value.trim();

  if (!trimmed) {
    return null;
  }

  const hours = Number(trimmed.replace(",", "."));

  if (!Number.isFinite(hours) || hours < 0) {
    return undefined;
  }

  return Math.round(hours * 60);
}

function compareText(left: string | null | undefined, right: string | null | undefined) {
  return (left ?? "").localeCompare(right ?? "", "de", { numeric: true, sensitivity: "base" });
}

function projectOrganizationLabel(project: ProjectSummary) {
  return project.organization_name ?? project.customer_name ?? "Keine Organisation";
}

function projectOrganizationKey(project: ProjectSummary) {
  return project.organization_id ? `id:${project.organization_id}` : `name:${projectOrganizationLabel(project)}`;
}

function projectBudget(project: ProjectSummary, standardTeamspaceOnly = false) {
  if (standardTeamspaceOnly) {
    return defaultProjectTeamspaceEntry(project)?.hour_budget_minutes ?? null;
  }

  return project.hour_budget_minutes ?? null;
}

function projectConsumption(project: ProjectSummary, standardTeamspaceOnly = false) {
  if (standardTeamspaceOnly) {
    const defaultEntry = defaultProjectTeamspaceEntry(project);

    return defaultEntry ? projectEntryConsumption(defaultEntry) : 0;
  }

  return Number(project.consumption_minutes ?? 0);
}

function projectRemaining(project: ProjectSummary, standardTeamspaceOnly = false) {
  const budgetMinutes = projectBudget(project, standardTeamspaceOnly);

  if (budgetMinutes === null || budgetMinutes === undefined) {
    return null;
  }

  return budgetMinutes - projectConsumption(project, standardTeamspaceOnly);
}

function projectConsumptionPercent(project: ProjectSummary, standardTeamspaceOnly = false) {
  const budgetMinutes = projectBudget(project, standardTeamspaceOnly);

  if (!budgetMinutes || budgetMinutes <= 0) {
    return null;
  }

  return Math.round((projectConsumption(project, standardTeamspaceOnly) / budgetMinutes) * 100);
}

function projectMatchesQuery(project: ProjectSummary, query: string) {
  const normalized = query.trim().toLocaleLowerCase("de-DE");

  if (!normalized) {
    return true;
  }

  const values = [
    project.ticket_number,
    project.ticket_number.replace(/^Ticket#/i, ""),
    project.title ?? "",
    projectOrganizationLabel(project),
    project.teamspace_project ?? "",
    zammadStateLabel(project.zammad_state_id),
    zammadPriorityLabel(project.zammad_priority_id),
    ...projectTeamspaceEntries(project).map((entry) => entry.teamspace_project ?? ""),
    project.description,
    project.goals
  ];

  return values.some((value) => value.toLocaleLowerCase("de-DE").includes(normalized));
}

function groupedProjectFilterMatch(filters: string[], groupForFilter: (filter: string) => string, matchesFilter: (filter: string) => boolean) {
  if (filters.length === 0) {
    return true;
  }

  const groups = new Map<string, string[]>();

  for (const filter of filters) {
    const group = groupForFilter(filter);
    groups.set(group, [...(groups.get(group) ?? []), filter]);
  }

  return Array.from(groups.values()).every((groupFilters) => groupFilters.some((filter) => matchesFilter(filter)));
}

function projectFilterGroup(filter: string) {
  if (filter === "open" || filter === "closed") {
    return "status";
  }

  if (filter === "hidden") {
    return "visibility";
  }

  if (filter.startsWith("zammadState:")) {
    return "zammadState";
  }

  if (filter.startsWith("zammadPriority:")) {
    return "zammadPriority";
  }

  return "budget";
}

function matchesSingleProjectFilter(project: ProjectSummary, filter: string, standardTeamspaceOnly = false) {
  if (filter === "open") {
    return !project.closed_at;
  }

  if (filter === "closed") {
    return Boolean(project.closed_at);
  }

  if (filter === "hidden") {
    return Boolean(project.hidden_for_user);
  }

  if (filter.startsWith("zammadState:")) {
    return matchesZammadStateFilter(project.zammad_state_id, filter.slice("zammadState:".length) as Parameters<typeof matchesZammadStateFilter>[1]);
  }

  if (filter.startsWith("zammadPriority:")) {
    return matchesZammadPriorityFilter(project.zammad_priority_id, filter.slice("zammadPriority:".length) as Parameters<typeof matchesZammadPriorityFilter>[1]);
  }

  const remaining = projectRemaining(project, standardTeamspaceOnly);
  const budgetMinutes = projectBudget(project, standardTeamspaceOnly) ?? 0;

  if (filter === "budgeted") {
    return budgetMinutes > 0;
  }

  if (filter === "withoutBudget") {
    return budgetMinutes <= 0;
  }

  if (filter === "remaining") {
    return budgetMinutes > 0 && remaining !== null && remaining > 0;
  }

  if (filter === "overBudget") {
    return budgetMinutes > 0 && remaining !== null && remaining < 0;
  }

  return true;
}

function matchesProjectFilters(project: ProjectSummary, filters: string[], organizationValues: string[], standardTeamspaceOnly = false) {
  if (organizationValues.length > 0 && !organizationValues.includes(projectOrganizationKey(project))) {
    return false;
  }

  return groupedProjectFilterMatch(filters, projectFilterGroup, (filter) => matchesSingleProjectFilter(project, filter, standardTeamspaceOnly));
}

function projectShouldLoadClosed(filters: string[]) {
  const statusFilters = filters.filter((filter) => filter === "open" || filter === "closed");

  return statusFilters.length === 0 || statusFilters.includes("closed");
}

function projectShouldLoadHidden(filters: string[]) {
  return filters.includes("hidden");
}

function compareProjects(left: ProjectSummary, right: ProjectSummary, sortBy: ProjectSortBy, direction: ProjectSortDirection, standardTeamspaceOnly = false) {
  const factor = direction === "asc" ? 1 : -1;
  let comparison = 0;

  if (sortBy === "ticket") {
    comparison = compareText(left.ticket_number, right.ticket_number);
  } else if (sortBy === "title") {
    comparison = compareText(left.title || left.ticket_number, right.title || right.ticket_number);
  } else if (sortBy === "organization") {
    comparison = compareText(projectOrganizationLabel(left), projectOrganizationLabel(right));
  } else if (sortBy === "status") {
    comparison = Number(Boolean(left.closed_at)) - Number(Boolean(right.closed_at));
  } else if (sortBy === "zammadStatus") {
    comparison = zammadStateSortRank(left.zammad_state_id) - zammadStateSortRank(right.zammad_state_id);
  } else if (sortBy === "zammadPriority") {
    comparison = zammadPrioritySortRank(left.zammad_priority_id) - zammadPrioritySortRank(right.zammad_priority_id);
  } else if (sortBy === "consumption") {
    comparison = projectConsumption(left, standardTeamspaceOnly) - projectConsumption(right, standardTeamspaceOnly);
  } else if (sortBy === "consumptionPercent") {
    const leftPercent = projectConsumptionPercent(left, standardTeamspaceOnly);
    const rightPercent = projectConsumptionPercent(right, standardTeamspaceOnly);

    if (leftPercent === null || rightPercent === null) {
      return leftPercent === rightPercent ? compareText(left.ticket_number, right.ticket_number) : leftPercent === null ? 1 : -1;
    }

    comparison = leftPercent - rightPercent;
  } else if (sortBy === "remaining") {
    comparison = (projectRemaining(left, standardTeamspaceOnly) ?? Number.POSITIVE_INFINITY) - (projectRemaining(right, standardTeamspaceOnly) ?? Number.POSITIVE_INFINITY);
  } else if (sortBy === "budget") {
    comparison = (projectBudget(left, standardTeamspaceOnly) ?? Number.POSITIVE_INFINITY) - (projectBudget(right, standardTeamspaceOnly) ?? Number.POSITIVE_INFINITY);
  } else {
    comparison = new Date(left.updated_at).getTime() - new Date(right.updated_at).getTime();
  }

  return comparison * factor || compareText(left.ticket_number, right.ticket_number);
}

type ProjectGroupMeta = {
  key: string;
  label: string;
  sortLabel: string;
  rank: number;
};

type ProjectGroup = ProjectGroupMeta & {
  projects: ProjectSummary[];
  consumptionMinutes: number;
  remainingMinutes: number;
};

function projectBudgetStateGroup(project: ProjectSummary, standardTeamspaceOnly: boolean): ProjectGroupMeta {
  const budgetMinutes = projectBudget(project, standardTeamspaceOnly) ?? 0;
  const remaining = projectRemaining(project, standardTeamspaceOnly);

  if (budgetMinutes <= 0) {
    return { key: "budgetState:none", label: "Ohne Kontingent", sortLabel: "Ohne Kontingent", rank: 40 };
  }

  if (remaining !== null && remaining < 0) {
    return { key: "budgetState:over", label: "Überzogen", sortLabel: "Überzogen", rank: 10 };
  }

  if (remaining === 0) {
    return { key: "budgetState:used", label: "Aufgebraucht", sortLabel: "Aufgebraucht", rank: 30 };
  }

  return { key: "budgetState:remaining", label: "Mit Rest", sortLabel: "Mit Rest", rank: 20 };
}

function projectGroupMeta(project: ProjectSummary, groupBy: ProjectGroupBy, standardTeamspaceOnly: boolean): ProjectGroupMeta {
  if (groupBy === "organization") {
    const label = projectOrganizationLabel(project);
    return { key: `organization:${projectOrganizationKey(project)}`, label, sortLabel: label, rank: 0 };
  }

  if (groupBy === "status") {
    return project.closed_at
      ? { key: "status:closed", label: "Geschlossen", sortLabel: "Geschlossen", rank: 20 }
      : { key: "status:open", label: "Offen", sortLabel: "Offen", rank: 10 };
  }

  if (groupBy === "zammadStatus") {
    const id = zammadStateId(project.zammad_state_id);
    const label = id ? zammadStateLabel(id) : "Ohne Zammad-Status";

    return { key: `zammadStatus:${id ?? "none"}`, label, sortLabel: label, rank: zammadStateSortRank(id) };
  }

  if (groupBy === "zammadPriority") {
    const id = zammadId(project.zammad_priority_id);
    const label = id ? zammadPriorityLabel(id) : "Ohne Zammad-Prio";

    return { key: `zammadPriority:${id ?? "none"}`, label, sortLabel: label, rank: zammadPrioritySortRank(id) };
  }

  if (groupBy === "budgetState") {
    return projectBudgetStateGroup(project, standardTeamspaceOnly);
  }

  if (groupBy === "teamspace") {
    const label = defaultProjectTeamspaceEntry(project)?.teamspace_project || "Ohne Teamspace-ID";

    return { key: `teamspace:${label.toLocaleLowerCase("de-DE")}`, label, sortLabel: label, rank: 0 };
  }

  return { key: "all", label: "Alle Projekte", sortLabel: "Alle Projekte", rank: 0 };
}

function groupProjects(projects: ProjectSummary[], groupBy: ProjectGroupBy, groupDirection: ProjectSortDirection, standardTeamspaceOnly: boolean): ProjectGroup[] {
  if (groupBy === "none") {
    return [
      {
        key: "all",
        label: "Alle Projekte",
        sortLabel: "Alle Projekte",
        rank: 0,
        projects,
        consumptionMinutes: projects.reduce((sum, project) => sum + projectConsumption(project, standardTeamspaceOnly), 0),
        remainingMinutes: projects.reduce((sum, project) => sum + Math.max(projectRemaining(project, standardTeamspaceOnly) ?? 0, 0), 0)
      }
    ];
  }

  const factor = groupDirection === "asc" ? 1 : -1;

  const groups = new Map<string, ProjectGroup>();

  for (const project of projects) {
    const meta = projectGroupMeta(project, groupBy, standardTeamspaceOnly);
    const group = groups.get(meta.key);

    if (group) {
      group.projects.push(project);
      group.consumptionMinutes += projectConsumption(project, standardTeamspaceOnly);
      group.remainingMinutes += Math.max(projectRemaining(project, standardTeamspaceOnly) ?? 0, 0);
    } else {
      groups.set(meta.key, {
        ...meta,
        projects: [project],
        consumptionMinutes: projectConsumption(project, standardTeamspaceOnly),
        remainingMinutes: Math.max(projectRemaining(project, standardTeamspaceOnly) ?? 0, 0)
      });
    }
  }

  return Array.from(groups.values()).sort((left, right) => ((left.rank - right.rank) || compareText(left.sortLabel, right.sortLabel)) * factor);
}

function formFromProject(project: ProjectSummary): ProjectForm {
  const entries = projectTeamspaceEntries(project).map((entry, index) => ({
    clientId: entry.id || projectEntryId(),
    teamspaceProject: entry.teamspace_project ?? "",
    hourBudget: formatHoursInput(entry.hour_budget_minutes),
    budgetSyncDisabled: entry.budget_sync_disabled ?? false,
    manualConsumption: formatHoursInput(entry.manual_consumption_minutes),
    isDefault: entry.is_default || index === 0
  }));
  const hasDefault = entries.some((entry) => entry.isDefault);

  return {
    ticketNumber: project.ticket_number,
    title: project.title ?? "",
    organizationId: project.organization_id ?? "",
    organizationName: project.organization_name ?? project.customer_name ?? null,
    description: combinedProjectDescription(project),
    startsOn: project.starts_on ?? "",
    endsOn: project.ends_on ?? "",
    teamspaceEntries: hasDefault ? entries : entries.map((entry, index) => ({ ...entry, isDefault: index === 0 }))
  };
}

type ProjectFormFieldsProps = {
  form: ProjectForm;
  setForm: (form: ProjectForm) => void;
  organizationLocked: boolean;
  lookupStatus: "idle" | "loading" | "found" | "not-found";
  zammadLookupBusy?: boolean;
  saving: boolean;
  submitLabel: string;
  onZammadLookup?: () => void;
  onSubmit: (event: FormEvent) => void;
};

function normalizeProjectTeamspaceEntryForms(entries: ProjectTeamspaceEntryForm[]) {
  const source = entries.length ? entries : [emptyProjectTeamspaceEntry(true)];
  const defaultIndex = Math.max(0, source.findIndex((entry) => entry.isDefault));

  return source.map((entry, index) => ({
    ...entry,
    isDefault: index === defaultIndex
  }));
}

function parseProjectTeamspaceEntryForms(entries: ProjectTeamspaceEntryForm[]) {
  const normalizedEntries = normalizeProjectTeamspaceEntryForms(entries);
  const parsedEntries = normalizedEntries.map((entry) => {
    const hourBudgetMinutes = parseHoursInput(entry.hourBudget);
    const manualConsumptionMinutes = parseHoursInput(entry.manualConsumption);

    if (hourBudgetMinutes === undefined || manualConsumptionMinutes === undefined) {
      return undefined;
    }

    return {
      id: /^\d+$/.test(entry.clientId) ? entry.clientId : null,
      teamspaceProject: entry.teamspaceProject.trim() || null,
      isDefault: entry.isDefault,
      hourBudgetMinutes,
      budgetSyncDisabled: entry.budgetSyncDisabled,
      manualConsumptionMinutes: manualConsumptionMinutes ?? 0
    };
  });

  if (parsedEntries.some((entry) => entry === undefined)) {
    return undefined;
  }

  return parsedEntries as Array<{
    id?: string | null;
    teamspaceProject: string | null;
    isDefault: boolean;
    hourBudgetMinutes: number | null;
    budgetSyncDisabled: boolean;
    manualConsumptionMinutes: number;
  }>;
}

function defaultProjectTeamspacePayload(entries: ReturnType<typeof parseProjectTeamspaceEntryForms>) {
  return entries?.find((entry) => entry.isDefault) ?? entries?.[0] ?? null;
}

function ProjectTeamspaceEntriesFields({
  entries,
  onChange
}: {
  entries: ProjectTeamspaceEntryForm[];
  onChange: (entries: ProjectTeamspaceEntryForm[]) => void;
}) {
  const normalizedEntries = normalizeProjectTeamspaceEntryForms(entries);

  function updateEntry(clientId: string, changes: Partial<ProjectTeamspaceEntryForm>) {
    onChange(normalizeProjectTeamspaceEntryForms(normalizedEntries.map((entry) => (entry.clientId === clientId ? { ...entry, ...changes } : entry))));
  }

  function setDefault(clientId: string) {
    onChange(normalizedEntries.map((entry) => ({ ...entry, isDefault: entry.clientId === clientId })));
  }

  function removeEntry(clientId: string) {
    onChange(normalizeProjectTeamspaceEntryForms(normalizedEntries.filter((entry) => entry.clientId !== clientId)));
  }

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between gap-2">
        <label className="text-sm font-medium">Teamspace-Einträge</label>
        <Button type="button" size="sm" variant="secondary" onClick={() => onChange([...normalizedEntries, emptyProjectTeamspaceEntry(false)])}>
          <Plus className="size-3.5" />
          Eintrag
        </Button>
      </div>
      <div className="space-y-2">
        {normalizedEntries.map((entry, index) => (
          <div key={entry.clientId} className="grid gap-2 rounded-lg border bg-muted/10 p-3 lg:grid-cols-[minmax(180px,1fr)_130px_150px_130px_120px_36px] lg:items-end">
            <div className="space-y-1.5">
              <label className="text-xs font-medium text-muted-foreground" htmlFor={`project-teamspace-${entry.clientId}`}>
                Teamspace-Projekt {entry.isDefault ? "(Standard)" : ""}
              </label>
              <Input
                id={`project-teamspace-${entry.clientId}`}
                value={entry.teamspaceProject}
                onChange={(event) => updateEntry(entry.clientId, { teamspaceProject: event.currentTarget.value })}
              />
            </div>
            <div className="space-y-1.5">
              <label className="text-xs font-medium text-muted-foreground" htmlFor={`project-budget-${entry.clientId}`}>
                Budget h
              </label>
              <Input
                id={`project-budget-${entry.clientId}`}
                inputMode="decimal"
                value={entry.hourBudget}
                onChange={(event) => updateEntry(entry.clientId, { hourBudget: event.currentTarget.value, budgetSyncDisabled: true })}
              />
            </div>
            <label className="flex min-h-9 items-center gap-2 rounded-md border bg-background px-3 text-xs">
              <Checkbox checked={entry.budgetSyncDisabled} onCheckedChange={(checked) => updateEntry(entry.clientId, { budgetSyncDisabled: checked === true })} />
              <span>Budget schützen</span>
            </label>
            <div className="space-y-1.5">
              <label className="text-xs font-medium text-muted-foreground" htmlFor={`project-manual-${entry.clientId}`}>
                Manueller Verbrauch h
              </label>
              <Input
                id={`project-manual-${entry.clientId}`}
                inputMode="decimal"
                value={entry.manualConsumption}
                onChange={(event) => updateEntry(entry.clientId, { manualConsumption: event.currentTarget.value })}
              />
            </div>
            <Button type="button" size="sm" variant={entry.isDefault ? "default" : "secondary"} onClick={() => setDefault(entry.clientId)}>
              {entry.isDefault ? "Standard" : "Als Standard"}
            </Button>
            <Button type="button" size="icon" variant="ghost" disabled={normalizedEntries.length === 1} onClick={() => removeEntry(entry.clientId)}>
              <Trash2 className="size-4 text-destructive" />
              <span className="sr-only">Teamspace-Eintrag {index + 1} löschen</span>
            </Button>
          </div>
        ))}
      </div>
      <p className="text-xs text-muted-foreground">
        Der Standard-Eintrag bekommt die aus Teamspace gebuchten Tageswerte. Manueller Verbrauch zählt nur im Projektverbrauch.
      </p>
    </div>
  );
}

function ProjectFormFields({ form, setForm, organizationLocked, lookupStatus, zammadLookupBusy = false, saving, submitLabel, onZammadLookup, onSubmit }: ProjectFormFieldsProps) {
  return (
    <form className="space-y-4" onSubmit={onSubmit}>
      <div className="grid gap-3 lg:grid-cols-[180px_minmax(240px,1fr)_180px]">
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="project-ticket-number">
            Ticket
          </label>
          <Input
            id="project-ticket-number"
            placeholder="Ticket#123456"
            value={form.ticketNumber}
            onChange={(event) =>
              setForm({
                ...form,
                ticketNumber: event.currentTarget.value,
                organizationId: "",
                organizationName: null
              })
            }
            required
          />
          {form.ticketNumber && !ticketPattern.test(form.ticketNumber.trim()) ? <p className="text-xs text-destructive">Format: Ticket#XXXXXX</p> : null}
          {lookupStatus === "loading" ? <p className="text-xs text-muted-foreground">Suche Ticket...</p> : null}
          {lookupStatus === "found" ? <p className="text-xs text-muted-foreground">Ticket gefunden. Daten werden übernommen.</p> : null}
          {lookupStatus === "not-found" ? (
            <div className="space-y-2">
              <p className="text-xs text-muted-foreground">Neues Ticket. Organisation bitte wählen oder aus Zammad übernehmen.</p>
              {onZammadLookup ? (
                <Button type="button" size="sm" variant="secondary" disabled={zammadLookupBusy} onClick={onZammadLookup}>
                  <Search className="size-3.5" />
                  {zammadLookupBusy ? "Sucht..." : "In Zammad suchen"}
                </Button>
              ) : null}
            </div>
          ) : null}
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="project-title">
            Titel
          </label>
          <Input id="project-title" value={form.title} onChange={(event) => setForm({ ...form, title: event.currentTarget.value })} />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium">Art</label>
          <div className="flex h-9 items-center rounded-lg border bg-muted/30 px-3 text-sm">Consulting</div>
        </div>
      </div>

      <div className="grid gap-3 lg:grid-cols-[minmax(240px,1fr)_320px_320px]">
        <div className="space-y-2">
          <label className="text-sm font-medium">Organisation</label>
          <OrganizationSelect
            value={form.organizationId}
            selectedName={form.organizationName}
            disabled={organizationLocked}
            onChange={(organization) => setForm({ ...form, organizationId: organization.id, organizationName: organization.name })}
            required
          />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="project-starts-on">
            Zeitraum von
          </label>
          <Input id="project-starts-on" type="date" value={form.startsOn} onChange={(event) => setForm({ ...form, startsOn: event.currentTarget.value })} />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium" htmlFor="project-ends-on">
            Zeitraum bis
          </label>
          <Input id="project-ends-on" type="date" value={form.endsOn} onChange={(event) => setForm({ ...form, endsOn: event.currentTarget.value })} />
        </div>
      </div>

      <ProjectTeamspaceEntriesFields entries={form.teamspaceEntries} onChange={(teamspaceEntries) => setForm({ ...form, teamspaceEntries })} />

      <div className="space-y-2">
        <label className="text-sm font-medium" htmlFor="project-description">
          Beschreibung/Ziele
        </label>
        <Textarea id="project-description" className="min-h-28" value={form.description} onChange={(event) => setForm({ ...form, description: event.currentTarget.value })} />
      </div>

      <div className="flex justify-end">
        <Button type="submit" disabled={saving}>
          <Save className="size-4" />
          {saving ? "Speichert..." : submitLabel}
        </Button>
      </div>
    </form>
  );
}

export function ProjectsPage({ onNavigate, onStartTimer }: ProjectsPageProps) {
  const [projects, setProjects] = useState<ProjectSummary[]>([]);
  const [hiddenProjectCount, setHiddenProjectCount] = useState(0);
  const [totalProjectCount, setTotalProjectCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState<ProjectForm>(() => emptyProjectForm());
  const [lookupStatus, setLookupStatus] = useState<"idle" | "loading" | "found" | "not-found">("idle");
  const [lookupResult, setLookupResult] = useState<TicketMeta | null>(null);
  const [zammadLookupBusy, setZammadLookupBusy] = useState(false);
  const [useZammadForCreate, setUseZammadForCreate] = useState(false);
  const [saving, setSaving] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [editingProjectId, setEditingProjectId] = useState<string | null>(null);
  const [editForm, setEditForm] = useState<ProjectForm>(() => emptyProjectForm());
  const [savingProjectId, setSavingProjectId] = useState<string | null>(null);
  const [savingProjectStatusId, setSavingProjectStatusId] = useState<string | null>(null);
  const [viewSettings, setViewSettings] = useState<ProjectViewSettings>(() => readStoredProjectViewSettings());

  async function load() {
    setLoading(true);
    try {
      const result = await getProjects(projectShouldLoadClosed(viewSettings.filterValues), projectShouldLoadHidden(viewSettings.filterValues));
      setProjects(result.projects);
      setHiddenProjectCount(result.hiddenCount ?? 0);
      setTotalProjectCount(result.totalCount ?? result.projects.length);
    } catch (error) {
      toast.error("Projekte konnten nicht geladen werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void load();
  }, [viewSettings.filterValues]);

  useEffect(() => {
    window.localStorage.setItem(projectViewSettingsKey, JSON.stringify(viewSettings));
  }, [viewSettings]);

  useEffect(() => {
    const normalizedTicketNumber = form.ticketNumber.trim();

    if (!ticketPattern.test(normalizedTicketNumber)) {
      setLookupStatus("idle");
      setLookupResult(null);
      setUseZammadForCreate(false);
      return;
    }

    let cancelled = false;
    setLookupStatus("loading");

    const timeout = window.setTimeout(async () => {
      try {
        const result = await lookupTicket(normalizedTicketNumber);

        if (cancelled) {
          return;
        }

        setLookupResult(result.ticket);
        setLookupStatus(result.ticket ? "found" : "not-found");
        setUseZammadForCreate(false);

        if (result.ticket?.organization_id) {
          setForm((current) =>
            current.ticketNumber.trim() === normalizedTicketNumber
              ? {
                ...current,
                title: current.title || result.ticket?.title || "",
                organizationId: result.ticket?.organization_id ?? "",
                organizationName: result.ticket?.organization_name ?? result.ticket?.customer_name ?? null
              }
              : current
          );
        }
      } catch {
        if (!cancelled) {
          setLookupStatus("idle");
          setLookupResult(null);
        }
      }
    }, 250);

    return () => {
      cancelled = true;
      window.clearTimeout(timeout);
    };
  }, [form.ticketNumber]);

  const organizationLocked = Boolean(lookupResult?.organization_id);
  const openProjects = useMemo(() => projects.filter((project) => !project.closed_at), [projects]);
  const closedProjects = useMemo(() => projects.filter((project) => project.closed_at), [projects]);
  const organizationOptions = useMemo(() => {
    const options = new Map<string, string>();

    projects.forEach((project) => {
      options.set(projectOrganizationKey(project), projectOrganizationLabel(project));
    });

    return Array.from(options.entries())
      .map(([value, label]) => ({ value, label }))
      .sort((left, right) => compareText(left.label, right.label));
  }, [projects]);
  const filteredProjects = useMemo(() => {
    return projects
      .filter((project) => {
        if (!projectMatchesQuery(project, viewSettings.query)) {
          return false;
        }

        return matchesProjectFilters(project, viewSettings.filterValues, viewSettings.organizationValues, viewSettings.standardTeamspaceOnly);
      })
      .sort((left, right) => compareProjects(left, right, viewSettings.sortBy, viewSettings.sortDirection, viewSettings.standardTeamspaceOnly));
  }, [projects, viewSettings]);
  const projectConsumptionMinutes = useMemo(
    () => filteredProjects.reduce((sum, project) => sum + projectConsumption(project, viewSettings.standardTeamspaceOnly), 0),
    [filteredProjects, viewSettings.standardTeamspaceOnly]
  );
  const remainingMinutes = useMemo(
    () => filteredProjects.reduce((sum, project) => sum + Math.max(projectRemaining(project, viewSettings.standardTeamspaceOnly) ?? 0, 0), 0),
    [filteredProjects, viewSettings.standardTeamspaceOnly]
  );
  const projectGroups = useMemo(
    () => groupProjects(filteredProjects, viewSettings.groupBy, viewSettings.groupDirection, viewSettings.standardTeamspaceOnly),
    [filteredProjects, viewSettings.groupBy, viewSettings.groupDirection, viewSettings.standardTeamspaceOnly]
  );
  const closedProjectsLoaded = projectShouldLoadClosed(viewSettings.filterValues);
  const activeFilterCount = [
    viewSettings.query.trim() !== "",
    JSON.stringify(viewSettings.filterValues) !== JSON.stringify(defaultProjectViewSettings.filterValues),
    viewSettings.organizationValues.length > 0,
    viewSettings.standardTeamspaceOnly,
    viewSettings.groupBy !== defaultProjectViewSettings.groupBy,
    viewSettings.groupDirection !== defaultProjectViewSettings.groupDirection,
    viewSettings.sortBy !== defaultProjectViewSettings.sortBy,
    viewSettings.sortDirection !== defaultProjectViewSettings.sortDirection
  ].filter(Boolean).length;

  async function lookupProjectTicketInZammad() {
    const ticketNumber = form.ticketNumber.trim();

    if (!ticketPattern.test(ticketNumber)) {
      toast.error("Ticketnummer prüfen", {
        description: "Das Format muss Ticket#XXXXXX sein."
      });
      return;
    }

    setZammadLookupBusy(true);

    try {
      const result = await lookupTicket(ticketNumber, "zammad");

      if (!result.ticket) {
        setLookupStatus("not-found");
        toast.error("Ticket nicht gefunden", {
          description: "Zammad hat zu dieser Ticketnummer keinen Treffer geliefert."
        });
        return;
      }

      if (result.ticket.work_type && result.ticket.work_type !== "consulting") {
        toast.error("Kein Consulting-Ticket", {
          description: "Für Support-Tickets wird kein Projekt angelegt."
        });
        return;
      }

      setLookupResult(result.ticket);
      setLookupStatus("found");
      setUseZammadForCreate(true);
      setForm((current) => {
        const zammadEntries = result.ticket?.project_teamspace_entries ?? [];
        const nextEntries = zammadEntries.length > 0
          ? zammadEntries.map((entry, index) => ({
              clientId: entry.id || projectEntryId(),
              teamspaceProject: entry.teamspace_project ?? "",
              hourBudget: formatHoursInput(entry.hour_budget_minutes),
              budgetSyncDisabled: entry.budget_sync_disabled ?? false,
              manualConsumption: "",
              isDefault: entry.is_default || index === 0
            }))
          : normalizeProjectTeamspaceEntryForms(current.teamspaceEntries).map((entry, index, entries) => {
              const defaultIndex = Math.max(0, entries.findIndex((candidate) => candidate.isDefault));

              return index === defaultIndex
                ? {
                    ...entry,
                    teamspaceProject: entry.teamspaceProject || result.ticket?.project_name || "",
                    hourBudget: entry.hourBudget || formatHoursInput(result.ticket?.project_hour_budget_minutes ?? null),
                    budgetSyncDisabled: entry.hourBudget ? entry.budgetSyncDisabled : false
                  }
                : entry;
            });

        return {
          ...current,
          title: current.title || result.ticket?.title || "",
          organizationId: result.ticket?.organization_id ?? "",
          organizationName: result.ticket?.organization_name ?? result.ticket?.customer_name ?? null,
          teamspaceEntries: nextEntries
        };
      });
      toast.success("Zammad-Daten übernommen");
    } catch (error) {
      toast.error("Zammad-Suche fehlgeschlagen", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setZammadLookupBusy(false);
    }
  }

  function setProjectSort(sortBy: ProjectSortBy) {
    setViewSettings((current) => ({
      ...current,
      sortBy,
      sortDirection: current.sortBy === sortBy ? (current.sortDirection === "asc" ? "desc" : "asc") : current.sortDirection
    }));
  }

  function sortHeader(label: string, sortBy: ProjectSortBy) {
    const active = viewSettings.sortBy === sortBy;

    return (
      <button
        type="button"
        className={cn("inline-flex min-w-0 items-center gap-1 text-left hover:text-foreground", active ? "text-foreground" : undefined)}
        onClick={() => setProjectSort(sortBy)}
      >
        <span className="truncate">{label}</span>
        {active ? <SortDirectionIcon direction={viewSettings.sortDirection} /> : null}
      </button>
    );
  }

  async function submitProject(event: FormEvent) {
    event.preventDefault();

    const ticketNumber = form.ticketNumber.trim();

    if (!ticketPattern.test(ticketNumber)) {
      toast.error("Ticketnummer prüfen", {
        description: "Das Format muss Ticket#XXXXXX sein."
      });
      return;
    }

    if (!form.organizationId) {
      toast.error("Organisation wählen", {
        description: "Wenn das Ticket noch keine Stammdaten hat, muss die Organisation gesetzt werden."
      });
      return;
    }

    const teamspaceEntries = parseProjectTeamspaceEntryForms(form.teamspaceEntries);

    if (!teamspaceEntries) {
      toast.error("Teamspace-Einträge prüfen", {
        description: "Bitte Stunden als Zahl eintragen, z.B. 12,5."
      });
      return;
    }

    const defaultTeamspaceEntry = defaultProjectTeamspacePayload(teamspaceEntries);

    setSaving(true);
    try {
      const result = await createProject({
        ticketNumber,
        title: form.title || null,
        organizationId: form.organizationId,
        zammadLookup: useZammadForCreate,
        teamspaceProject: defaultTeamspaceEntry?.teamspaceProject ?? null,
        teamspaceEntries,
        description: form.description,
        goals: "",
        startsOn: form.startsOn || null,
        endsOn: form.endsOn || null,
        hourBudgetMinutes: defaultTeamspaceEntry?.hourBudgetMinutes ?? null,
        manualConsumptionMinutes: defaultTeamspaceEntry?.manualConsumptionMinutes ?? 0
      });
      toast.success("Projekt angelegt", {
        description: `${result.project.ticket_number} ist jetzt als Consulting-Projekt markiert.`
      });
      setForm(emptyProjectForm());
      setCreateOpen(false);
      setLookupResult(null);
      setLookupStatus("idle");
      setUseZammadForCreate(false);
      await load();
    } catch (error) {
      toast.error("Projekt konnte nicht angelegt werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setSaving(false);
    }
  }

  async function saveProject(project: ProjectSummary) {
    const teamspaceEntries = parseProjectTeamspaceEntryForms(editForm.teamspaceEntries);

    if (!teamspaceEntries) {
      toast.error("Teamspace-Einträge prüfen", {
        description: "Bitte Stunden als Zahl eintragen, z.B. 12,5."
      });
      return;
    }

    const defaultTeamspaceEntry = defaultProjectTeamspacePayload(teamspaceEntries);

    if (!editForm.organizationId) {
      toast.error("Organisation wählen");
      return;
    }

    setSavingProjectId(project.id);
    try {
      await updateProject(project.id, {
        ticketNumber: editForm.ticketNumber,
        title: editForm.title || null,
        organizationId: editForm.organizationId,
        teamspaceProject: defaultTeamspaceEntry?.teamspaceProject ?? null,
        teamspaceEntries,
        description: editForm.description,
        goals: "",
        startsOn: editForm.startsOn || null,
        endsOn: editForm.endsOn || null,
        hourBudgetMinutes: defaultTeamspaceEntry?.hourBudgetMinutes ?? null,
        manualConsumptionMinutes: defaultTeamspaceEntry?.manualConsumptionMinutes ?? 0
      });
      toast.success("Projekt gespeichert");
      setEditingProjectId(null);
      await load();
    } catch (error) {
      toast.error("Projekt konnte nicht gespeichert werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setSavingProjectId(null);
    }
  }

  async function setProjectClosed(project: ProjectSummary, closed: boolean) {
    setSavingProjectStatusId(project.id);
    try {
      await updateProjectStatus(project.id, closed);
      toast.success(closed ? "Projekt geschlossen" : "Projekt wieder geöffnet");
      await load();
    } catch (error) {
      toast.error("Projektstatus konnte nicht gespeichert werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    } finally {
      setSavingProjectStatusId(null);
    }
  }

  async function saveProjectFavorite(project: ProjectSummary) {
    try {
      await addFavoriteTicket(project.ticket_number);
      toast.success("Favorit gespeichert", {
        description: project.ticket_number
      });
    } catch (error) {
      toast.error("Favorit konnte nicht gespeichert werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    }
  }

  async function hideProjectForUser(project: ProjectSummary) {
    try {
      await hideProject(project.id);
      toast.success("Projekt ausgeblendet", {
        description: project.ticket_number
      });
      await load();
    } catch (error) {
      toast.error("Projekt konnte nicht ausgeblendet werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    }
  }

  async function unhideProjectForUser(project: ProjectSummary) {
    try {
      await unhideProject(project.id);
      toast.success("Projekt eingeblendet", {
        description: project.ticket_number
      });
      await load();
    } catch (error) {
      toast.error("Projekt konnte nicht eingeblendet werden", {
        description: error instanceof Error ? error.message : "Unbekannter Fehler"
      });
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h2 className="text-xl font-semibold tracking-normal sm:text-2xl">Projekte</h2>
          <p className="text-sm text-muted-foreground">Consulting-Projekte als Erweiterung bestehender oder neuer Tickets.</p>
        </div>
        <div className="flex min-w-0 items-center justify-end gap-2">
          <div className="flex min-w-0 flex-nowrap gap-2 overflow-x-auto pb-1 text-sm xxl:overflow-visible">
            <div className="w-28 shrink-0 rounded-md border bg-muted/20 px-3 py-2">
              <span className="block text-muted-foreground">Offen</span>
              <span className="font-semibold">{openProjects.length}</span>
            </div>
            <div className="w-28 shrink-0 rounded-md border bg-muted/20 px-3 py-2">
              <span className="block text-muted-foreground">Geschlossen</span>
              <span className="font-semibold">{closedProjectsLoaded ? closedProjects.length : "-"}</span>
            </div>
            <div className="w-32 shrink-0 rounded-md border bg-muted/20 px-3 py-2">
              <span className="block text-muted-foreground">Verbrauch</span>
              <span className="font-semibold">{formatMinutes(projectConsumptionMinutes)}</span>
            </div>
            <div className="w-32 shrink-0 rounded-md border bg-muted/20 px-3 py-2">
              <span className="block text-muted-foreground">Rest offen</span>
              <span className="font-semibold">{formatMinutes(remainingMinutes)}</span>
            </div>
          </div>
          <HelpLink anchor="projekte" label="Hilfe zu Projekten" className="shrink-0" />
        </div>
      </div>

      <Card>
        <CardHeader className="p-4">
          <div className="flex items-start justify-between gap-3">
            <div>
              <CardTitle className="flex items-center gap-2 text-base">
                <SlidersHorizontal className="size-4 text-muted-foreground" />
                Filter und Sortierung
                {activeFilterCount > 0 ? <Badge variant="secondary">{activeFilterCount}</Badge> : null}
              </CardTitle>
              <CardDescription>{filteredProjects.length} von {totalProjectCount} Projekt(en) sichtbar.</CardDescription>
            </div>
            <Button type="button" size="sm" variant="ghost" onClick={() => setViewSettings(defaultProjectViewSettings)}>
              <RotateCcw className="size-4" />
              Zurücksetzen
            </Button>
          </div>
        </CardHeader>
        <CardContent className="grid gap-3 px-4 pb-4 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-8">
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground" htmlFor="project-search">
              Suche
            </label>
            <Input
              id="project-search"
              className="h-8"
              placeholder="Ticket, Titel, Organisation, Teamspace..."
              value={viewSettings.query}
              onChange={(event) => {
                const query = event.currentTarget.value;
                setViewSettings((current) => ({ ...current, query }));
              }}
            />
          </div>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Filter</label>
            <MultiFilterDropdown
              values={viewSettings.filterValues}
              options={projectStaticFilterOptions}
              onChange={(filterValues) => setViewSettings((current) => ({ ...current, filterValues }))}
            />
          </div>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Organisationen</label>
            <MultiFilterDropdown
              values={viewSettings.organizationValues}
              options={organizationOptions}
              onChange={(organizationValues) => setViewSettings((current) => ({ ...current, organizationValues }))}
              placeholder="Alle Org."
              countLabel="Org."
              emptyLabel="Keine Org."
            />
          </div>
          <label className={cn("flex min-w-0 items-center gap-3 rounded-md border px-3 py-2", viewSettings.standardTeamspaceOnly ? "bg-muted/30" : "bg-background")}>
            <Checkbox
              checked={viewSettings.standardTeamspaceOnly}
              onCheckedChange={(checked) => setViewSettings((current) => ({ ...current, standardTeamspaceOnly: checked === true }))}
            />
            <span className="min-w-0">
              <span className="block truncate text-xs font-medium text-muted-foreground">Nur Standard-TS</span>
              <span className="block truncate text-xs">Hauptbalken</span>
            </span>
          </label>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Gruppierung</label>
            <Select value={viewSettings.groupBy} onValueChange={(value) => setViewSettings((current) => ({ ...current, groupBy: value as ProjectGroupBy }))}>
              <SelectTrigger size="sm" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {projectGroupOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Gruppenrichtung</label>
            <div className="grid grid-cols-2 rounded-md border bg-background p-0.5">
              <Button
                type="button"
                size="sm"
                variant={viewSettings.groupDirection === "asc" ? "secondary" : "ghost"}
                className="h-7 px-2"
                onClick={() => setViewSettings((current) => ({ ...current, groupDirection: "asc" }))}
              >
                <ArrowUp className="size-3.5" />
                Auf
              </Button>
              <Button
                type="button"
                size="sm"
                variant={viewSettings.groupDirection === "desc" ? "secondary" : "ghost"}
                className="h-7 px-2"
                onClick={() => setViewSettings((current) => ({ ...current, groupDirection: "desc" }))}
              >
                <ArrowDown className="size-3.5" />
                Ab
              </Button>
            </div>
          </div>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Sortierung</label>
            <Select value={viewSettings.sortBy} onValueChange={(value) => setViewSettings((current) => ({ ...current, sortBy: value as ProjectSortBy }))}>
              <SelectTrigger size="sm" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {projectSortOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Sortierrichtung</label>
            <div className="grid grid-cols-2 rounded-md border bg-background p-0.5">
              <Button
                type="button"
                size="sm"
                variant={viewSettings.sortDirection === "asc" ? "secondary" : "ghost"}
                className="h-7 px-2"
                onClick={() => setViewSettings((current) => ({ ...current, sortDirection: "asc" }))}
              >
                <ArrowUp className="size-3.5" />
                Auf
              </Button>
              <Button
                type="button"
                size="sm"
                variant={viewSettings.sortDirection === "desc" ? "secondary" : "ghost"}
                className="h-7 px-2"
                onClick={() => setViewSettings((current) => ({ ...current, sortDirection: "desc" }))}
              >
                <ArrowDown className="size-3.5" />
                Ab
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
      {hiddenProjectCount > 0 && !projectShouldLoadHidden(viewSettings.filterValues) ? (
        <div className="flex flex-col gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-800 dark:text-amber-200 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex min-w-0 items-center gap-2">
            <EyeOff className="size-4 shrink-0" />
            <span className="min-w-0">
              {hiddenProjectCount} Projekt(e) sind ausgeblendet.
            </span>
          </div>
          <Button
            type="button"
            size="sm"
            variant="secondary"
            className="shrink-0"
            onClick={() => setViewSettings((current) => ({ ...current, filterValues: ["hidden"] }))}
          >
            Anzeigen
          </Button>
        </div>
      ) : null}
      <Card className="overflow-hidden">
        <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
          <div className="min-w-0">
            <h3 className="text-sm font-medium">Projektliste</h3>
            <p className="text-xs text-muted-foreground">{filteredProjects.length} Projekt(e)</p>
          </div>
          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
            <DialogTrigger asChild>
              <Button type="button" className="shrink-0">
                <Plus className="size-4" />
                Projekt
              </Button>
            </DialogTrigger>
            <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-5xl">
              <DialogHeader>
                <DialogTitle>Projekt anlegen</DialogTitle>
                <DialogDescription>Consulting-Projekt mit einem oder mehreren Teamspace-Einträgen anlegen.</DialogDescription>
              </DialogHeader>
              <ProjectFormFields
                form={form}
                setForm={setForm}
                organizationLocked={organizationLocked}
                lookupStatus={lookupStatus}
                zammadLookupBusy={zammadLookupBusy}
                saving={saving}
                submitLabel="Projekt anlegen"
                onZammadLookup={() => void lookupProjectTicketInZammad()}
                onSubmit={submitProject}
              />
            </DialogContent>
          </Dialog>
        </div>
        <div className="hidden grid-cols-[minmax(220px,1.35fr)_minmax(170px,1fr)_105px_115px_105px_165px_90px_44px] gap-3 border-b bg-muted/25 px-4 py-2 text-xs font-medium text-muted-foreground xl:grid">
          {sortHeader("Nummer/Titel", "title")}
          {sortHeader("Organisation", "organization")}
          {sortHeader("Status", "status")}
          {sortHeader("Zammad", "zammadStatus")}
          {sortHeader("Prio", "zammadPriority")}
          {sortHeader("Verbrauch/Gesamt", "consumption")}
          {sortHeader("Verbrauch %", "consumptionPercent")}
          <span className="text-right">Aktion</span>
        </div>
        {projectGroups.map((group) => (
          <div key={group.key} className={cn(viewSettings.groupBy !== "none" ? "border-b last:border-b-0" : undefined)}>
            {viewSettings.groupBy !== "none" ? (
              <div className="flex flex-col gap-1 border-b bg-muted/15 px-4 py-2 sm:flex-row sm:items-center sm:justify-between">
                <h4 className="min-w-0 truncate text-sm font-medium">{group.label}</h4>
                <p className="text-xs text-muted-foreground">
                  {group.projects.length} Projekt(e) · {formatMinutes(group.consumptionMinutes)} Verbrauch · {formatMinutes(group.remainingMinutes)} Rest offen
                </p>
              </div>
            ) : null}
            {group.projects.map((project) => {
              const isEditing = editingProjectId === project.id;
              const budgetedTeamspaceEntries = budgetedProjectTeamspaceEntries(project);
              const consumptionMinutes = projectConsumption(project, viewSettings.standardTeamspaceOnly);
              const budgetMinutes = projectBudget(project, viewSettings.standardTeamspaceOnly);
              const remaining = projectRemaining(project, viewSettings.standardTeamspaceOnly);
              const usedPercent = projectConsumptionPercent(project, viewSettings.standardTeamspaceOnly);
              const showBudgetedTeamspaceEntries = !viewSettings.standardTeamspaceOnly && budgetedTeamspaceEntries.length > 1;
              const canEditProject = project.can_edit !== false;

              return (
                <div key={project.id} className="border-b last:border-b-0">
              <div className="grid gap-3 px-4 py-3 xl:grid-cols-[minmax(220px,1.35fr)_minmax(170px,1fr)_105px_115px_105px_165px_90px_44px] xl:items-center">
                <div className="min-w-0">
                  <button
                    type="button"
                    className="block max-w-full truncate text-left text-xs font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
                    onClick={() => onNavigate(`/tickets/${project.ticket_id}?month=${currentMonth()}`)}
                  >
                    {project.ticket_number}
                  </button>
                  <p className="truncate text-sm font-normal">{project.title || "Kein Titel"}</p>
                </div>
                <div className="min-w-0 text-sm">
                  <p className="truncate font-medium xl:hidden">Organisation</p>
                  <p className="truncate">{projectOrganizationLabel(project)}</p>
                </div>
                <div className="flex flex-wrap gap-1.5">
                  <p className="w-full truncate text-sm font-medium xl:hidden">Status</p>
                  {project.closed_at ? <Badge variant="secondary">Geschlossen</Badge> : <Badge variant="success">Offen</Badge>}
                  {!canEditProject ? <Badge variant="outline">geteilt</Badge> : null}
                  {project.close_review_required ? <Badge variant="warning">TS/TT prüfen</Badge> : null}
                  {(project.unassigned_teamspace_session_count ?? 0) > 0 ? <Badge variant="warning">{project.unassigned_teamspace_session_count} ohne TS</Badge> : null}
                </div>
                <div className="flex flex-wrap gap-1.5">
                  <p className="w-full truncate text-sm font-medium xl:hidden">Zammad</p>
                  <ZammadStateBadge stateId={project.zammad_state_id} />
                </div>
                <div className="flex flex-wrap gap-1.5">
                  <p className="w-full truncate text-sm font-medium xl:hidden">Prio</p>
                  <ZammadPriorityBadge priorityId={project.zammad_priority_id} />
                </div>
                <div className="min-w-0">
                  <p className="truncate text-sm font-medium xl:hidden">Verbrauch/Gesamt</p>
                  <p className={cn("text-sm font-semibold", remaining !== null && remaining < 0 ? "text-destructive" : undefined)}>
                    {formatDecimalHours(consumptionMinutes)} / {budgetMinutes ? formatDecimalHours(budgetMinutes) : "offen"}
                  </p>
                  {showBudgetedTeamspaceEntries ? <p className="text-xs text-muted-foreground">{budgetedTeamspaceEntries.length} Budgets</p> : null}
                </div>
                <div className="min-w-0 text-sm">
                  <p className="truncate font-medium xl:hidden">Verbrauch %</p>
                  <p className={cn("font-semibold", usedPercent !== null && usedPercent >= 100 ? "text-blue-500" : usedPercent !== null && usedPercent >= 90 ? "text-red-500" : undefined)}>
                    {usedPercent !== null ? `${usedPercent}%` : "-"}
                  </p>
                </div>
                <div className="flex justify-end">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button type="button" size="icon" variant="ghost" className="size-8">
                        <MoreHorizontal className="size-4" />
                        <span className="sr-only">Projektaktionen öffnen</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-48">
                      {!projectHasRecurringBilling(project) ? (
                        <DropdownMenuItem className="hover:cursor-pointer" onSelect={() => void onStartTimer(project.ticket_number)}>
                          <Play className="size-4" />
                          Session starten
                        </DropdownMenuItem>
                      ) : null}
                      <DropdownMenuItem className="hover:cursor-pointer" onSelect={() => void saveProjectFavorite(project)}>
                        <Star className="size-4" />
                        Als Favorit speichern
                      </DropdownMenuItem>
                      {project.hidden_for_user ? (
                        <DropdownMenuItem className="hover:cursor-pointer" onSelect={() => void unhideProjectForUser(project)}>
                          <Eye className="size-4" />
                          Einblenden
                        </DropdownMenuItem>
                      ) : (
                        <DropdownMenuItem className="hover:cursor-pointer" onSelect={() => void hideProjectForUser(project)}>
                          <EyeOff className="size-4" />
                          Ausblenden
                        </DropdownMenuItem>
                      )}
                      <DropdownMenuItem className="hover:cursor-pointer" onSelect={() => onNavigate(`/tickets/${project.ticket_id}?month=${currentMonth()}`)}>
                        <Search className="size-4" />
                        Projekt öffnen
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        disabled={!canEditProject || savingProjectStatusId === project.id}
                        className="hover:cursor-pointer"
                        onSelect={() => void setProjectClosed(project, !project.closed_at)}
                      >
                        {project.closed_at ? <RotateCcw className="size-4" /> : <CheckCircle2 className="size-4" />}
                        {project.closed_at ? "Projekt öffnen" : "Projekt schließen"}
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        disabled={!canEditProject}
                        className="hover:cursor-pointer"
                        onSelect={() => {
                          setEditingProjectId(project.id);
                          setEditForm(formFromProject(project));
                        }}
                      >
                        <Pencil className="size-4" />
                        Bearbeiten
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>
              <div className="space-y-2 px-4 pb-3">
                {usedPercent !== null ? (
                  <div className="h-1.5 overflow-hidden rounded-full bg-muted" title={`${usedPercent}% Verbrauch`} aria-label={`${usedPercent}% Verbrauch`}>
                    <div className={cn("h-full rounded-full", projectConsumptionBarClass(usedPercent))} style={{ width: `${Math.min(100, usedPercent)}%` }} />
                  </div>
                ) : (
                  <div className="h-1.5 overflow-hidden rounded-full bg-muted/30">
                    <div className="h-full rounded-full bg-muted-foreground/10" style={{ width: "0%" }} />
                  </div>
                )}
                {(project.unassigned_teamspace_session_count ?? 0) > 0 ? (
                  <p className="rounded-md border border-amber-500/30 bg-amber-500/10 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
                    {project.unassigned_teamspace_session_count} Session(s) haben keinen Teamspace-Eintrag.
                  </p>
                ) : null}
                {project.close_review_required ? (
                  <p className="rounded-md border border-amber-500/30 bg-amber-500/10 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
                    Zammad meldet das Consulting-Ticket als geschlossen. Bitte Zeiten in Teamspace und TicketTracker prüfen und das Projekt danach schließen.
                  </p>
                ) : null}
                {showBudgetedTeamspaceEntries ? (
                  <div className="grid gap-1.5 md:grid-cols-2">
                    {budgetedTeamspaceEntries.map((entry) => {
                      const entryPercent = projectEntryPercent(entry);
                      const entryConsumption = projectEntryConsumption(entry);
                      const label = entry.teamspace_project || (entry.is_default ? "Standard" : "Ohne Teamspace-ID");

                      return (
                        <div key={entry.id} className="min-w-0 rounded-md border bg-background/50 px-2 py-1">
                          <div className="mb-1 flex min-w-0 items-center justify-between gap-2 text-[11px]">
                            <span className="truncate text-muted-foreground">
                              {label}
                              {entry.is_default ? " · Standard" : ""}
                              {entry.budget_sync_disabled ? " · Budget geschützt" : ""}
                            </span>
                            <span className="shrink-0 font-medium">
                              {formatMinutes(entryConsumption)} / {entry.hour_budget_minutes ? formatMinutes(entry.hour_budget_minutes) : "offen"}
                            </span>
                          </div>
                          <div className="h-1 overflow-hidden rounded-full bg-muted">
                            <div
                              className={cn("h-full rounded-full", entryPercent === null ? "bg-muted-foreground/20" : projectConsumptionBarClass(entryPercent))}
                              style={{ width: `${entryPercent === null ? 0 : Math.min(100, entryPercent)}%` }}
                            />
                          </div>
                        </div>
                      );
                    })}
                  </div>
                ) : null}
              </div>
              {isEditing ? (
                <div className="border-t bg-muted/10 p-4">
                  <div className="space-y-3">
{/*                     <div className="grid gap-3 md:grid-cols-[160px_minmax(200px,1fr)_160px]">
                      <Input value={editForm.ticketNumber} onChange={(event) => setEditForm({ ...editForm, ticketNumber: event.currentTarget.value })} />
                      <OrganizationSelect
                        value={editForm.organizationId}
                        selectedName={editForm.organizationName}
                        onChange={(organization) => setEditForm({ ...editForm, organizationId: organization.id, organizationName: organization.name })}
                        required
                      />
                      <div className="flex h-9 items-center rounded-lg border bg-muted/30 px-3 text-sm">Consulting</div>
                    </div> */}
                    <Input placeholder="Titel" value={editForm.title} onChange={(event) => setEditForm({ ...editForm, title: event.currentTarget.value })} />
                    <div className="grid gap-3 md:grid-cols-2">
                      <Input type="date" value={editForm.startsOn} onChange={(event) => setEditForm({ ...editForm, startsOn: event.currentTarget.value })} />
                      <Input type="date" value={editForm.endsOn} onChange={(event) => setEditForm({ ...editForm, endsOn: event.currentTarget.value })} />
                    </div>
                    <ProjectTeamspaceEntriesFields
                      entries={editForm.teamspaceEntries}
                      onChange={(teamspaceEntries) => setEditForm({ ...editForm, teamspaceEntries })}
                    />
                    <Textarea className="min-h-24" value={editForm.description} onChange={(event) => setEditForm({ ...editForm, description: event.currentTarget.value })} />
                    <div className="flex flex-wrap justify-end gap-2">
                      <Button
                        type="button"
                        variant="secondary"
                        disabled={savingProjectStatusId === project.id}
                        onClick={() => void setProjectClosed(project, !project.closed_at)}
                      >
                        {project.closed_at ? <RotateCcw className="size-4" /> : <CheckCircle2 className="size-4" />}
                        {project.closed_at ? "Wieder öffnen" : "Projekt schließen"}
                      </Button>
                      <Button type="button" variant="ghost" onClick={() => setEditingProjectId(null)}>
                        Abbrechen
                      </Button>
                      <Button type="button" disabled={savingProjectId === project.id} onClick={() => void saveProject(project)}>
                        <Save className="size-4" />
                        Speichern
                      </Button>
                    </div>
                  </div>
                </div>
              ) : null}
            </div>
              );
            })}
          </div>
        ))}
      </Card>

      {!loading && filteredProjects.length === 0 ? (
        <p className="rounded-md border bg-muted/20 p-6 text-center text-sm text-muted-foreground">
          {projects.length === 0 ? "Noch keine Projekte angelegt." : "Keine Projekte für die aktuellen Filter gefunden."}
        </p>
      ) : null}
    </div>
  );
}