"use client";

import { useMemo, useState } from "react";
import { AlertCircle, Loader2, Search, SlidersHorizontal, Users } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { usePageHeader } from "@/presentation/hooks/use-page-header";
import { useT } from "@/shared/i18n/client";
import { Badge } from "@/presentation/components/ui/badge";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import type { AnomalyRuleDefaults } from "@/domain/entities/anomaly-rule";
import { AnomalyRuleSheet } from "./anomaly-rule-sheet";

type Filter = "all" | "customized" | "off" | "withdrawn";

const channelClass = (isOn: boolean) =>
  isOn
    ? "bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-500/10 dark:text-sky-400 dark:border-sky-500/20"
    : "bg-transparent text-muted-foreground border-border line-through";

/**
 * The anomaly rules of the fleet app with the Dadycar defaults every client
 * inherits, grouped by domain, and how many clients changed each one.
 */
export function AnomalyRulesList() {
  const t = useT();
  const p = t.pages.anomalyRules;
  const container = useRepositories();

  const [search, setSearch] = useState("");
  const [filter, setFilter] = useState<Filter>("all");
  const [selectedKey, setSelectedKey] = useState<string | null>(null);

  const { data, loading, error, refetch } = useApiQuery(() => container.anomalyRuleRepository.findAll());

  const rules = useMemo(() => data?.rules ?? [], [data]);
  usePageHeader(p.title, p.subtitle(rules.length));

  const visible = useMemo(() => {
    const needle = search.trim().toLowerCase();
    return rules.filter((rule) => {
      if (filter === "customized" && rule.customized_count === 0) return false;
      if (filter === "off" && rule.default_enabled) return false;
      if (filter === "withdrawn" && rule.is_active) return false;
      return !needle || rule.name.toLowerCase().includes(needle) || rule.condition.toLowerCase().includes(needle);
    });
  }, [rules, search, filter]);

  const severityOf = (rule: AnomalyRuleDefaults) =>
    data?.severities.find((option) => option.value === rule.default_severity);

  const filters: { value: Filter; label: string; count: number }[] = [
    { value: "all", label: p.filters.all, count: rules.length },
    { value: "customized", label: p.filters.customized, count: rules.filter((rule) => rule.customized_count > 0).length },
    { value: "off", label: p.filters.off, count: rules.filter((rule) => !rule.default_enabled).length },
    { value: "withdrawn", label: p.filters.withdrawn, count: rules.filter((rule) => !rule.is_active).length },
  ];

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3">
        <div className="relative flex-1 min-w-[240px]">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input value={search} onChange={(e) => setSearch(e.target.value)} placeholder={p.searchPlaceholder} className="pl-9" />
        </div>
        <div className="flex flex-wrap gap-1.5">
          {filters.map((item) => (
            <Button
              key={item.value}
              variant={filter === item.value ? "default" : "outline"}
              size="sm"
              className="h-9"
              onClick={() => setFilter(item.value)}
            >
              {item.label} ({item.count})
            </Button>
          ))}
        </div>
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-20">
          <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
        </div>
      ) : error ? (
        <div className="flex flex-col items-center justify-center text-center py-16 px-6 bg-destructive/10 border border-destructive/20 rounded-xl">
          <AlertCircle className="w-8 h-8 text-destructive mb-3" />
          <p className="text-base font-semibold text-destructive">{error}</p>
          <Button variant="outline" size="sm" onClick={refetch} className="mt-4">
            {t.common.retry}
          </Button>
        </div>
      ) : visible.length === 0 ? (
        <div className="flex flex-col items-center justify-center text-center py-20 px-6 bg-card border border-border rounded-xl">
          <SlidersHorizontal className="w-8 h-8 text-primary mb-3" />
          <p className="text-base font-semibold text-foreground">{p.empty}</p>
        </div>
      ) : (
        (data?.categories ?? [])
          .map((category) => ({ category, items: visible.filter((rule) => rule.category === category.value) }))
          .filter(({ items }) => items.length > 0)
          .map(({ category, items }) => (
            <div key={category.value} className="space-y-2">
              <h2 className="text-sm font-semibold text-foreground">
                {category.label} <span className="text-muted-foreground font-medium">· {items.length}</span>
              </h2>
              <div className="bg-card border border-border rounded-xl divide-y divide-border">
                {items.map((rule) => {
                  const severity = severityOf(rule);
                  return (
                    <button
                      key={rule.key}
                      type="button"
                      onClick={() => setSelectedKey(rule.key)}
                      className={`w-full text-left px-4 py-3 hover:bg-muted/40 transition-colors ${rule.is_active ? "" : "opacity-60"}`}
                    >
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="text-sm font-semibold text-foreground">{rule.name}</span>
                            {!rule.is_active && <Badge variant="destructive" className="text-[10px]">{p.withdrawn}</Badge>}
                            <Badge variant="outline" className="text-[10px]">{rule.default_enabled ? p.defaultOn : p.defaultOff}</Badge>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{rule.condition}</p>
                          <div className="flex flex-wrap items-center gap-1.5 mt-2">
                            <Badge
                              variant="outline"
                              className="text-[10px] font-semibold"
                              style={severity?.color ? { color: severity.color, borderColor: `${severity.color}55`, backgroundColor: `${severity.color}14` } : undefined}
                            >
                              {rule.sets_own_severity ? p.severityByCase : severity?.label ?? rule.default_severity}
                            </Badge>
                            <Badge variant="outline" className={`text-[10px] ${channelClass(rule.channels.mobile_push)}`}>{p.channels.mobile}</Badge>
                            <Badge variant="outline" className={`text-[10px] ${channelClass(rule.channels.fleet_push)}`}>{p.channels.fleet}</Badge>
                            <Badge variant="outline" className={`text-[10px] ${channelClass(rule.channels.email)}`}>
                              {p.channels.email}
                              {rule.channels.email
                                ? ` · ${data?.digest_frequencies.find((option) => option.value === rule.channels.digest_frequency)?.label ?? rule.channels.digest_frequency}`
                                : ""}
                            </Badge>
                          </div>
                        </div>
                        {rule.customized_count > 0 && (
                          <div className="shrink-0 flex flex-col items-end gap-1 text-[11px] text-muted-foreground">
                            <span className="flex items-center gap-1 font-medium">
                              <Users className="w-3.5 h-3.5" />
                              {p.customized(rule.customized_count)}
                            </span>
                            {rule.disabled_count > 0 && <span>{p.disabledBy(rule.disabled_count)}</span>}
                          </div>
                        )}
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          ))
      )}

      <AnomalyRuleSheet
        ruleKey={selectedKey}
        severities={data?.severities ?? []}
        digestFrequencies={data?.digest_frequencies ?? []}
        onClose={() => setSelectedKey(null)}
        onChanged={refetch}
      />
    </div>
  );
}