"use client";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow
} from "@/components/ui/table";
import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
} from "@/components/ui/select";
import Link from "next/link";

interface User {
   id: string;
   firstName?: string;
   username?: string;
   telegramId?: string;
   consultingRequest: string;
   respondent: string;
}

export default function Consulting() {
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);

   useEffect(() => {
       const fetchUsers = async () => {
         try {
           const response = await fetch('/api/users?consulting=yes');
           if (!response.ok) throw new Error('خطا در دریافت درخواست‌های مشاوره');
           const data = await response.json();
           setUsers(data.users);
         } catch (error) {
           console.error("خطا در دریافت درخواست‌های مشاوره:", error);
         } finally {
           setLoading(false);
         }
       };
       
       fetchUsers();
   }, []);

   const handleStatusChange = async (userId: string, field: string, value: string) => {
       try {
           const response = await fetch(`/api/users/${userId}`, {
               method: 'PATCH',
               headers: {
                   'Content-Type': 'application/json',
               },
               body: JSON.stringify({ [field]: value }),
           });

           if (!response.ok) throw new Error('خطا در به‌روزرسانی کاربر');

           setUsers(users.map(user =>
               user.id === userId ? { ...user, [field]: value } : user
           ));
       } catch (error) {
           console.error("خطا در به‌روزرسانی کاربر:", error);
       }
   };

   if (loading) return <div>در حال بارگذاری...</div>;

   return (
       <div className="p-6">
           <h1 className="text-2xl font-bold mb-4">درخواست‌های مشاوره</h1>
           <Card>
               <CardContent className="p-0">
                   <Table>
                       <TableHeader>
                           <TableRow className="*:!text-right">
                               <TableHead>کاربر</TableHead>
                               <TableHead>وضعیت درخواست</TableHead>
                               <TableHead>پاسخ‌دهنده</TableHead>
                               <TableHead>اقدام</TableHead>
                           </TableRow>
                       </TableHeader>
                       <TableBody>
                           {users.map((user) => (
                               <TableRow key={user.id}>
                                   <TableCell>
                                       {user.firstName || user.username || user.telegramId}
                                   </TableCell>
                                   <TableCell>
                                       <Select
                                           defaultValue={user.consultingRequest}
                                           onValueChange={(value) => handleStatusChange(user.id, "consultingRequest", value)}
                                       >
                                           <SelectTrigger className="w-32">
                                               <SelectValue />
                                           </SelectTrigger>
                                           <SelectContent>
                                               <SelectItem value="yes">بله</SelectItem>
                                               <SelectItem value="no">خیر</SelectItem>
                                           </SelectContent>
                                       </Select>
                                   </TableCell>
                                   <TableCell>
                                       <Select
                                           defaultValue={user.respondent}
                                           onValueChange={(value) => handleStatusChange(user.id, "respondent", value)}
                                       >
                                           <SelectTrigger className="w-32">
                                               <SelectValue />
                                           </SelectTrigger>
                                           <SelectContent>
                                               <SelectItem value="ai">هوش مصنوعی</SelectItem>
                                               <SelectItem value="admin">ادمین</SelectItem>
                                           </SelectContent>
                                       </Select>
                                   </TableCell>
                                   <TableCell>
                                       <Link href={`/dashboard/users/${user.id}`}>
                                           <Button variant="outline" size="sm">
                                               مشاهده گفتگو
                                           </Button>
                                       </Link>
                                   </TableCell>
                               </TableRow>
                           ))}
                       </TableBody>
                   </Table>
               </CardContent>
           </Card>
       </div>
   );
}