"use client";

import { useState } from "react";
import { PageHeader } from "@/components/page-header";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { toast } from "sonner";
import { UserIcon, BanknoteIcon, MailIcon, SaveIcon, SendIcon, CheckCheckIcon, ImagePlusIcon, ReplyIcon, ShieldAlert } from "lucide-react";
import { FileUploader } from "@/components/ui/file-uploader";
import { updateUser, changeUserPassword } from "@/app/actions/users";
import { sendMessage, markMessageRead } from "@/app/actions/messages";
import { useRouter } from "next/navigation";
import { format } from "date-fns-jalali";

const ROLE_MAP: Record<string, string> = {
  ADMIN: "مدیر سیستم",
  CASHIER: "صندوق‌دار",
  SELLER: "سالن‌کار",
  ACCOUNTANT: "حسابدار",
  DELIVERY: "پیک رستوران",
  CHEF: "آشپز",
  ASSISTANT_CHEF: "کمک آشپز",
  WORKER: "کارگر",
};

export default function ProfileClient({ staff, allStaff }: { staff: any, allStaff: any[] }) {
  const router = useRouter();

  // Personal Info State
  const [formData, setFormData] = useState({
      fullName: staff.fullName || "",
      phone: staff.phone || "",
      avatarUrl: staff.avatarUrl || ""
  });
  const [loading, setLoading] = useState(false);

  // Message State
  const [isMessageModalOpen, setIsMessageModalOpen] = useState(false);
  const [msgReceiverId, setMsgReceiverId] = useState("");
  const [msgContent, setMsgContent] = useState("");
  const [msgSending, setMsgSending] = useState(false);

  // Password State
  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
  const [passData, setPassData] = useState({ oldPass: "", newPass: "", confirmPass: "" });
  const [passLoading, setPassLoading] = useState(false);

  const handleUpdateInfo = async (e: React.FormEvent) => {
      e.preventDefault();
      setLoading(true);
      const res = await updateUser(staff.id, { 
          username: staff.username, 
          role: staff.role, 
          isActive: staff.isActive, 
          ...formData 
      });
      if (res.success) {
          toast.success("اطلاعات پروفایل شما با موفقیت بروزرسانی شد.");
          router.refresh();
      } else {
          toast.error(res.error);
      }
      setLoading(false);
  };

  const handleSendMessage = async (e: React.FormEvent) => {
      e.preventDefault();
      if (!msgReceiverId || !msgContent.trim()) return;

      setMsgSending(true);
      const res = await sendMessage(msgReceiverId, msgContent);
      if (res.success) {
          toast.success("پیام شما با موفقیت ارسال شد.");
          setIsMessageModalOpen(false);
          setMsgContent("");
          setMsgReceiverId("");
          router.refresh();
      } else {
          toast.error(res.error);
      }
      setMsgSending(false);
  };

  const handleReadMessage = async (msgId: string) => {
      await markMessageRead(msgId);
      router.refresh();
  };

  const handleReply = (senderId: string) => {
      setMsgReceiverId(senderId);
      setIsMessageModalOpen(true);
  };

  const handleChangePassword = async (e: React.FormEvent) => {
      e.preventDefault();
      if (passData.newPass.length < 5) return toast.error("رمز عبور باید حداقل ۵ کاراکتر باشد");
      if (passData.newPass !== passData.confirmPass) return toast.error("رمز جدید و تکرار آن مطابقت ندارند");
      
      setPassLoading(true);
      const res = await changeUserPassword(staff.id, passData.oldPass, passData.newPass);
      if (res.success) {
          toast.success("رمز عبور با موفقیت تغییر یافت");
          setPassData({ oldPass: "", newPass: "", confirmPass: "" });
          setIsPasswordModalOpen(false);
      } else {
          toast.error(res.error);
      }
      setPassLoading(false);
  };

  return (
    <div className="flex flex-col h-full overflow-y-auto">
      <PageHeader
        title="پروفایل من"
        subtitle="مدیریت اطلاعات شخصی و امنیت"
        icon={<UserIcon className="w-4 h-4" />}
      />

      <div className="flex-1 p-4 lg:p-8 max-w-5xl w-full mx-auto space-y-6">
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card className="md:col-span-2 relative overflow-hidden bg-gradient-to-br from-indigo-500/10 via-background to-background border-indigo-500/20 shadow-md">
            <div className="absolute top-0 left-0 w-32 h-32 bg-indigo-500/10 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2 pointer-events-none"></div>
            <CardHeader className="pb-4 relative z-10 flex flex-row items-center gap-5 space-y-0">
               <div className="relative shrink-0">
                 {staff.avatarUrl ? (
                    <img src={staff.avatarUrl} alt={staff.fullName} className="w-20 h-20 rounded-2xl object-cover ring-2 ring-indigo-500/30 shadow-lg" />
                 ) : (
                    <div className="w-20 h-20 rounded-2xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center font-black text-3xl ring-2 ring-indigo-500/30 shadow-lg">
                       {staff.fullName ? staff.fullName.substring(0, 1) : "ت"}
                    </div>
                 )}
                 <div className="absolute -bottom-2 -right-2 bg-emerald-500 w-4 h-4 rounded-full border-2 border-background shadow-sm"></div>
               </div>
               <div className="flex-1">
                  <CardTitle className="text-2xl font-black mb-1 text-foreground">{staff.fullName || staff.username}</CardTitle>
                  <CardDescription className="text-sm font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 opacity-90">
                      <ShieldAlert className="w-3.5 h-3.5" /> نقش سیستمی: {ROLE_MAP[staff.role]}
                  </CardDescription>
                  <div className="text-xs font-sans font-medium text-muted-foreground mt-2 bg-muted/60 dark:bg-muted/40 inline-flex items-center px-2 py-1 rounded-md">عضویت از {format(new Date(staff.createdAt), "yyyy/MM/dd")}</div>
               </div>
            </CardHeader>
          </Card>
          <Card className="relative overflow-hidden bg-gradient-to-br from-emerald-500/10 via-background to-background border-emerald-500/20 shadow-md flex flex-col justify-center text-center group">
            <div className="absolute -right-4 -bottom-4 w-24 h-24 bg-emerald-500/10 rounded-full blur-2xl group-hover:bg-emerald-500/20 transition-all pointer-events-none"></div>
            <CardContent className="p-6 relative z-10">
               <div className="w-12 h-12 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full flex items-center justify-center mb-3 mx-auto shadow-inner">
                   <MailIcon className="w-6 h-6" />
               </div>
               <div className="text-xs text-muted-foreground font-medium mb-1">پیام‌های خوانده نشده</div>
               <div className="text-4xl font-black font-sans tracking-tighter text-emerald-600 dark:text-emerald-400 drop-shadow-sm">{staff.receivedMessages?.filter((m:any) => !m.isRead).length || 0}</div>
            </CardContent>
          </Card>
        </div>

        <Tabs defaultValue="personal" className="mt-8">
            <TabsList className="bg-muted">
                <TabsTrigger value="personal" className="gap-2"><UserIcon className="w-4 h-4" /> اطلاعات شخصی</TabsTrigger>
                <TabsTrigger value="messages" className="gap-2"><MailIcon className="w-4 h-4" /> صندوق پیام‌ها</TabsTrigger>
                <TabsTrigger value="payslips" className="gap-2"><BanknoteIcon className="w-4 h-4" /> فیش‌های حقوقی</TabsTrigger>
            </TabsList>
            
            <TabsContent value="personal" className="mt-4">
               <Card>
                  <CardHeader>
                     <CardTitle>ویرایش مشخصات شخصی</CardTitle>
                  </CardHeader>
                  <CardContent>
                     <form onSubmit={handleUpdateInfo} className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div className="space-y-2">
                            <Label>نام و نام خانوادگی نمایش داده شده</Label>
                            <Input value={formData.fullName} onChange={e=>setFormData({...formData, fullName: e.target.value})} placeholder="مثلاً: علی رضایی" />
                        </div>
                        <div className="space-y-2">
                            <Label>شماره موبایل ارتباطی</Label>
                            <Input className="text-left font-sans" style={{direction: "ltr"}} value={formData.phone} onChange={e=>setFormData({...formData, phone: e.target.value})} />
                        </div>
                        <div className="space-y-2 md:col-span-2 mt-4 pt-4 border-t border-dashed">
                            <Label className="font-bold flex gap-2 items-center"><ImagePlusIcon className="w-4 h-4"/> تصویر پروفایل (آواتار)</Label>
                            <div className="space-y-4 mt-2 max-w-sm">
                               <FileUploader 
                                  label=""
                                  defaultImage={formData.avatarUrl}
                                  onUploadSuccess={(url) => setFormData({...formData, avatarUrl: url})}
                               />
                               <p className="text-[10px] text-muted-foreground">یک تصویر مربع انتخاب کنید. به‌طور خودکار روی سرور آپلود و آدرس آن ذخیره می‌شود.</p>
                            </div>
                        </div>
                        <div className="col-span-full pt-4 border-t mt-4 flex justify-between items-center gap-4 flex-wrap">
                            <Button type="button" variant="outline" onClick={() => setIsPasswordModalOpen(true)} className="text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-900 bg-amber-50 dark:bg-amber-950/30 hover:bg-amber-100 dark:hover:bg-amber-900/50">
                                تغییر رمز عبور ورود
                            </Button>
                            <Button type="submit" disabled={loading} className="bg-indigo-600 hover:bg-indigo-700 text-white shadow-sm">
                                <SaveIcon className="w-4 h-4 ml-2" /> ذخیره اطلاعات شخصی
                            </Button>
                        </div>
                     </form>
                  </CardContent>
               </Card>
            </TabsContent>

            <TabsContent value="messages" className="mt-4">
               <Card>
                  <CardHeader className="flex flex-row items-center justify-between">
                     <div>
                        <CardTitle>پیام‌های داخلی پرسنل</CardTitle>
                        <CardDescription>ارتباط و هماهنگی درون‌سیستمی با سایر کاربران</CardDescription>
                     </div>
                     <Dialog open={isMessageModalOpen} onOpenChange={setIsMessageModalOpen}>
                        <DialogTrigger asChild>
                           <Button className="bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm"><SendIcon className="w-4 h-4 ml-2" /> ارسال پیام جدید</Button>
                        </DialogTrigger>
                        <DialogContent>
                           <DialogHeader><DialogTitle>ارسال پیام به همکار</DialogTitle></DialogHeader>
                           <form onSubmit={handleSendMessage} className="space-y-4 pt-4">
                              <div className="space-y-2">
                                 <Label>گیرنده پیام</Label>
                                 <Select value={msgReceiverId} onValueChange={setMsgReceiverId}>
                                    <SelectTrigger><SelectValue placeholder="انتخاب پرسنل..." /></SelectTrigger>
                                    <SelectContent>
                                        {allStaff.map(s => (
                                            <SelectItem key={s.id} value={s.id.toString()}>{s.fullName || `کاربر ${s.id}`} ({ROLE_MAP[s.role]})</SelectItem>
                                        ))}
                                    </SelectContent>
                                 </Select>
                              </div>
                              <div className="space-y-2">
                                 <Label>متن پیام</Label>
                                 <Textarea rows={4} value={msgContent} onChange={e=>setMsgContent(e.target.value)} required placeholder="متن پیام خود را بنویسید..." />
                              </div>
                              <Button type="submit" disabled={msgSending || !msgReceiverId} className="w-full">ارسال پیام</Button>
                           </form>
                        </DialogContent>
                     </Dialog>
                  </CardHeader>
                  <CardContent>
                     <div className="space-y-8">
                        <div>
                           <h3 className="text-sm font-black text-foreground mb-4 flex items-center gap-2"><MailIcon className="w-4 h-4 text-indigo-500" /> صندوق پیام‌های دریافتی</h3>
                           {staff.receivedMessages?.length === 0 ? <div className="text-muted-foreground text-sm py-4 bg-muted/20 border-dashed border rounded-xl text-center">پیامی دریافت نکرده‌اید.</div> : 
                              <div className="space-y-3">
                                 {staff.receivedMessages?.map((msg:any) => (
                                     <div key={msg.id} className={`p-4 rounded-2xl border relative transition-all ${!msg.isRead ? 'bg-emerald-50/50 dark:bg-emerald-950/20 border-emerald-200 dark:border-emerald-800 shadow-sm' : 'bg-muted/30 border-dashed opacity-80'}`}>
                                         {!msg.isRead && <span className="absolute -top-1 -right-1 w-3 h-3 rounded-full bg-emerald-500 ring-4 ring-emerald-50 dark:ring-emerald-950 animate-bounce"></span>}
                                         <div className="flex justify-between items-center mb-3">
                                             <div className="font-bold text-sm text-indigo-900 dark:text-indigo-200 flex items-center gap-2">
                                                <div className="w-6 h-6 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 rounded-full flex items-center justify-center text-xs">{(msg.sender?.fullName || "ک")[0]}</div>
                                                {msg.sender?.fullName || `کاربر ${msg.senderId}`} 
                                                <span className="text-[10px] text-muted-foreground font-normal bg-muted px-1.5 py-0.5 rounded">({ROLE_MAP[msg.sender?.role || 'SELLER']})</span>
                                             </div>
                                             <div className="flex items-center gap-2">
                                                 <div className="text-xs font-sans text-muted-foreground mr-2 font-medium">{format(new Date(msg.createdAt), "yyyy/MM/dd HH:mm")}</div>
                                                 <Button variant="ghost" size="sm" onClick={() => handleReply(msg.senderId)} className="h-7 px-2.5 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/40 rounded-lg"><ReplyIcon className="w-3.5 h-3.5 ml-1.5" />پاسخ</Button>
                                             </div>
                                         </div>
                                         <div className="text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed">{msg.content}</div>
                                         {!msg.isRead && (
                                            <Button variant="ghost" size="sm" onClick={()=>handleReadMessage(msg.id)} className="mt-4 text-emerald-700 dark:text-emerald-400 h-8 px-3 hover:bg-emerald-100 dark:hover:bg-emerald-900/40 rounded-lg">
                                               <CheckCheckIcon className="w-4 h-4 ml-1.5" /> برچسب خوانده شده
                                            </Button>
                                         )}
                                     </div>
                                 ))}
                              </div>
                           }
                        </div>

                        <div className="pt-4 border-t">
                           <h3 className="text-sm font-bold text-foreground mb-4 flex items-center gap-2 opacity-80"><SendIcon className="w-4 h-4 text-slate-400" /> پیام‌های ارسالی شما</h3>
                           {staff.sentMessages?.length === 0 ? <div className="text-muted-foreground text-sm py-4">تا کنون پیامی ارسال نکرده‌اید.</div> : 
                              <div className="space-y-3 opacity-90">
                                 {staff.sentMessages?.map((msg:any) => (
                                     <div key={msg.id} className={`p-4 rounded-xl border bg-muted/10`}>
                                         <div className="flex justify-between items-center mb-2">
                                             <div className="font-bold text-xs text-foreground flex items-center gap-1.5 border bg-background px-2 py-1 rounded-md shadow-sm">
                                                <UserIcon className="w-3 h-3 text-muted-foreground" />
                                                ارسال به: {msg.receiver?.fullName || `کاربر ${msg.receiverId}`}
                                             </div>
                                             <div className="text-[10px] font-sans text-muted-foreground flex items-center gap-2 font-medium">
                                                 {format(new Date(msg.createdAt), "yyyy/MM/dd HH:mm")} 
                                                 {msg.isRead ? <CheckCheckIcon className="w-4 h-4 text-blue-500" /> : <CheckCheckIcon className="w-4 h-4 text-slate-300 dark:text-slate-600" />}
                                             </div>
                                         </div>
                                         <div className="text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed pr-1">{msg.content}</div>
                                     </div>
                                 ))}
                              </div>
                           }
                        </div>
                     </div>
                  </CardContent>
               </Card>
            </TabsContent>

            <TabsContent value="payslips" className="mt-4">
               <Card>
                  <CardHeader>
                     <CardTitle>بایگانی فیش‌های حقوقی من</CardTitle>
                  </CardHeader>
                  <CardContent>
                     {staff.payslips?.length === 0 ? (
                        <div className="text-center py-8 text-muted-foreground border-2 border-dashed rounded-xl bg-muted/10">هنوز فیش حقوقی در سیستم برای شما صادر نشده است.</div>
                     ) : (
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                           {staff.payslips?.map((p:any) => (
                               <div key={p.id} className="border p-5 rounded-2xl shadow-sm bg-gradient-to-b from-card to-muted/20 flex flex-col justify-between hover:shadow-md transition-shadow relative overflow-hidden group">
                                  <div className="flex justify-between items-center border-b border-dashed pb-3 mb-4">
                                     <div className="flex items-center gap-2">
                                         <div className="bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 w-8 h-8 rounded-lg flex items-center justify-center font-bold shadow-sm">
                                             <BanknoteIcon className="w-4 h-4" />
                                         </div>
                                         <span className="font-bold text-foreground">ماه {p.month}</span>
                                     </div>
                                     <span className="font-sans font-medium text-xs bg-muted px-2 py-1 rounded-md text-muted-foreground">سال {p.year}</span>
                                  </div>
                                  <div className="space-y-3 mb-5 flex-1 relative z-10">
                                      <div className="flex justify-between text-xs font-medium text-muted-foreground items-center">
                                          <span>وضعیت تسویه:</span> 
                                          <span className={`font-bold px-2 py-0.5 rounded-md ${p.status === 'PAID' ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' : 'bg-amber-500/10 text-amber-600 dark:text-amber-400'}`}>
                                              {p.status === 'PAID' ? 'پرداخت شده' : 'پیشنویس / معلق'}
                                          </span>
                                      </div>
                                      <div className="flex justify-between text-xs text-muted-foreground items-center pt-2"><span>مجموع درآمد:</span> <span className="font-sans font-semibold text-foreground">{p.totalEarnings.toLocaleString("fa-IR")}</span></div>
                                      <div className="flex justify-between text-xs items-center">
                                          <span className="text-rose-500/80 dark:text-rose-400/80">کسورات ماه:</span> 
                                          <span className="font-sans font-semibold text-rose-500 dark:text-rose-400">{p.totalDeductions.toLocaleString("fa-IR")}</span>
                                      </div>
                                  </div>
                                  <div className="bg-indigo-500/5 border border-indigo-500/10 p-3 rounded-xl flex justify-between items-center relative overflow-hidden">
                                      {p.status === 'PAID' && <div className="absolute -right-4 -top-4 text-emerald-500/10 dark:text-emerald-500/5 opacity-50 rotate-12 transition-transform group-hover:scale-110"><CheckCheckIcon className="w-16 h-16" /></div>}
                                      <span className="text-xs font-bold text-indigo-700 dark:text-indigo-300 relative z-10">خالص پرداختی:</span>
                                      <span className="font-sans font-black tracking-tighter text-indigo-700 dark:text-indigo-300 text-xl relative z-10">{p.netPayable.toLocaleString("fa-IR")}</span>
                                  </div>
                               </div>
                           ))}
                        </div>
                     )}
                  </CardContent>
               </Card>
            </TabsContent>
        </Tabs>

        <Dialog open={isPasswordModalOpen} onOpenChange={setIsPasswordModalOpen}>
            <DialogContent>
                <DialogHeader><DialogTitle>تغییر رمز عبور حساب کاربری</DialogTitle></DialogHeader>
                <form onSubmit={handleChangePassword} className="space-y-4 pt-4">
                    <div className="space-y-2">
                        <Label>رمز عبور فعلی</Label>
                        <Input type="password" value={passData.oldPass} onChange={e=>setPassData({...passData, oldPass: e.target.value})} required className="font-sans" dir="ltr" />
                    </div>
                    <div className="space-y-2">
                        <Label>رمز عبور جدید</Label>
                        <Input type="password" value={passData.newPass} onChange={e=>setPassData({...passData, newPass: e.target.value})} required className="font-sans" dir="ltr" />
                    </div>
                    <div className="space-y-2">
                        <Label>تکرار رمز عبور جدید</Label>
                        <Input type="password" value={passData.confirmPass} onChange={e=>setPassData({...passData, confirmPass: e.target.value})} required className="font-sans" dir="ltr" />
                    </div>
                    <Button type="submit" disabled={passLoading} className="w-full">ذخیره رمز جدید</Button>
                </form>
            </DialogContent>
        </Dialog>

      </div>
    </div>
  );
}