"use client";

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useParams, useRouter } from "next/navigation";
import { api } from "@/lib/api";
import type { Deadline } from "@/lib/types";
import { Breadcrumb } from "@/components/layout/Breadcrumb";
import { NotesList } from "@/components/notes/NotesList";
import { Skeleton } from "@/components/ui/Skeleton";
import { format, parseISO, formatDistanceToNow, isPast } from "date-fns";
import { de } from "date-fns/locale";
import {
  AlertTriangle,
  CheckCircle2,
  Clock,
  ExternalLink,
} from "lucide-react";
import Link from "next/link";
import { toast } from "sonner";

interface DeadlineDetail extends Deadline {
  case_number?: string;
  case_title?: string;
}

const STATUS_CONFIG: Record<
  string,
  { label: string; bg: string; icon: typeof Clock }
> = {
  pending: { label: "Offen", bg: "bg-amber-50 text-amber-700", icon: Clock },
  completed: {
    label: "Erledigt",
    bg: "bg-emerald-50 text-emerald-700",
    icon: CheckCircle2,
  },
  overdue: {
    label: "Ueberfaellig",
    bg: "bg-red-50 text-red-700",
    icon: AlertTriangle,
  },
};

function getEffectiveStatus(d: DeadlineDetail): string {
  if (d.status === "completed") return "completed";
  if (isPast(parseISO(d.due_date))) return "overdue";
  return "pending";
}

function DetailSkeleton() {
  return (
    <div>
      <Skeleton className="h-4 w-48" />
      <div className="mt-6 space-y-4">
        <Skeleton className="h-8 w-64" />
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-32 rounded-lg" />
        <Skeleton className="h-48 rounded-lg" />
      </div>
    </div>
  );
}

export default function DeadlineDetailPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const queryClient = useQueryClient();

  const {
    data: deadline,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["deadline", id],
    queryFn: () => api.get<DeadlineDetail>(`/deadlines/${id}`),
  });

  const completeMutation = useMutation({
    mutationFn: () => api.patch<Deadline>(`/deadlines/${id}/complete`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["deadline", id] });
      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
      toast.success("Frist als erledigt markiert");
    },
    onError: () => toast.error("Fehler beim Abschliessen der Frist"),
  });

  if (isLoading) return <DetailSkeleton />;

  if (error || !deadline) {
    return (
      <div className="py-12 text-center">
        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
          <AlertTriangle className="h-6 w-6 text-red-500" />
        </div>
        <p className="text-sm font-medium text-neutral-900">
          Frist nicht gefunden
        </p>
        <p className="mt-1 text-sm text-neutral-500">
          Die Frist existiert nicht oder Sie haben keine Berechtigung.
        </p>
        <Link
          href="/fristen"
          className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
        >
          Zurueck zu Fristen
        </Link>
      </div>
    );
  }

  const status = getEffectiveStatus(deadline);
  const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.pending;
  const StatusIcon = config.icon;
  const dueDate = parseISO(deadline.due_date);
  const relativeTime = formatDistanceToNow(dueDate, {
    addSuffix: true,
    locale: de,
  });

  return (
    <div className="animate-fade-in">
      <Breadcrumb
        items={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Fristen", href: "/fristen" },
          { label: deadline.title },
        ]}
      />

      {/* Header */}
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <div className="flex flex-wrap items-center gap-3">
            <span
              className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${config.bg}`}
            >
              <StatusIcon className="h-3 w-3" />
              {config.label}
            </span>
            <h1 className="text-lg font-semibold text-neutral-900">
              {deadline.title}
            </h1>
          </div>
          {deadline.description && (
            <p className="mt-1 text-sm text-neutral-500">
              {deadline.description}
            </p>
          )}
        </div>
        {deadline.status !== "completed" && (
          <button
            onClick={() => completeMutation.mutate()}
            disabled={completeMutation.isPending}
            className="shrink-0 rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50"
          >
            {completeMutation.isPending ? "Wird erledigt..." : "Erledigen"}
          </button>
        )}
      </div>

      {/* Due date */}
      <div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
        <div className="flex items-baseline gap-2">
          <span className="text-sm font-medium text-neutral-900">
            Faellig: {format(dueDate, "d. MMMM yyyy", { locale: de })}
          </span>
          <span
            className={`text-xs ${status === "overdue" ? "font-medium text-red-600" : "text-neutral-500"}`}
          >
            ({relativeTime})
          </span>
        </div>
        {deadline.warning_date && (
          <p className="mt-1 text-xs text-neutral-500">
            Warnung am:{" "}
            {format(parseISO(deadline.warning_date), "d. MMMM yyyy", {
              locale: de,
            })}
          </p>
        )}
        {deadline.original_due_date &&
          deadline.original_due_date !== deadline.due_date && (
            <p className="mt-1 text-xs text-neutral-500">
              Urspruengliches Datum:{" "}
              {format(parseISO(deadline.original_due_date), "d. MMMM yyyy", {
                locale: de,
              })}
            </p>
          )}
        {deadline.completed_at && (
          <p className="mt-1 text-xs text-emerald-600">
            Erledigt am:{" "}
            {format(parseISO(deadline.completed_at), "d. MMMM yyyy, HH:mm", {
              locale: de,
            })}
          </p>
        )}
      </div>

      {/* Case context */}
      {deadline.case_id && (
        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
                Akte
              </p>
              <p className="mt-0.5 text-sm text-neutral-900">
                {deadline.case_number
                  ? `Az. ${deadline.case_number}`
                  : "Verknuepfte Akte"}
                {deadline.case_title && ` — ${deadline.case_title}`}
              </p>
            </div>
            <Link
              href={`/cases/${deadline.case_id}`}
              className="flex items-center gap-1 text-xs text-neutral-500 transition-colors hover:text-neutral-700"
            >
              Zur Akte
              <ExternalLink className="h-3 w-3" />
            </Link>
          </div>
        </div>
      )}

      {/* Source info */}
      {deadline.source && deadline.source !== "manual" && (
        <div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
          <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
            Quelle
          </p>
          <p className="mt-0.5 text-sm text-neutral-700">
            {deadline.source === "calculated"
              ? "Berechnet"
              : deadline.source === "caldav"
                ? "CalDAV Sync"
                : deadline.source}
            {deadline.rule_id && ` (Regel: ${deadline.rule_id})`}
          </p>
        </div>
      )}

      {/* Notes */}
      <div className="mt-6">
        <NotesList parentType="deadline" parentId={id} />
      </div>
    </div>
  );
}