"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Loader2, Search, RefreshCw, Users } from "lucide-react";
import { toast } from "sonner";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import UserList from "./components/user-list";
import Pagination from "./components/pagination";


export default function UsersPage() {
  return (
    <Suspense fallback={<div className="container mx-auto py-8"><Loader2 className="h-8 w-8 animate-spin mx-auto" /></div>}>
      <UsersPageContent />
    </Suspense>
  );
}

function UsersPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const [users, setUsers] = useState<TelegramUser[]>([]);
  const [meta, setMeta] = useState<PaginationMeta>({
    total: 0,
    page: 1,
    limit: 10,
    pages: 0,
  });
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState(searchParams.get("search") || "");

  const currentPage = parseInt(searchParams.get("page") || "1");

  const loadUsers = async () => {
    setIsLoading(true);
    try {
      const searchParam = searchQuery ? `&search=${encodeURIComponent(searchQuery)}` : "";
      const res = await fetch(`/api/users?page=${currentPage}&limit=${meta.limit}${searchParam}`);

      if (!res.ok) {
        throw new Error("Failed to fetch users");
      }

      const data = await res.json();
      setUsers(data.users);
      setMeta(data.meta);
    } catch (error) {
      console.error("Error loading users:", error);
      toast.error("Failed to load users");
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    loadUsers();
  }, [currentPage, searchParams]);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    const params = new URLSearchParams();
    params.set("page", "1");
    if (searchQuery) {
      params.set("search", searchQuery);
    }

    router.push(`/dashboard/users?${params.toString()}`);
  };

  const handlePageChange = (page: number) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", page.toString());
    router.push(`/dashboard/users?${params.toString()}`);
  };

  return (
    <div className="container mx-auto py-8">
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="text-2xl flex items-center gap-2">
                <Users className="h-6 w-6" />
                کاربران تلگرام
              </CardTitle>
              <CardDescription>
                کاربرانی را مدیریت کنید که با ربات تلگرام شما تعامل داشته‌اند
              </CardDescription>
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={loadUsers}
              disabled={isLoading}
            >
              {isLoading ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <RefreshCw className="h-4 w-4" />
              )}
              <span className="ml-2">رفرش</span>
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSearch} className="flex gap-2 mb-6">
            <Input
              placeholder="جستجو بر اساس نام کاربری، شناسه یا نام..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="max-w-md"
            />
            <Button type="submit" disabled={isLoading}>
              <Search className="h-4 w-4 mr-2" />
              جستجو
            </Button>
          </form>

          {isLoading ? (
            <div className="space-y-4">
              {Array.from({ length: 5 }).map((_, i) => (
                <Skeleton key={i} className="h-16 w-full" />
              ))}
            </div>
          ) : (
            <UserList users={users} onRefresh={loadUsers} />
          )}
        </CardContent>
        <CardFooter>
          <div className="w-full flex justify-between items-center text-sm text-muted-foreground">
            <div>
              نمایش {users.length} از {meta.total} کاربر
            </div>
            <Pagination
              currentPage={meta.page}
              totalPages={meta.pages}
              onPageChange={handlePageChange}
            />
          </div>
        </CardFooter>
      </Card>
    </div>
  );
}