"use client";

import { useMemo, useState } from "react";
import {
  Search,
  Filter,
  ChevronDown,
  Loader2,
  AlertCircle,
  Link2,
  ArrowLeft,
  Settings,
} from "lucide-react";
import Link from "next/link";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { usePageHeader } from "@/presentation/hooks/use-page-header";
import { useT, useLocale } 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 { SearchableSelect } from "@/presentation/components/ui/searchable-select";
import { useDebounce } from "@/presentation/hooks/use-debounce";
import { formatDateTime } from "@/shared/lib/format-date";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/presentation/components/ui/table";
import { IntegrationConnectionDetailSheet } from "./integration-connection-detail-sheet";

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

const STATUSES = ["connected", "disconnected", "requested", "rejected", "error"];

export function IntegrationConnectionsList() {
  const t = useT();
  const locale = useLocale();
  const container = useRepositories();

  const [search, setSearch] = useState("");
  const [status, setStatus] = useState<string>("all");
  const [companyId, setCompanyId] = useState<string>("all");
  const [category, setCategory] = useState<string>("all");
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [selectedConnectionId, setSelectedConnectionId] = useState<number | null>(null);

  const debouncedSearch = useDebounce(search, 300);

  // Fetch companies for filtering option dropdown
  const { data: companiesOptions } = useApiQuery(
    () => container.companyRepository.getOptions(),
    { deps: [] }
  );

  const companySelectOptions = useMemo(() => {
    const opts = (companiesOptions || []).map((c) => ({
      value: String(c.value),
      label: c.label,
    }));
    return [{ value: "all", label: t.pages.integrationConnections.filters.allCompanies }, ...opts];
  }, [companiesOptions, t]);

  // Construct query parameters for the endpoint
  const queryParams = useMemo(() => {
    const params: Record<string, any> = {};
    if (status !== "all") {
      params.status = status;
    }
    if (companyId !== "all") {
      params.company_id = Number(companyId);
    }
    if (category !== "all") {
      params.category = category;
    }
    return params;
  }, [status, companyId, category]);

  // Query integration connections from backend
  const {
    data: connectionsData,
    loading,
    error,
    refetch,
  } = useApiQuery(
    () => container.integrationConnectionRepository.findAll(queryParams),
    { deps: [queryParams] }
  );

  // Perform client-side search filtering based on query matches
  const filteredConnections = useMemo(() => {
    const list = connectionsData || [];
    if (!debouncedSearch.trim()) return list;

    const term = debouncedSearch.toLowerCase().trim();
    return list.filter((conn) => {
      const companyName = conn.company?.name?.toLowerCase() || "";
      const companyEmail = conn.company?.email?.toLowerCase() || "";
      const integrationName = conn.integration?.name?.toLowerCase() || "";
      const integrationCode = conn.integration?.code?.toLowerCase() || "";
      const statusLabel = conn.status?.toLowerCase() || "";

      return (
        companyName.includes(term) ||
        companyEmail.includes(term) ||
        integrationName.includes(term) ||
        integrationCode.includes(term) ||
        statusLabel.includes(term)
      );
    });
  }, [connectionsData, debouncedSearch]);

  const totalCount = filteredConnections.length;

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

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

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

  const getStatusBadgeStyles = (statusVal: string) => {
    switch (statusVal) {
      case "connected":
        return "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-400 dark:border-emerald-500/20";
      case "disconnected":
        return "bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700";
      case "requested":
        return "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/40 dark:text-blue-400 dark:border-blue-500/20";
      case "rejected":
        return "bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/40 dark:text-rose-400 dark:border-rose-500/20";
      case "error":
        return "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 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";
    }
  };

  const getStatusLabel = (statusVal: string) => {
    return t.pages.integrationConnections.statusLabels[statusVal] || statusVal;
  };

  return (
    <div className="space-y-4">
      {/* Action and Navigation bar */}
      <div className="flex items-center gap-3 justify-between">
        <div className="flex items-center gap-3 flex-1">
          <Link href="/integrations">
            <Button variant="outline" size="sm" className="h-9 gap-2">
              <ArrowLeft className="w-4 h-4" />
              {t.pages.integrations.title}
            </Button>
          </Link>
          <div className="relative flex-1 max-w-md">
            <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.integrationConnections.searchPlaceholder}
              className="pl-9 h-9"
            />
          </div>
          <Badge variant="secondary" className="shrink-0 py-1.5 px-3">
            {t.pages.integrationConnections.results(totalCount)}
          </Badge>
        </div>
      </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.integrationConnections.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.integrationConnections.filters.status}
              </span>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger className="h-9 w-44 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">
                    {t.pages.integrationConnections.filters.allStatuses}
                  </SelectItem>
                  {STATUSES.map((s) => (
                    <SelectItem key={s} value={s}>
                      {getStatusLabel(s)}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Company Searchable Select Filter */}
            <div className="flex flex-col gap-1.5 min-w-[200px]">
              <SearchableSelect
                label={t.pages.integrationConnections.filters.company}
                options={companySelectOptions}
                value={companyId}
                onValueChange={setCompanyId}
                placeholder={t.pages.integrationConnections.filters.allCompanies}
                searchPlaceholder={t.common?.search || "Rechercher..."}
                triggerClassName="h-9 text-xs"
              />
            </div>

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

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

      {/* Main Connections Table */}
      {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">
            <Link2 className="w-8 h-8 text-primary" />
          </div>
          <p className="text-base font-semibold text-foreground">
            {t.pages.integrationConnections.empty}
          </p>
          <p className="text-sm text-muted-foreground mt-1 max-w-xs">
            {t.pages.integrationConnections.emptyHint}
          </p>
        </div>
      ) : (
        <div className="border border-border rounded-xl bg-card overflow-hidden shadow-sm">
          <Table>
            <TableHeader className="bg-muted/40">
              <TableRow>
                <TableHead>{t.pages.integrationConnections.table.integration}</TableHead>
                <TableHead>{t.pages.integrationConnections.table.company}</TableHead>
                <TableHead>{t.pages.integrationConnections.table.connectedAt}</TableHead>
                <TableHead>{t.pages.integrationConnections.table.lastSync}</TableHead>
                <TableHead>{t.pages.integrationConnections.table.status}</TableHead>
                <TableHead className="text-right">
                  {t.pages.integrationConnections.table.actions}
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredConnections.map((conn) => {
                const logoSrc = conn.integration?.logo
                  ? `${env.backendOrigin}/${conn.integration.logo}`
                  : null;

                return (
                  <TableRow
                    key={conn.id}
                    className="hover:bg-muted/40 cursor-pointer transition-colors"
                    onClick={() => setSelectedConnectionId(conn.id)}
                  >
                    {/* Integration Column */}
                    <TableCell className="align-middle">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded bg-muted flex items-center justify-center border border-border shrink-0 overflow-hidden">
                          {logoSrc ? (
                            <img
                              src={logoSrc}
                              alt={conn.integration?.name || ""}
                              className="w-full h-full object-contain p-1"
                            />
                          ) : (
                            <Link2 className="w-4 h-4 text-muted-foreground" />
                          )}
                        </div>
                        <div>
                          <div className="font-semibold text-foreground">
                            {conn.integration?.name || `ID: ${conn.integration_id}`}
                          </div>
                          {conn.integration?.category && (
                            <div className="text-[10px] text-muted-foreground">
                              {t.pages.integrations.categories[conn.integration.category] ??
                                conn.integration.category}
                            </div>
                          )}
                        </div>
                      </div>
                    </TableCell>

                    {/* Company Column */}
                    <TableCell className="align-middle">
                      <div>
                        <div className="font-medium text-foreground">
                          {conn.company?.name || `ID: ${conn.company_id}`}
                        </div>
                        {conn.company?.email && (
                          <div className="text-xs text-muted-foreground">
                            {conn.company.email}
                          </div>
                        )}
                      </div>
                    </TableCell>

                    {/* Connected At Column */}
                    <TableCell className="text-xs text-muted-foreground align-middle">
                      {conn.connected_at ? formatDateTime(conn.connected_at, locale) : "—"}
                    </TableCell>

                    {/* Last Sync At Column */}
                    <TableCell className="text-xs text-muted-foreground align-middle">
                      {conn.last_sync_at ? formatDateTime(conn.last_sync_at, locale) : "—"}
                    </TableCell>

                    {/* Status Column */}
                    <TableCell className="align-middle">
                      <Badge
                        variant="outline"
                        className={`text-xs font-semibold px-2 py-0.5 rounded ${getStatusBadgeStyles(
                          conn.status
                        )}`}
                      >
                        {getStatusLabel(conn.status)}
                      </Badge>
                    </TableCell>

                    {/* Actions Column */}
                    <TableCell className="text-right align-middle" onClick={(e) => e.stopPropagation()}>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-8 gap-1.5"
                        onClick={() => setSelectedConnectionId(conn.id)}
                      >
                        <Settings className="w-3.5 h-3.5" />
                        {t.pages.integrationConnections.table.viewDetails}
                      </Button>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      )}

      {/* Slide-over Detail Sheet */}
      <IntegrationConnectionDetailSheet
        connectionId={selectedConnectionId}
        onClose={() => setSelectedConnectionId(null)}
        onChanged={refetch}
      />
    </div>
  );
}