"use client";

import { useMemo, useState } from "react";
import {
  Search,
  Filter,
  ChevronDown,
  Cable,
  Loader2,
  Settings,
  AlertCircle,
  Link2,
} from "lucide-react";
import Link from "next/link";
import { ROUTES } from "@/shared/constants";
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 { env } from "@/infrastructure/config/env";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/presentation/components/ui/collapsible";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/presentation/components/ui/select";
import { useDebounce } from "@/presentation/hooks/use-debounce";
import { IntegrationDetailSheet } from "./integration-detail-sheet";

const CATEGORIES = [
  "fuel_cards",
  "telepeage",
  "electric_recharge",
  "accounting",
  "leasing_companies",
  "telematics",
  "insurance",
  "payroll",
  "expenses",
];

export function IntegrationsList() {
  const t = useT();
  const container = useRepositories();

  const [search, setSearch] = useState("");
  const [status, setStatus] = useState<"all" | "enabled" | "disabled">("all");
  const [category, setCategory] = useState<string>("all");
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const debouncedSearch = useDebounce(search, 300);

  const params = useMemo(() => {
    const p: Record<string, any> = {};
    if (debouncedSearch.trim()) {
      p.search = debouncedSearch.trim();
    }
    if (status === "enabled") {
      p.enabled = true;
    } else if (status === "disabled") {
      p.enabled = false;
    }
    if (category !== "all") {
      p.category = category;
    }
    return p;
  }, [debouncedSearch, status, category]);

  const { data: integrations, loading, error, refetch } = useApiQuery(
    () => container.integrationRepository.findAll(params),
    { deps: [params] }
  );

  const totalCount = integrations?.length ?? 0;

  usePageHeader(
    t.pages.integrations.title,
    t.pages.integrations.subtitle(totalCount)
  );

  const hasActiveFilters = status !== "all" || category !== "all";

  const resetFilters = () => {
    setStatus("all");
    setCategory("all");
  };

  const getMethodBadgeStyles = (method: string) => {
    switch (method) {
      case "oauth":
        return "bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-500/10 dark:text-purple-400 dark:border-purple-500/20";
      case "api":
        return "bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-500/10 dark:text-sky-400 dark:border-sky-500/20";
      case "sftp":
        return "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20";
      default:
        return "bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700";
    }
  };

  return (
    <div className="space-y-4">
      {/* Search + Action Bar */}
      <div className="flex items-center gap-3">
        <div className="relative flex-1">
          <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={t.pages.integrations.searchPlaceholder}
            className="pl-9"
          />
        </div>
        <Badge variant="secondary" className="shrink-0 py-1.5 px-3">
          {t.pages.integrations.results(totalCount)}
        </Badge>
        <Link href={ROUTES.integrationConnections} passHref>
          <Button variant="default" className="shrink-0 gap-2">
            <Link2 className="w-4 h-4" />
            {t.nav.integrationConnections}
          </Button>
        </Link>
      </div>

      {/* Filters Collapsible */}
      <Collapsible open={filtersOpen} onOpenChange={setFiltersOpen}>
        <CollapsibleTrigger asChild>
          <Button variant="outline" size="sm" className="h-9">
            <Filter className="w-4 h-4 mr-2" />
            {t.pages.integrations.filters.title}
            <ChevronDown
              className={`w-4 h-4 ml-2 transition-transform duration-200 ${
                filtersOpen ? "rotate-180" : ""
              }`}
            />
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="mt-3 p-4 bg-card border border-border rounded-xl flex flex-wrap items-end gap-4 shadow-sm">
            {/* Status Filter */}
            <div className="flex flex-col gap-1.5">
              <span className="text-[11px] font-medium text-muted-foreground leading-none">
                {t.pages.integrations.filters.status}
              </span>
              <Select
                value={status}
                onValueChange={(v) => setStatus(v as any)}
              >
                <SelectTrigger className="h-9 w-44 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">
                    {t.pages.integrations.filters.allStatuses}
                  </SelectItem>
                  <SelectItem value="enabled">
                    {t.pages.integrations.statusLabels.enabled}
                  </SelectItem>
                  <SelectItem value="disabled">
                    {t.pages.integrations.statusLabels.disabled}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Category Filter */}
            <div className="flex flex-col gap-1.5">
              <span className="text-[11px] font-medium text-muted-foreground leading-none">
                {t.pages.integrations.filters.category}
              </span>
              <Select
                value={category}
                onValueChange={(v) => setCategory(v)}
              >
                <SelectTrigger className="h-9 w-48 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">
                    {t.pages.integrations.filters.allCategories}
                  </SelectItem>
                  {CATEGORIES.map((c) => (
                    <SelectItem key={c} value={c}>
                      {t.pages.integrations.categories[c] ?? c}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Reset Filter Button */}
            {hasActiveFilters && (
              <Button variant="ghost" size="sm" onClick={resetFilters} className="h-9">
                {t.pages.integrations.filters.reset}
              </Button>
            )}
          </div>
        </CollapsibleContent>
      </Collapsible>

      {/* Main Grid Content */}
      {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>
      ) : totalCount === 0 ? (
        <div className="flex flex-col items-center justify-center text-center py-20 px-6 bg-card border border-border rounded-xl">
          <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
            <Cable className="w-8 h-8 text-primary" />
          </div>
          <p className="text-base font-semibold text-foreground">
            {t.pages.integrations.empty}
          </p>
          <p className="text-sm text-muted-foreground mt-1 max-w-xs">
            {t.pages.integrations.emptyHint}
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {integrations?.map((integration) => {
            const logoSrc = integration.logo
              ? `${env.backendOrigin}/${integration.logo}`
              : null;

            return (
              <div
                key={integration.id}
                onClick={() => setSelectedId(integration.id)}
                className="group bg-card rounded-xl border border-border hover:border-primary/50 hover:shadow-md cursor-pointer transition-all duration-200 p-5 flex flex-col justify-between h-[180px] hover:-translate-y-0.5"
              >
                {/* Header: Logo, Name & Status */}
                <div className="flex items-start justify-between gap-3">
                  <div className="flex items-center gap-3 min-w-0">
                    <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center border border-border shrink-0 overflow-hidden shadow-inner">
                      {logoSrc ? (
                        <img
                          src={logoSrc}
                          alt={integration.name}
                          className="w-full h-full object-contain p-1"
                          onError={(e) => {
                            // Fallback if image fails to load
                            e.currentTarget.style.display = "none";
                            e.currentTarget.parentElement?.classList.add("bg-muted");
                          }}
                        />
                      ) : (
                        <Cable className="w-5 h-5 text-muted-foreground" />
                      )}
                    </div>
                    <div className="min-w-0">
                      <h3 className="font-semibold text-sm text-foreground truncate group-hover:text-primary transition-colors">
                        {integration.name}
                      </h3>
                    </div>
                  </div>

                  {/* Status Badge */}
                  <Badge
                    variant="outline"
                    className={`text-[10px] font-semibold px-2 py-0.5 border shrink-0 transition-colors ${
                      integration.enabled
                        ? "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20"
                        : "bg-slate-50 text-slate-500 border-slate-200 dark:bg-slate-800/50 dark:text-slate-400 dark:border-slate-800"
                    }`}
                  >
                    {integration.enabled
                      ? t.pages.integrations.statusLabels.enabled
                      : t.pages.integrations.statusLabels.disabled}
                  </Badge>
                </div>

                {/* Description */}
                <p className="text-xs text-muted-foreground line-clamp-2 mt-2 leading-relaxed">
                  {integration.description || "—"}
                </p>

                {/* Footer: Details & Connection Count */}
                <div className="mt-4 pt-3 border-t border-border/60 flex items-center justify-between gap-2 flex-wrap">
                  <div className="flex items-center gap-1.5 flex-wrap">
                    {/* Connection Method Badge */}
                    <Badge
                      variant="outline"
                      className={`text-[10px] px-1.5 py-0 h-5 font-medium border capitalize ${getMethodBadgeStyles(
                        integration.connection_method
                      )}`}
                    >
                      {t.pages.integrations.connectionMethodLabels[
                        integration.connection_method
                      ] ?? integration.connection_method}
                    </Badge>

                    {/* Category Badge */}
                    <Badge
                      variant="secondary"
                      className="text-[10px] px-1.5 py-0 h-5 font-normal bg-muted text-muted-foreground border-transparent"
                    >
                      {t.pages.integrations.categories[integration.category] ??
                        integration.category}
                    </Badge>
                  </div>

                  {/* Connections count Badge */}
                  <div className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground bg-muted/50 dark:bg-muted/30 px-2 py-0.5 rounded border border-border/40 shrink-0">
                    <Settings className="w-3.5 h-3.5 text-muted-foreground animate-none" />
                    <span>
                      {t.pages.integrations.connectionsCount(
                        integration.integration_connections_count
                      )}
                    </span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Detail sidebar sheet */}
      <IntegrationDetailSheet
        integrationId={selectedId}
        onClose={() => setSelectedId(null)}
        onChanged={refetch}
      />
    </div>
  );
}