"use client";

import { useMutation } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { StrategyRecommendation } from "@/lib/types";
import {
  Loader2,
  Brain,
  AlertTriangle,
  ArrowRight,
  Shield,
  Calendar,
  RefreshCw,
} from "lucide-react";

interface CaseStrategyProps {
  caseId: string;
}

const PRIORITY_STYLES = {
  high: "bg-red-50 text-red-700 border-red-200",
  medium: "bg-amber-50 text-amber-700 border-amber-200",
  low: "bg-emerald-50 text-emerald-700 border-emerald-200",
} as const;

const IMPORTANCE_STYLES = {
  critical: "border-l-red-500",
  important: "border-l-amber-500",
  routine: "border-l-neutral-300",
} as const;

export function CaseStrategy({ caseId }: CaseStrategyProps) {
  const mutation = useMutation({
    mutationFn: () =>
      api.post<StrategyRecommendation>("/ai/case-strategy", {
        case_id: caseId,
      }),
  });

  if (!mutation.data && !mutation.isPending && !mutation.isError) {
    return (
      <div className="flex flex-col items-center gap-3 py-8 text-center">
        <div className="rounded-xl bg-neutral-100 p-3">
          <Brain className="h-6 w-6 text-neutral-400" />
        </div>
        <div>
          <p className="text-sm font-medium text-neutral-900">
            KI-Strategieanalyse
          </p>
          <p className="mt-1 text-sm text-neutral-500">
            Claude analysiert die Akte und gibt strategische Empfehlungen.
          </p>
        </div>
        <button
          onClick={() => mutation.mutate()}
          className="inline-flex items-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
        >
          <Brain className="h-4 w-4" />
          Strategie analysieren
        </button>
      </div>
    );
  }

  if (mutation.isPending) {
    return (
      <div className="flex flex-col items-center gap-3 py-12 text-center">
        <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
        <p className="text-sm text-neutral-500">
          Claude analysiert die Akte...
        </p>
        <p className="text-xs text-neutral-400">
          Dies kann bis zu 30 Sekunden dauern.
        </p>
      </div>
    );
  }

  if (mutation.isError) {
    return (
      <div className="flex flex-col items-center gap-3 py-8 text-center">
        <div className="rounded-xl bg-red-50 p-3">
          <AlertTriangle className="h-6 w-6 text-red-500" />
        </div>
        <p className="text-sm text-neutral-900">Analyse fehlgeschlagen</p>
        <button
          onClick={() => mutation.mutate()}
          className="inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
        >
          <RefreshCw className="h-3.5 w-3.5" />
          Erneut versuchen
        </button>
      </div>
    );
  }

  const data = mutation.data!;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold text-neutral-900">
          KI-Strategieanalyse
        </h3>
        <button
          onClick={() => mutation.mutate()}
          className="inline-flex items-center gap-1 rounded-md border border-neutral-200 px-2.5 py-1.5 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-50"
        >
          <RefreshCw className="h-3.5 w-3.5" />
          Aktualisieren
        </button>
      </div>

      {/* Summary */}
      <div className="rounded-md border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
        {data.summary}
      </div>

      {/* Next Steps */}
      {data.next_steps?.length > 0 && (
        <div>
          <h4 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-neutral-500">
            <ArrowRight className="h-3.5 w-3.5" />
            Naechste Schritte
          </h4>
          <div className="space-y-2">
            {data.next_steps.map((step, i) => (
              <div
                key={i}
                className="rounded-md border border-neutral-200 bg-white px-4 py-3"
              >
                <div className="flex items-start gap-3">
                  <span
                    className={`mt-0.5 inline-block shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium ${PRIORITY_STYLES[step.priority]}`}
                  >
                    {step.priority === "high"
                      ? "Hoch"
                      : step.priority === "medium"
                        ? "Mittel"
                        : "Niedrig"}
                  </span>
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-neutral-900">
                      {step.action}
                    </p>
                    <p className="mt-1 text-sm text-neutral-500">
                      {step.reasoning}
                    </p>
                    {step.deadline && (
                      <p className="mt-1 text-xs text-neutral-400">
                        Frist: {step.deadline}
                      </p>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Risk Assessment */}
      {data.risk_assessment?.length > 0 && (
        <div>
          <h4 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-neutral-500">
            <Shield className="h-3.5 w-3.5" />
            Risikobewertung
          </h4>
          <div className="space-y-2">
            {data.risk_assessment.map((risk, i) => (
              <div
                key={i}
                className="rounded-md border border-neutral-200 bg-white px-4 py-3"
              >
                <div className="flex items-start gap-3">
                  <span
                    className={`mt-0.5 inline-block shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium ${PRIORITY_STYLES[risk.level]}`}
                  >
                    {risk.level === "high"
                      ? "Hoch"
                      : risk.level === "medium"
                        ? "Mittel"
                        : "Niedrig"}
                  </span>
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-neutral-900">
                      {risk.risk}
                    </p>
                    <p className="mt-1 text-sm text-neutral-500">
                      Massnahme: {risk.mitigation}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Timeline */}
      {data.timeline?.length > 0 && (
        <div>
          <h4 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-neutral-500">
            <Calendar className="h-3.5 w-3.5" />
            Zeitplan
          </h4>
          <div className="space-y-1">
            {data.timeline.map((item, i) => (
              <div
                key={i}
                className={`border-l-2 py-2 pl-4 ${IMPORTANCE_STYLES[item.importance]}`}
              >
                <div className="flex items-baseline gap-2">
                  <span className="shrink-0 text-xs font-medium text-neutral-400">
                    {item.date}
                  </span>
                  <span className="text-sm text-neutral-900">{item.event}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}