import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Layout } from "@/components/layout";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Progress } from "@/components/ui/progress";
import { Star, AlertTriangle, DollarSign, ThumbsUp, RotateCcw } from "lucide-react";
import { Link } from "wouter";
import { customFetch } from "@workspace/api-client-react";
import { useToast } from "@/hooks/use-toast";

export default function RedundancyPage() {
  const { t } = useTranslation();
  const [data, setData] = useState<any[] | null>(null);
  const [loading, setLoading] = useState(true);
  const { toast } = useToast();

  useEffect(() => {
    customFetch<any[]>("/api/admin/redundancy")
      .then(setData)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  async function handleEvaluate(toolId: number, relatedToolId: number, betterToolId: number) {
    try {
      await customFetch("/api/admin/redundancy/evaluate", {
        method: "POST",
        body: JSON.stringify({ toolId, relatedToolId, betterToolId }),
      });
      toast({ title: t("redundancy.toastEvalSaved") });
      setData(await customFetch<any[]>("/api/admin/redundancy"));
    } catch {
      toast({ title: t("redundancy.toastEvalFailed"), variant: "destructive" });
    }
  }

  function certaintyColor(c: string) {
    return c === "high" ? "bg-green-100 text-green-800 border-green-300" : c === "medium" ? "bg-amber-100 text-amber-800 border-amber-300" : "bg-gray-100 text-gray-600 border-gray-300";
  }

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center gap-3">
          <AlertTriangle className="w-6 h-6 text-amber-500" />
          <h1 className="text-3xl font-bold">{t("redundancy.title")}</h1>
        </div>
        <p className="text-muted-foreground">
          {t("redundancy.subtitle")}
        </p>

        {loading ? (
          <div className="space-y-6">
            {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-48 rounded-xl" />)}
          </div>
        ) : data && data.length > 0 ? (
          <div className="space-y-8">
            {data.map((group) => (
              <div key={group.category}>
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h2 className="text-xl font-semibold capitalize">{group.category}</h2>
                    <p className="text-xs text-muted-foreground mt-0.5">{t("redundancy.toolsComparisons", { tools: group.tools.length, pairs: group.pairs.length })}</p>
                  </div>
                  {group.totalMonthlyCost > 0 && (
                    <span className="text-xs text-muted-foreground flex items-center gap-1">
                      <DollarSign className="w-3 h-3" />
                      {group.totalMonthlyCost.toFixed(2)}{t("redundancy.totalMonthly")}
                    </span>
                  )}
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
                  {group.tools.map((tool: any) => (
                    <Link key={tool.id} href={`/tools/${tool.id}`}>
                      <Card className="hover-elevate transition-all cursor-pointer hover:border-primary/50 h-full">
                        <CardContent className="p-4">
                          <div className="flex items-start gap-2 justify-between">
                            <div className="min-w-0 flex-1">
                              <div className="flex items-center gap-2">
                                <span className="font-medium">{tool.name}</span>
                                {tool.costs?.length > 0 && tool.totalMonthly > 0 && (
                                  <Badge variant="outline" className="text-[10px] px-1 py-0 shrink-0">
                                    {tool.totalMonthly.toFixed(2)}{t("redundancy.perMonth")}
                                  </Badge>
                                )}
                              </div>
                              <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground flex-wrap">
                                <span>{tool.ratingCount} {t("redundancy.reviews")}</span>
                                {tool.avgCombined != null && (
                                  <>
                                    <span>·</span>
                                    <span className="flex items-center gap-0.5">
                                      <Star className="w-3 h-3 fill-primary text-primary" />
                                      {tool.avgCombined.toFixed(1)}
                                    </span>
                                  </>
                                )}
                              </div>
                              <div className="flex flex-wrap gap-1 mt-2">
                                {tool.costs?.map((c: any, i: number) => (
                                  <Badge key={i} variant="outline" className="text-[10px] px-1 py-0">{c.licenseType}{c.billingPeriod ? ` (${c.billingPeriod})` : ""}</Badge>
                                ))}
                              </div>
                            </div>
                            <Badge variant="outline" className="shrink-0">{tool.features.length} {t("redundancy.features")}</Badge>
                          </div>
                        </CardContent>
                      </Card>
                    </Link>
                  ))}
                </div>

                {group.pairs.length > 0 && (
                  <div className="space-y-3">
                    <h3 className="text-sm font-medium text-muted-foreground">{t("redundancy.comparisonsTitle")}</h3>
                    {group.pairs.map((pair: any, i: number) => (
                      <Card key={i} className={pair.recommendation.certainty === "high" ? "border-green-300" : pair.recommendation.certainty === "medium" ? "border-amber-200" : ""}>
                        <CardContent className="p-4">
                          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
                            <div className="flex items-center gap-3 min-w-0 flex-1">
                              <div className="text-right min-w-0 flex-1">
                                <span className={`font-medium text-sm block truncate ${pair.recommendation.betterToolId === pair.a.id ? "text-primary" : ""}`}>
                                  {pair.a.name}
                                </span>
                                <span className="text-[10px] text-muted-foreground">
                                  {pair.a.avgCombined != null ? pair.a.avgCombined.toFixed(1) : "N/A"} ★
                                  {pair.a.totalMonthly > 0 ? ` · ${pair.a.totalMonthly.toFixed(2)}${t("redundancy.perMonth")}` : ""}
                                </span>
                              </div>
                              <div className="text-center shrink-0">
                                <div className="text-xs text-muted-foreground font-medium">{t("redundancy.vs")}</div>
                                <div className="flex items-center gap-1 justify-center mt-0.5">
                                  <Progress value={pair.overlap} className="w-12 h-1.5" />
                                  <span className="text-[10px] text-muted-foreground">{pair.overlap}%</span>
                                </div>
                              </div>
                              <div className="min-w-0 flex-1">
                                <span className={`font-medium text-sm block truncate ${pair.recommendation.betterToolId === pair.b.id ? "text-primary" : ""}`}>
                                  {pair.b.name}
                                </span>
                                <span className="text-[10px] text-muted-foreground">
                                  {pair.b.avgCombined != null ? pair.b.avgCombined.toFixed(1) : "N/A"} ★
                                  {pair.b.totalMonthly > 0 ? ` · ${pair.b.totalMonthly.toFixed(2)}${t("redundancy.perMonth")}` : ""}
                                </span>
                              </div>
                            </div>

                            <div className="flex items-center gap-2 shrink-0 justify-end">
                              {pair.recommendation.reason && (
                                <Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${certaintyColor(pair.recommendation.certainty)}`}>
                                  <ThumbsUp className="w-2.5 h-2.5 mr-0.5" />
                                  {pair.recommendation.betterName}
                                </Badge>
                              )}
                              <div className="flex gap-1">
                                <Button
                                  variant={pair.manualBetterId === pair.a.id ? "default" : "ghost"}
                                  size="sm"
                                  className="text-xs h-7 px-2"
                                  onClick={() => handleEvaluate(pair.a.id, pair.b.id, pair.a.id)}
                                >
                                  {pair.a.name}
                                </Button>
                                <Button
                                  variant={pair.manualBetterId === pair.b.id ? "default" : "ghost"}
                                  size="sm"
                                  className="text-xs h-7 px-2"
                                  onClick={() => handleEvaluate(pair.a.id, pair.b.id, pair.b.id)}
                                >
                                  {pair.b.name}
                                </Button>
                              </div>
                            </div>
                          </div>
                          {pair.recommendation.reason && (
                            <p className="text-[10px] text-muted-foreground mt-2 italic">
                              {pair.recommendation.reason}
                            </p>
                          )}
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        ) : (
          <p className="text-muted-foreground py-8 text-center">{t("redundancy.noTools")}</p>
        )}
      </div>
    </Layout>
  );
}