"use client";

import { useRouter } from "next/navigation";
import { formatDistanceToNow } from "date-fns";
import { User, MessageSquare, ExternalLink, Package2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useState } from "react";
import { getStatusBadge } from "../utils";
import { PANEL_SETTING } from "@/config/panelSetting";

interface UserListProps {
  users: TelegramUser[];
  onRefresh: () => void;
}
interface UserProduct {
  id: string;
  product: {
    plan: string;
    firm: string;
  };
  challengeStatus: string;
}

// Update FilterButtons to accept a generic type for onChange
const FilterButtons = <T extends string>({
  options,
  active,
  onChange,
}: {
  options: { label: string; value: T }[];
  active: T;
  onChange: React.Dispatch<React.SetStateAction<T>>;
}) => (
  <div className="flex gap-2 items-center">
    {options.map(({ label, value }) => (
      <Button key={value} variant={active === value ? "default" : "outline"} size="sm" onClick={() => onChange(value)}>
        {label}
      </Button>
    ))}
  </div>
);

const UserProducts = ({ products }: { products?: UserProduct[] }) => {
  if (!products || products.length === 0) return <span className="text-muted-foreground">-</span>;
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <div className="flex items-center gap-1 cursor-help">
            <Package2 className="h-4 w-4 text-muted-foreground" />
            <span>{products.length}</span>
          </div>
        </TooltipTrigger>
        <TooltipContent className="p-0" side="bottom">
          <div className="p-3 max-w-sm">
            <h4 className="font-medium mb-2">محصولات کاربر</h4>
            <ul className="space-y-2">
              {products.map((product) => (
                <li key={product.id} className="flex items-center justify-between gap-4">
                  <div>
                    <div className="font-medium">{product.product.plan}</div>
                    <div className="text-sm text-muted-foreground">{product.product.firm}</div>
                  </div>
                  <Badge>{getStatusBadge(product.challengeStatus)}</Badge>
                </li>
              ))}
            </ul>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

export default function UserList({ users }: UserListProps) {
  const router = useRouter();
  const [filter, setFilter] = useState<"all" | "withProducts" | "withoutProducts">("all");
  const [respondentFilter, setRespondentFilter] = useState<"all" | "admin" | "ai">("all");

  const filteredUsers = users.filter((user) => {
    if (filter === "withProducts" && (!user.userProducts || user.userProducts.length === 0)) return false;
    if (filter === "withoutProducts" && user.userProducts && user.userProducts.length > 0) return false;
    if (respondentFilter === "admin" && user.respondent !== "admin") return false;
    if (respondentFilter === "ai" && user.respondent === "admin") return false;
    return true;
  });

  return (
    <>
      <div className="mb-4 flex items-center gap-2">
        {PANEL_SETTING.template === "prop_firms" && (
          <FilterButtons
            options={[
              { label: "همه کاربران", value: "all" },
              { label: "کاربران دارای محصول", value: "withProducts" },
              { label: "کاربران بدون محصول", value: "withoutProducts" },
            ]}
            active={filter}
            onChange={setFilter}
          />
        )}
        <FilterButtons
          options={[
            { label: "همه", value: "all" },
            { label: "ادمین", value: "admin" },
            { label: "هوش مصنوعی", value: "ai" },
          ]}
          active={respondentFilter}
          onChange={setRespondentFilter}
        />
      </div>
      {filteredUsers.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-12 text-center">
          <User className="h-12 w-12 text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium">کاربری یافت نشد</h3>
          <p className="text-sm text-muted-foreground mt-1">لطفا عبارت جستجو را تغییر دهید یا صفحه را رفرش کنید.</p>
        </div>
      ) : (
        <Table>
          <TableHeader>
            <TableRow className="*:!text-right">
              <TableHead>کاربر</TableHead>
              <TableHead>شناسه تلگرام</TableHead>
              <TableHead>نوع پاسخگو</TableHead>
              <TableHead>مکالمات</TableHead>
              {PANEL_SETTING.template === "prop_firms" && <TableHead>محصولات</TableHead>}
              <TableHead>آخرین تعامل</TableHead>
              <TableHead>تاریخ ثبت</TableHead>
              <TableHead>عملیات</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredUsers.map((user) => (
              <TableRow key={user.id}>
                <TableCell className="font-medium">
                  <div className="flex items-center gap-2">
                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
                      <User className="h-4 w-4" />
                    </div>
                    <div>
                      <div>
                        {user.firstName} {user.lastName}
                      </div>
                      {user.username && <div className="text-sm text-muted-foreground">@{user.username}</div>}
                    </div>
                  </div>
                </TableCell>
                <TableCell>{user.telegramId}</TableCell>
                <TableCell>{user.respondent === "admin" ? "ادمین" : "هوش مصنوعی"}</TableCell>
                <TableCell>
                  <div className="flex items-center gap-1">
                    <MessageSquare className="h-4 w-4 text-muted-foreground" />
                    <span>{user._count?.conversations || 0}</span>
                  </div>
                </TableCell>
                {PANEL_SETTING.template === "prop_firms" && <TableCell><UserProducts products={user.userProducts} /></TableCell>}
                <TableCell>{formatDistanceToNow(new Date(user.lastInteraction), { addSuffix: true })}</TableCell>
                <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
                <TableCell>
                  <Button onClick={() => router.push(`/dashboard/users/${user.id}`)}>
                    <ExternalLink className="h-4 w-4 mr-2" />
                    مشاهده
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </>
  );
}