"use client";

import { useQuery, useMutation } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { ProceedingType, CalculateResponse, CalculatedDeadline } from "@/lib/types";
import { format, parseISO, isPast, isThisWeek } from "date-fns";
import { de } from "date-fns/locale";
import { Calculator, Calendar, ArrowRight, AlertTriangle } from "lucide-react";
import { useState } from "react";

function getTimelineUrgency(dueDate: string): "red" | "amber" | "green" {
  const due = parseISO(dueDate);
  if (isPast(due)) return "red";
  if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
  return "green";
}

const dotColors = {
  red: "bg-red-500",
  amber: "bg-amber-500",
  green: "bg-green-500",
};

export function DeadlineCalculator() {
  const [proceedingType, setProceedingType] = useState("");
  const [triggerDate, setTriggerDate] = useState("");

  const { data: proceedingTypes, isLoading: typesLoading } = useQuery({
    queryKey: ["proceeding-types"],
    queryFn: () => api.get<ProceedingType[]>("/api/proceeding-types"),
  });

  const calculateMutation = useMutation({
    mutationFn: (params: { proceeding_type: string; trigger_event_date: string }) =>
      api.post<CalculateResponse>("/api/deadlines/calculate", params),
  });

  function handleCalculate(e: React.FormEvent) {
    e.preventDefault();
    if (!proceedingType || !triggerDate) return;
    calculateMutation.mutate({
      proceeding_type: proceedingType,
      trigger_event_date: triggerDate,
    });
  }

  const results = calculateMutation.data;

  return (
    <div className="space-y-6">
      {/* Input form */}
      <form onSubmit={handleCalculate} className="rounded-lg border border-neutral-200 bg-white p-5">
        <div className="flex items-center gap-2 text-sm font-medium text-neutral-900">
          <Calculator className="h-4 w-4" />
          Fristenberechnung
        </div>
        <div className="mt-4 grid gap-4 sm:grid-cols-3">
          <div>
            <label className="mb-1 block text-xs font-medium text-neutral-500">
              Verfahrensart
            </label>
            <select
              value={proceedingType}
              onChange={(e) => setProceedingType(e.target.value)}
              disabled={typesLoading}
              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
            >
              <option value="">Bitte wahlen...</option>
              {proceedingTypes?.map((pt) => (
                <option key={pt.id} value={pt.code}>
                  {pt.name} ({pt.code})
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="mb-1 block text-xs font-medium text-neutral-500">
              Auslosedatum
            </label>
            <input
              type="date"
              value={triggerDate}
              onChange={(e) => setTriggerDate(e.target.value)}
              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
            />
          </div>
          <div className="flex items-end">
            <button
              type="submit"
              disabled={!proceedingType || !triggerDate || calculateMutation.isPending}
              className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
            >
              {calculateMutation.isPending ? "Berechne..." : "Berechnen"}
              <ArrowRight className="h-3.5 w-3.5" />
            </button>
          </div>
        </div>
      </form>

      {/* Error */}
      {calculateMutation.isError && (
        <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          Fehler bei der Berechnung. Bitte Eingaben prufen.
        </div>
      )}

      {/* Results */}
      {results && results.deadlines && (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-medium text-neutral-900">
              Berechnete Fristen
            </h3>
            <span className="text-xs text-neutral-500">
              {results.deadlines.length} Fristen ab{" "}
              {format(parseISO(results.trigger_event_date), "dd. MMM yyyy", { locale: de })}
            </span>
          </div>

          {/* Timeline */}
          <div className="relative rounded-lg border border-neutral-200 bg-white">
            {results.deadlines.map((d: CalculatedDeadline, i: number) => {
              const urgency = getTimelineUrgency(d.due_date);
              const isLast = i === results.deadlines.length - 1;

              return (
                <div
                  key={d.rule_id}
                  className={`flex gap-3 px-4 py-3 ${!isLast ? "border-b border-neutral-100" : ""}`}
                >
                  {/* Timeline dot + line */}
                  <div className="flex flex-col items-center pt-1">
                    <div className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
                    {!isLast && <div className="mt-1 w-px flex-1 bg-neutral-200" />}
                  </div>

                  {/* Content */}
                  <div className="min-w-0 flex-1">
                    <div className="flex items-start justify-between gap-2">
                      <span className="text-sm font-medium text-neutral-900">
                        {d.title}
                      </span>
                      <span className="shrink-0 text-sm font-medium tabular-nums text-neutral-700">
                        {format(parseISO(d.due_date), "dd.MM.yyyy")}
                      </span>
                    </div>
                    <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
                      {d.rule_code && <span>{d.rule_code}</span>}
                      {d.was_adjusted && (
                        <>
                          {d.rule_code && <span>·</span>}
                          <span className="text-amber-600">
                            Angepasst (Original: {format(parseISO(d.original_due_date), "dd.MM.yyyy")})
                          </span>
                        </>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Empty state */}
      {!results && !calculateMutation.isPending && (
        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
          <Calendar className="mx-auto h-8 w-8 text-neutral-300" />
          <p className="mt-2 text-sm text-neutral-500">
            Verfahrensart und Auslosedatum wahlen, um Fristen zu berechnen
          </p>
        </div>
      )}
    </div>
  );
}