"use client";

import { DeadlineList } from "@/components/deadlines/DeadlineList";
import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
import { Breadcrumb } from "@/components/layout/Breadcrumb";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { Deadline } from "@/lib/types";
import { Calendar, List, Calculator } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { useSearchParams } from "next/navigation";

type ViewMode = "list" | "calendar";

export default function FristenPage() {
  const searchParams = useSearchParams();
  const initialStatus = searchParams.get("status") ?? undefined;
  const [view, setView] = useState<ViewMode>("list");

  const { data: deadlines } = useQuery({
    queryKey: ["deadlines"],
    queryFn: () => api.get<Deadline[]>("/deadlines"),
  });

  return (
    <div className="animate-fade-in space-y-4">
      <div>
        <Breadcrumb
          items={[
            { label: "Dashboard", href: "/dashboard" },
            { label: "Fristen" },
          ]}
        />
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
            <p className="mt-0.5 text-sm text-neutral-500">
              Alle Fristen im Überblick
            </p>
          </div>
          <div className="flex items-center gap-2">
            <Link
              href="/fristen/rechner"
              className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
            >
              <Calculator className="h-3.5 w-3.5" />
              Fristenrechner
            </Link>
            <div className="flex rounded-md border border-neutral-200 bg-white">
              <button
                onClick={() => setView("list")}
                className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
                  view === "list"
                    ? "bg-neutral-100 font-medium text-neutral-900"
                    : "text-neutral-500 hover:text-neutral-700"
                }`}
              >
                <List className="h-3.5 w-3.5" />
                Liste
              </button>
              <button
                onClick={() => setView("calendar")}
                className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
                  view === "calendar"
                    ? "bg-neutral-100 font-medium text-neutral-900"
                    : "text-neutral-500 hover:text-neutral-700"
                }`}
              >
                <Calendar className="h-3.5 w-3.5" />
                Kalender
              </button>
            </div>
          </div>
        </div>
      </div>

      {view === "list" ? (
        <DeadlineList initialStatus={initialStatus} />
      ) : (
        <DeadlineCalendarView deadlines={Array.isArray(deadlines) ? deadlines : []} />
      )}
    </div>
  );
}