"use client";

import { DeadlineCalculator } from "@/components/deadlines/DeadlineCalculator";
import { DeadlineWizard } from "@/components/deadlines/DeadlineWizard";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

export default function FristenrechnerPage() {
  const [mode, setMode] = useState<"wizard" | "quick">("wizard");

  return (
    <div className="animate-fade-in space-y-4">
      <div className="flex items-start justify-between">
        <div>
          <Link
            href="/fristen"
            className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
          >
            <ArrowLeft className="h-3.5 w-3.5" />
            Zurueck zu Fristen
          </Link>
          <h1 className="text-lg font-semibold text-neutral-900">
            Fristenbestimmung
          </h1>
          <p className="mt-0.5 text-sm text-neutral-500">
            {mode === "wizard"
              ? "Vollstaendige Verfahrens-Timeline mit automatischer Fristenberechnung"
              : "Schnellberechnung einzelner Fristen nach Verfahrensart"}
          </p>
        </div>

        {/* Mode toggle */}
        <div className="flex rounded-md border border-neutral-200 bg-neutral-50 p-0.5">
          <button
            onClick={() => setMode("wizard")}
            className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
              mode === "wizard"
                ? "bg-white text-neutral-900 shadow-sm"
                : "text-neutral-500 hover:text-neutral-700"
            }`}
          >
            Verfahren
          </button>
          <button
            onClick={() => setMode("quick")}
            className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
              mode === "quick"
                ? "bg-white text-neutral-900 shadow-sm"
                : "text-neutral-500 hover:text-neutral-700"
            }`}
          >
            Schnell
          </button>
        </div>
      </div>

      {mode === "wizard" ? <DeadlineWizard /> : <DeadlineCalculator />}
    </div>
  );
}