"use client";

import { FormEvent, useState } from "react";
import {
  PageHeader,
  StatCard,
  Panel,
  AdminButton,
  StatusBadge,
  EmptyState,
} from "@/components/admin/ui";

type Role = "Manager" | "Staff" | "Warehouse" | "Customer Support";

type AdminUser = {
  id: string;
  name: string;
  email: string;
  role: Role;
  status: "Active" | "Inactive";
  lastLogin: string;
};

const permissionsByRole: Record<Role, string[]> = {
  Manager: ["Dashboard", "Products", "Orders", "Inventory", "Customers", "Coupons", "Reports", "Settings"],
  Staff: ["Dashboard", "Products", "Orders", "Customers"],
  Warehouse: ["Dashboard", "Inventory", "Orders", "Reports"],
  "Customer Support": ["Dashboard", "Orders", "Customers", "Reviews", "Coupons"],
};

const allPermissions = [
  "Dashboard",
  "Products",
  "Categories",
  "Brands",
  "Inventory",
  "Orders",
  "Customers",
  "Coupons",
  "Reviews",
  "Payments",
  "Reports",
  "Users",
  "Settings",
];

const inputClass =
  "w-full rounded-lg border border-border bg-white px-3 py-2 text-sm outline-none focus:border-accent";

export default function AdminUsersPage() {
  const [users, setUsers] = useState<AdminUser[]>([
    { id: "USR-1", name: "Admin Owner", email: "admin@gns.pk", role: "Manager", status: "Active", lastLogin: "Today" },
    { id: "USR-2", name: "Sara Warehouse", email: "sara@gns.pk", role: "Warehouse", status: "Active", lastLogin: "Yesterday" },
    { id: "USR-3", name: "Hassan Support", email: "hassan@gns.pk", role: "Customer Support", status: "Active", lastLogin: "2 days ago" },
    { id: "USR-4", name: "Zain Staff", email: "zain@gns.pk", role: "Staff", status: "Inactive", lastLogin: "1 week ago" },
  ]);
  const [selectedRole, setSelectedRole] = useState<Role>("Manager");
  const [customPerms, setCustomPerms] = useState<string[]>(permissionsByRole.Manager);
  const [form, setForm] = useState({ name: "", email: "", role: "Staff" as Role });
  const [message, setMessage] = useState("");

  const flash = (text: string) => {
    setMessage(text);
    window.setTimeout(() => setMessage(""), 2200);
  };

  const handleRoleSelect = (role: Role) => {
    setSelectedRole(role);
    setCustomPerms(permissionsByRole[role]);
  };

  const togglePerm = (perm: string) => {
    setCustomPerms((prev) =>
      prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm],
    );
  };

  const handleAdd = (e: FormEvent) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim()) return;
    setUsers((prev) => [
      {
        id: `USR-${Date.now()}`,
        name: form.name.trim(),
        email: form.email.trim(),
        role: form.role,
        status: "Active",
        lastLogin: "Never",
      },
      ...prev,
    ]);
    setForm({ name: "", email: "", role: "Staff" });
    flash("User added");
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Users & Roles"
        description="Manage admin users, roles, and permission examples."
      />

      {message ? (
        <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-800">
          {message}
        </div>
      ) : null}

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Total Users" value={users.length} />
        <StatCard label="Active" value={users.filter((u) => u.status === "Active").length} tone="success" />
        <StatCard label="Managers" value={users.filter((u) => u.role === "Manager").length} tone="info" />
        <StatCard label="Roles" value={4} />
      </div>

      <div className="grid gap-4 xl:grid-cols-3">
        <Panel title="Add User" className="xl:col-span-1">
          <form onSubmit={handleAdd} className="space-y-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Name</label>
              <input className={inputClass} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Email</label>
              <input type="email" className={inputClass} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Role</label>
              <select className={inputClass} value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value as Role })}>
                <option value="Manager">Manager</option>
                <option value="Staff">Staff</option>
                <option value="Warehouse">Warehouse</option>
                <option value="Customer Support">Customer Support</option>
              </select>
            </div>
            <AdminButton type="submit">Add User</AdminButton>
          </form>
        </Panel>

        <Panel title="Role Permissions" description="Example permission matrix" className="xl:col-span-2">
          <div className="mb-4 flex flex-wrap gap-2">
            {(["Manager", "Staff", "Warehouse", "Customer Support"] as Role[]).map((role) => (
              <AdminButton
                key={role}
                variant={selectedRole === role ? "primary" : "secondary"}
                onClick={() => handleRoleSelect(role)}
              >
                {role}
              </AdminButton>
            ))}
          </div>
          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {allPermissions.map((perm) => (
              <label key={perm} className="flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-sm">
                <input
                  type="checkbox"
                  checked={customPerms.includes(perm)}
                  onChange={() => togglePerm(perm)}
                />
                {perm}
              </label>
            ))}
          </div>
          <div className="mt-4">
            <AdminButton
              variant="secondary"
              onClick={() => flash(`Saved permissions for ${selectedRole}`)}
            >
              Save Role Permissions
            </AdminButton>
          </div>
        </Panel>
      </div>

      <Panel title="Admin Users">
        {users.length === 0 ? (
          <EmptyState title="No users" description="Add an admin user to get started." />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full min-w-[700px] text-left text-sm">
              <thead>
                <tr className="border-b border-border text-xs uppercase tracking-wide text-muted-foreground">
                  <th className="pb-2 font-semibold">Name</th>
                  <th className="pb-2 font-semibold">Email</th>
                  <th className="pb-2 font-semibold">Role</th>
                  <th className="pb-2 font-semibold">Last Login</th>
                  <th className="pb-2 font-semibold">Status</th>
                  <th className="pb-2 font-semibold">Actions</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user) => (
                  <tr key={user.id} className="border-b border-border/60">
                    <td className="py-3 font-semibold">{user.name}</td>
                    <td className="py-3 text-muted-foreground">{user.email}</td>
                    <td className="py-3">{user.role}</td>
                    <td className="py-3 text-muted-foreground">{user.lastLogin}</td>
                    <td className="py-3"><StatusBadge status={user.status} /></td>
                    <td className="py-3">
                      <div className="flex flex-wrap gap-1.5">
                        <AdminButton
                          variant="secondary"
                          onClick={() => {
                            setUsers((prev) =>
                              prev.map((u) =>
                                u.id === user.id
                                  ? { ...u, status: u.status === "Active" ? "Inactive" : "Active" }
                                  : u,
                              ),
                            );
                          }}
                        >
                          {user.status === "Active" ? "Deactivate" : "Activate"}
                        </AdminButton>
                        <AdminButton
                          variant="danger"
                          onClick={() => setUsers((prev) => prev.filter((u) => u.id !== user.id))}
                        >
                          Delete
                        </AdminButton>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Panel>
    </div>
  );
}