"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

import {
  Check,
  ChevronDown,
  Eye,
  EyeOff,
  Pencil,
  Plus,
  Shield,
  Trash2,
  UserCheck,
  UserX,
  X,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  getAuthUser,
  ROLE_COLORS,
  ROLE_DESCRIPTIONS,
  ROLE_LABELS,
  type Role,
} from "@/lib/auth";
import {
  createUser,
  deleteUser,
  getUsers,
  toggleActive,
  updateUser,
  type UserRecord,
} from "@/lib/user-store";

const ALL_ROLES: Role[] = ["admin", "foh", "kitchen", "packaging", "dispatcher", "driver"];

const EMPTY_FORM = {
  name: "",
  username: "",
  password: "",
  email: "",
  role: "foh" as Role,
  active: true,
};

export default function UsersPage() {
  const router = useRouter();
  const [users, setUsers] = useState<UserRecord[]>([]);
  const [currentUserId, setCurrentUserId] = useState<string | null>(null);

  // Dialog state
  const [dialog, setDialog] = useState<"create" | "edit" | null>(null);
  const [editTarget, setEditTarget] = useState<UserRecord | null>(null);
  const [form, setForm] = useState({ ...EMPTY_FORM });
  const [showPw, setShowPw] = useState(false);
  const [formError, setFormError] = useState("");
  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);

  useEffect(() => {
    const user = getAuthUser();
    if (!user || user.role !== "admin") { router.replace("/orders"); return; }
    setCurrentUserId(user.id);
    setUsers(getUsers());
  }, [router]);

  const refresh = () => setUsers(getUsers());

  const openCreate = () => {
    setForm({ ...EMPTY_FORM });
    setFormError("");
    setShowPw(false);
    setEditTarget(null);
    setDialog("create");
  };

  const openEdit = (u: UserRecord) => {
    setForm({ name: u.name, username: u.username, password: "", email: u.email, role: u.role, active: u.active });
    setFormError("");
    setShowPw(false);
    setEditTarget(u);
    setDialog("edit");
  };

  const closeDialog = () => { setDialog(null); setEditTarget(null); };

  const handleSave = () => {
    setFormError("");
    const { name, username, password, email, role } = form;
    if (!name.trim())     { setFormError("Name is required"); return; }
    if (!username.trim()) { setFormError("Username is required"); return; }
    if (dialog === "create" && !password.trim()) { setFormError("Password is required"); return; }

    try {
      if (dialog === "create") {
        createUser({ name: name.trim(), username: username.trim(), password, email: email.trim(), role, active: form.active });
      } else if (editTarget) {
        const patch: Partial<UserRecord> = { name: name.trim(), username: username.trim(), email: email.trim(), role, active: form.active };
        if (password.trim()) patch.password = password;
        updateUser(editTarget.id, patch);
      }
      refresh();
      closeDialog();
    } catch (err) {
      setFormError((err as Error).message);
    }
  };

  const handleToggle = (id: string) => {
    try { toggleActive(id); refresh(); } catch { /* ignore */ }
  };

  const handleDelete = (id: string) => {
    deleteUser(id);
    refresh();
    setConfirmDelete(null);
  };

  return (
    <div className="flex h-full flex-col gap-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-bold text-xl flex items-center gap-2">
            <Shield className="size-5 text-violet-500" /> User Management
          </h1>
          <p className="text-muted-foreground text-sm">{users.length} user{users.length !== 1 ? "s" : ""}</p>
        </div>
        <Button onClick={openCreate} className="gap-1.5">
          <Plus className="size-4" /> New User
        </Button>
      </div>

      {/* User table */}
      <div className="rounded-xl border bg-card overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b bg-muted/40 text-[11px] uppercase tracking-wider text-muted-foreground">
              <th className="px-4 py-2.5 text-left">Name</th>
              <th className="px-4 py-2.5 text-left">Username</th>
              <th className="px-4 py-2.5 text-left">Role</th>
              <th className="px-4 py-2.5 text-left">Email</th>
              <th className="px-4 py-2.5 text-left">Status</th>
              <th className="px-4 py-2.5 text-left">Created</th>
              <th className="px-4 py-2.5 text-right">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {users.map((u) => (
              <tr key={u.id} className={`transition-colors hover:bg-muted/20 ${!u.active ? "opacity-50" : ""}`}>
                <td className="px-4 py-2.5 font-medium">{u.name}</td>
                <td className="px-4 py-2.5 font-mono text-[12px] text-muted-foreground">{u.username}</td>
                <td className="px-4 py-2.5">
                  <span className={`inline-flex items-center rounded border px-2 py-0.5 text-[11px] font-semibold ${ROLE_COLORS[u.role]}`}>
                    {ROLE_LABELS[u.role]}
                  </span>
                </td>
                <td className="px-4 py-2.5 text-[12px] text-muted-foreground">{u.email || "—"}</td>
                <td className="px-4 py-2.5">
                  {u.active ? (
                    <span className="inline-flex items-center gap-1 rounded bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-700">
                      <UserCheck className="size-3" /> Active
                    </span>
                  ) : (
                    <span className="inline-flex items-center gap-1 rounded bg-red-100 px-2 py-0.5 text-[11px] font-medium text-red-600">
                      <UserX className="size-3" /> Inactive
                    </span>
                  )}
                </td>
                <td className="px-4 py-2.5 text-[11px] text-muted-foreground">
                  {new Date(u.createdAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}
                </td>
                <td className="px-4 py-2.5">
                  <div className="flex items-center justify-end gap-1">
                    <button
                      type="button"
                      onClick={() => openEdit(u)}
                      className="rounded p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
                      title="Edit"
                    >
                      <Pencil className="size-3.5" />
                    </button>
                    <button
                      type="button"
                      onClick={() => handleToggle(u.id)}
                      disabled={u.id === currentUserId}
                      className="rounded p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                      title={u.active ? "Deactivate" : "Activate"}
                    >
                      {u.active ? <UserX className="size-3.5" /> : <UserCheck className="size-3.5" />}
                    </button>
                    {confirmDelete === u.id ? (
                      <div className="flex items-center gap-1">
                        <button
                          type="button"
                          onClick={() => handleDelete(u.id)}
                          className="rounded p-1.5 text-destructive hover:bg-destructive/10 transition-colors"
                          title="Confirm delete"
                        >
                          <Check className="size-3.5" />
                        </button>
                        <button
                          type="button"
                          onClick={() => setConfirmDelete(null)}
                          className="rounded p-1.5 text-muted-foreground hover:bg-muted transition-colors"
                        >
                          <X className="size-3.5" />
                        </button>
                      </div>
                    ) : (
                      <button
                        type="button"
                        onClick={() => setConfirmDelete(u.id)}
                        disabled={u.id === currentUserId}
                        className="rounded p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                        title="Delete"
                      >
                        <Trash2 className="size-3.5" />
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Create / Edit dialog */}
      {dialog && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
          <div className="w-full max-w-md rounded-2xl border bg-background shadow-2xl">
            {/* Dialog header */}
            <div className="flex items-center justify-between border-b px-5 py-4">
              <h2 className="font-bold text-base">
                {dialog === "create" ? "Create New User" : `Edit — ${editTarget?.username}`}
              </h2>
              <button type="button" onClick={closeDialog} className="rounded p-1 text-muted-foreground hover:text-foreground">
                <X className="size-4" />
              </button>
            </div>

            {/* Form */}
            <div className="space-y-3 px-5 py-4">
              {formError && (
                <div className="rounded border border-destructive/40 bg-destructive/5 px-3 py-2 text-[12px] text-destructive">
                  {formError}
                </div>
              )}

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Full Name *</label>
                  <Input
                    className="mt-1"
                    value={form.name}
                    onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                    placeholder="e.g. John Smith"
                    autoFocus
                  />
                </div>
                <div>
                  <label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Username *</label>
                  <Input
                    className="mt-1 font-mono"
                    value={form.username}
                    onChange={(e) => setForm((f) => ({ ...f, username: e.target.value.toLowerCase().replace(/\s/g, "") }))}
                    placeholder="e.g. john.smith"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                    Password {dialog === "edit" && <span className="normal-case font-normal">(leave blank to keep)</span>}
                    {dialog === "create" && "*"}
                  </label>
                  <div className="relative mt-1">
                    <Input
                      type={showPw ? "text" : "password"}
                      value={form.password}
                      onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
                      placeholder={dialog === "edit" ? "New password…" : "Password"}
                      className="pr-9"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPw((v) => !v)}
                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {showPw ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
                    </button>
                  </div>
                </div>
                <div>
                  <label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Email</label>
                  <Input
                    className="mt-1"
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
                    placeholder="user@restaurant.com"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Role *</label>
                  <div className="relative mt-1">
                    <select
                      value={form.role}
                      onChange={(e) => setForm((f) => ({ ...f, role: e.target.value as Role }))}
                      className="w-full appearance-none rounded-md border bg-background px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary/30"
                    >
                      {ALL_ROLES.map((r) => (
                        <option key={r} value={r}>{ROLE_LABELS[r]}</option>
                      ))}
                    </select>
                    <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
                  </div>
                  <p className="mt-1 text-[10px] text-muted-foreground">{ROLE_DESCRIPTIONS[form.role]}</p>
                </div>
                <div>
                  <label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Account status</label>
                  <button
                    type="button"
                    onClick={() => setForm((f) => ({ ...f, active: !f.active }))}
                    className={`mt-1 flex w-full items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors ${
                      form.active
                        ? "border-green-300 bg-green-50 text-green-700 dark:bg-green-950/30"
                        : "border-red-300 bg-red-50 text-red-600 dark:bg-red-950/30"
                    }`}
                  >
                    {form.active ? <UserCheck className="size-4" /> : <UserX className="size-4" />}
                    {form.active ? "Active" : "Inactive"}
                  </button>
                </div>
              </div>
            </div>

            {/* Dialog footer */}
            <div className="flex items-center justify-end gap-2 border-t px-5 py-3">
              <Button variant="outline" onClick={closeDialog}>Cancel</Button>
              <Button onClick={handleSave}>
                <Check className="size-4 mr-1" />
                {dialog === "create" ? "Create User" : "Save Changes"}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}