"use client";
import React, { useState } from "react";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { ResponsiveModal } from "@/components/ui/responsive-modal";
import { Search, Plus, Edit, Trash, Shield, User, Lock, KeyRound } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { createUser, updateUser, deleteUser, changeUserPassword } from "@/app/actions/users";

const ROLE_LABELS: Record<string, string> = {
  ADMIN: "مدیر کل",
  ACCOUNTANT: "حسابدار",
  CASHIER: "صندوق‌دار",
  SELLER: "فروشنده",
  DELIVERY: "پیک",
  WORKER: "کارمند",
};

export default function UsersClient({ initialUsers }: { initialUsers: any[] }) {
  const [users, setUsers] = useState(initialUsers);
  const [searchQuery, setSearchQuery] = useState("");
  
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  
  const [formData, setFormData] = useState({
    username: "",
    fullName: "",
    phone: "",
    role: "SELLER",
    isActive: true,
    password: ""
  });
  
  const [passwordData, setPasswordData] = useState({ newPassword: "" });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const filtered = users.filter(
    (u) => 
      u.username.includes(searchQuery) || 
      (u.fullName && u.fullName.includes(searchQuery)) ||
      (u.phone && u.phone.includes(searchQuery))
  );

  const handleOpenNew = () => {
    setEditingId(null);
    setFormData({ username: "", fullName: "", phone: "", role: "SELLER", isActive: true, password: "" });
    setIsModalOpen(true);
  };

  const handleOpenEdit = (u: any) => {
    setEditingId(u.id);
    setFormData({
      username: u.username,
      fullName: u.fullName || "",
      phone: u.phone || "",
      role: u.role,
      isActive: u.isActive,
      password: ""
    });
    setIsModalOpen(true);
  };

  const handleOpenPassword = (u: any) => {
    setEditingId(u.id);
    setPasswordData({ newPassword: "" });
    setIsPasswordModalOpen(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm("آیا از حذف یا غیرفعال‌سازی این پرسنل مطمئن هستید؟")) return;
    const res = await deleteUser(id);
    if (res.success) {
      toast.success(res.message || "پرسنل حذف/غیرفعال شد");
      if (res.message?.includes("غیرفعال")) {
        setUsers(users.map(u => u.id === id ? { ...u, isActive: false } : u));
      } else {
        setUsers(users.filter((u) => u.id !== id));
      }
    } else {
      toast.error(res.error || "خطا در عملیات");
    }
  };

  const handleSubmit = async () => {
    if (!formData.username) {
      toast.error("نام کاربری (کد پرسنلی) الزامی است");
      return;
    }
    if (!editingId && !formData.password) {
      toast.error("رمز عبور برای کاربر جدید الزامی است");
      return;
    }
    
    setIsSubmitting(true);
    let res;
    if (editingId) {
      res = await updateUser(editingId, formData);
    } else {
      res = await createUser(formData);
    }
    setIsSubmitting(false);

    if (res.success && res.user) {
      toast.success(editingId ? "اطلاعات پرسنل ویرایش شد" : "پرسنل جدید ثبت شد");
      if (editingId) {
        setUsers(users.map(u => u.id === editingId ? res.user : u));
      } else {
        setUsers([res.user, ...users]);
      }
      setIsModalOpen(false);
    } else {
      toast.error(res.error || "خطا در ذخیره اطلاعات");
    }
  };

  const handlePasswordSubmit = async () => {
    if (!passwordData.newPassword || passwordData.newPassword.length < 6) {
      toast.error("رمز عبور جدید باید حداقل 6 کاراکتر باشد");
      return;
    }
    setIsSubmitting(true);
    // As admin, we might bypass old password check or we just update the user's password directly via updateUser
    const res = await updateUser(editingId!, { password: passwordData.newPassword });
    setIsSubmitting(false);
    
    if (res.success) {
      toast.success("رمز عبور با موفقیت تغییر یافت");
      setIsPasswordModalOpen(false);
    } else {
      toast.error(res.error || "خطا در تغییر رمز");
    }
  };

  return (
    <div className="flex flex-col min-h-screen bg-muted/20">
      <PageHeader 
        title="مدیریت پرسنل" 
        actions={[
          { label: "پرسنل جدید", icon: <Plus className="w-4 h-4" />, onClick: handleOpenNew, variant: "default" }
        ]}
      />

      <div className="p-4 md:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto w-full">
        {/* Search */}
        <div className="bg-card border rounded-2xl shadow-sm p-4 flex flex-col sm:flex-row gap-4 items-center justify-between">
          <div className="relative w-full sm:max-w-md">
            <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input 
              placeholder="جستجو نام، کد پرسنلی یا موبایل..." 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pr-10"
            />
          </div>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {filtered.length === 0 ? (
            <div className="col-span-full text-center p-12 bg-card border rounded-2xl border-dashed">
              <User className="w-12 h-12 text-muted-foreground/30 mx-auto mb-4" />
              <p className="text-muted-foreground">هیچ پرسنلی یافت نشد.</p>
            </div>
          ) : (
            filtered.map((u) => (
              <div key={u.id} className={`bg-card border rounded-2xl shadow-sm p-5 flex flex-col transition-all ${!u.isActive ? 'opacity-60' : 'hover:border-indigo-500/30'}`}>
                <div className="flex items-start justify-between mb-4">
                  <div className="flex-1">
                    <h3 className="font-bold text-lg">{u.fullName || 'بدون نام'}</h3>
                    <p className="text-sm text-muted-foreground mt-1 font-sans">{u.username}</p>
                  </div>
                  <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${u.role === 'ADMIN' ? 'bg-indigo-500/10 text-indigo-500' : 'bg-slate-500/10 text-slate-500'}`}>
                    {u.role === 'ADMIN' ? <Shield className="w-5 h-5" /> : <User className="w-5 h-5" />}
                  </div>
                </div>
                
                <div className="space-y-2 mb-6">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">سمت:</span>
                    <span className="font-medium bg-muted px-2 py-0.5 rounded">{ROLE_LABELS[u.role] || u.role}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">موبایل:</span>
                    <span className="font-sans tracking-widest">{u.phone || '-'}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">وضعیت:</span>
                    {u.isActive ? (
                      <span className="text-emerald-600 font-bold">فعال</span>
                    ) : (
                      <span className="text-rose-500 font-bold">غیرفعال</span>
                    )}
                  </div>
                </div>

                <div className="flex items-center justify-end mt-auto pt-4 border-t gap-1">
                  <Button variant="ghost" size="icon" onClick={() => handleOpenPassword(u)} className="h-8 w-8 text-amber-500 hover:bg-amber-500/10 hover:text-amber-600" title="تغییر رمز">
                    <KeyRound className="w-4 h-4" />
                  </Button>
                  <Button variant="ghost" size="icon" onClick={() => handleOpenEdit(u)} className="h-8 w-8 text-blue-500 hover:bg-blue-500/10 hover:text-blue-600" title="ویرایش">
                    <Edit className="w-4 h-4" />
                  </Button>
                  <Button variant="ghost" size="icon" onClick={() => handleDelete(u.id)} className="h-8 w-8 text-rose-500 hover:bg-rose-500/10 hover:text-rose-600" title={u.isActive ? "غیرفعال/حذف" : "حذف کامل"}>
                    <Trash className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      <ResponsiveModal
        open={isModalOpen}
        onOpenChange={setIsModalOpen}
        title={editingId ? "ویرایش پرسنل" : "پرسنل جدید"}
      >
        <div className="space-y-4 p-4">
          <div className="grid grid-cols-2 gap-4">
            <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>
              <Select value={formData.role} onValueChange={(val) => setFormData({ ...formData, role: val })}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ADMIN">مدیر کل</SelectItem>
                  <SelectItem value="ACCOUNTANT">حسابدار</SelectItem>
                  <SelectItem value="CASHIER">صندوق‌دار</SelectItem>
                  <SelectItem value="SELLER">فروشنده</SelectItem>
                  <SelectItem value="DELIVERY">پیک</SelectItem>
                  <SelectItem value="WORKER">کارمند عادی</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>نام کاربری / کد پرسنلی *</Label>
              <Input 
                value={formData.username}
                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                placeholder="مثلا: admin یا 1001"
                className="font-sans text-left"
                dir="ltr"
              />
            </div>
            <div className="space-y-2">
              <Label>شماره موبایل</Label>
              <Input 
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                placeholder="0912..."
                className="font-sans text-left tracking-widest"
                dir="ltr"
              />
            </div>
          </div>

          {!editingId && (
            <div className="space-y-2">
              <Label>رمز عبور *</Label>
              <Input 
                type="password"
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                className="font-sans text-left"
                dir="ltr"
              />
            </div>
          )}

          <div className="flex items-center justify-between p-3 border rounded-xl bg-muted/30">
            <div className="space-y-0.5">
              <Label className="text-base">وضعیت حساب کاربری</Label>
              <p className="text-xs text-muted-foreground">آیا این کاربر مجاز به ورود به سیستم است؟</p>
            </div>
            <Switch 
              checked={formData.isActive}
              onCheckedChange={(c) => setFormData({ ...formData, isActive: c })}
            />
          </div>

          <div className="pt-4">
            <Button onClick={handleSubmit} disabled={isSubmitting} className="w-full">
              {isSubmitting ? "در حال ذخیره..." : "ذخیره پرسنل"}
            </Button>
          </div>
        </div>
      </ResponsiveModal>

      <ResponsiveModal
        open={isPasswordModalOpen}
        onOpenChange={setIsPasswordModalOpen}
        title="تغییر رمز عبور"
      >
        <div className="space-y-4 p-4">
          <div className="space-y-2">
            <Label>رمز عبور جدید</Label>
            <Input 
              type="password"
              value={passwordData.newPassword}
              onChange={(e) => setPasswordData({ newPassword: e.target.value })}
              className="font-sans text-left"
              dir="ltr"
              placeholder="حداقل ۶ کاراکتر"
            />
          </div>
          <div className="pt-4">
            <Button onClick={handlePasswordSubmit} disabled={isSubmitting} className="w-full">
              {isSubmitting ? "در حال تغییر..." : "تغییر رمز عبور"}
            </Button>
          </div>
        </div>
      </ResponsiveModal>
    </div>
  );
}