"use client"

import { useCallback, useEffect, useMemo, useState } from "react"
import {
  Shield,
  Plus,
  Search,
  Pencil,
  Trash2,
  Users,
  UserCheck,
  UserCog,
  Activity,
} from "lucide-react"
import { Navbar } from "@/components/dashboard/navbar"
import { DashboardTablePagination } from "@/components/dashboard/shared/DashboardTablePagination"
import { DashboardTableViewControls } from "@/components/dashboard/shared/DashboardTableViewControls"
import { useDashboardTableViewControls } from "@/hooks/useDashboardTableViewControls"
import { UserFormModal, type UserFormData } from "@/components/dashboard/user-form-modal"
import { DeleteConfirmModal } from "@/components/dashboard/delete-confirm-modal"
import { ContentAuditInfo } from "@/components/dashboard/shared/ContentAuditInfo"
import type { ContentAudit } from "@/types/content-audit"

type Role = "admin" | "employee"
type Status = "active" | "inactive"

interface User {
  id: string
  name: string
  email: string
  role: Role
  status: Status
  image?: string
  audit: ContentAudit
}

type FilterRole = "all" | Role
type FilterStatus = "all" | Status

const USERS_TABLE_ID = "users-table"

const USERS_SORT_OPTIONS = [
  { value: "newest", label: "Newest first" },
  { value: "oldest", label: "Oldest first" },
  { value: "updated-newest", label: "Recently updated" },
  { value: "updated-oldest", label: "Least recently updated" },
  { value: "name-asc", label: "Name A → Z" },
  { value: "name-desc", label: "Name Z → A" },
]

const USERS_SORT_COMPARATORS: Record<string, (a: User, b: User) => number> = {
  newest: (a, b) => new Date(b.audit.createdAt).getTime() - new Date(a.audit.createdAt).getTime(),
  oldest: (a, b) => new Date(a.audit.createdAt).getTime() - new Date(b.audit.createdAt).getTime(),
  "updated-newest": (a, b) => new Date(b.audit.updatedAt).getTime() - new Date(a.audit.updatedAt).getTime(),
  "updated-oldest": (a, b) => new Date(a.audit.updatedAt).getTime() - new Date(b.audit.updatedAt).getTime(),
  "name-asc": (a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
  "name-desc": (a, b) => b.name.localeCompare(a.name, undefined, { sensitivity: "base" }),
}

function parseContentAudit(raw: Record<string, unknown>): ContentAudit {
  const audit = raw.audit
  if (audit && typeof audit === "object") {
    return audit as ContentAudit
  }
  const createdAt =
    raw.createdAt instanceof Date
      ? raw.createdAt.toISOString()
      : typeof raw.createdAt === "string"
        ? raw.createdAt
        : ""
  const updatedAt =
    raw.updatedAt instanceof Date
      ? raw.updatedAt.toISOString()
      : typeof raw.updatedAt === "string"
        ? raw.updatedAt
        : createdAt
  return {
    createdAt,
    updatedAt,
    createdBy: null,
    updatedBy: null,
  }
}

function mapApiUser(u: Record<string, unknown>): User {
  return {
    id: String(u.id ?? ""),
    name: typeof u.name === "string" ? u.name : "",
    email: String(u.email ?? ""),
    role: u.role as Role,
    status: (u.status as Status) ?? "active",
    image: typeof u.image === "string" ? u.image : undefined,
    audit: parseContentAudit(u),
  }
}

export default function AdminsPage() {
  const [users, setUsers] = useState<User[]>([])
  const [createModalOpen, setCreateModalOpen] = useState(false)
  const [editModalUser, setEditModalUser] = useState<User | null>(null)
  const [deleteTargetUser, setDeleteTargetUser] = useState<User | null>(null)
  const [isDeletingLoading, setIsDeletingLoading] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterRole, setFilterRole] = useState<FilterRole>("all")
  const [filterStatus, setFilterStatus] = useState<FilterStatus>("all")
  const [isLoading, setIsLoading] = useState(false)

  const tableView = useDashboardTableViewControls<User>({
    tableId: USERS_TABLE_ID,
    defaultSortKey: "newest",
    defaultItemsPerPage: 6,
    sortOptions: USERS_SORT_OPTIONS,
    comparators: USERS_SORT_COMPARATORS,
  })

  const totalUsers = users.length
  const totalAdmin = users.filter((u) => u.role === "admin").length
  const totalStaff = users.filter((u) => u.role === "employee").length
  const totalActive = users.filter((u) => u.status === "active").length

  const STATS = [
    { label: "Total Users", value: totalUsers, icon: Users, color: "var(--brand-navy)" },
    { label: "Admin", value: totalAdmin, icon: UserCog, color: "var(--brand-green)" },
    { label: "Staff", value: totalStaff, icon: UserCheck, color: "#0EA5E9" },
    { label: "Active", value: totalActive, icon: Activity, color: "#F59E0B" },
  ]

  const loadUsers = useCallback(async () => {
    setIsLoading(true)
    try {
      const res = await fetch("/api/admin/users", { cache: "no-store" })
      const data = await res.json()
      if (data?.users) {
        const mapped = data.users.map((u: Record<string, unknown>) => mapApiUser(u))
        setUsers(mapped)
      } else {
        setUsers([])
      }
    } catch {
      setUsers([])
    } finally {
      setIsLoading(false)
    }
  }, [])

  useEffect(() => {
    void loadUsers()
  }, [loadUsers])

  const filtered = useMemo(() => {
    return users.filter((u) => {
      const matchSearch =
        u.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        u.email.toLowerCase().includes(searchQuery.toLowerCase())
      const matchRole = filterRole === "all" || u.role === filterRole
      const matchStatus = filterStatus === "all" || u.status === filterStatus
      return matchSearch && matchRole && matchStatus
    })
  }, [users, searchQuery, filterRole, filterStatus])

  const viewResult = useMemo(() => tableView.applyView(filtered), [filtered, tableView.applyView])

  useEffect(() => {
    if (tableView.viewAll) return
    if (tableView.currentPage > viewResult.totalPages) {
      tableView.setCurrentPage(viewResult.totalPages)
    }
  }, [
    tableView.viewAll,
    tableView.currentPage,
    tableView.setCurrentPage,
    viewResult.totalPages,
  ])

  const paginated = viewResult.displayed
  const totalPages = viewResult.totalPages

  async function handleCreate(data: UserFormData) {
    try {
      let res
      if ((data as any).avatar) {
        const form = new FormData()
        form.append("name", data.name)
        form.append("email", data.email)
        form.append("role", data.role)
        form.append("password", data.password)
        if (data.status) form.append("status", data.status)
        form.append("image", (data as any).avatar)
        res = await fetch("/api/admin/users", { method: "POST", body: form })
      } else {
        res = await fetch("/api/admin/users", {
          method: "POST",
          body: JSON.stringify(data),
          headers: { "Content-Type": "application/json" },
        })
      }
      const json = await res.json()
      if (!res.ok) throw new Error(json?.error || "Create failed")
      const newUser = mapApiUser(json.user as Record<string, unknown>)
      setUsers((prev) => [newUser, ...prev])
      setCreateModalOpen(false)
    } catch (_err) {
      // no-op for now
    }
  }

  async function handleEdit(data: UserFormData) {
    if (!editModalUser) return
    try {
      let res
      if ((data as any).avatar) {
        const form = new FormData()
        form.append("id", editModalUser.id)
        form.append("name", data.name)
        form.append("email", data.email)
        form.append("role", data.role)
        if (data.password) form.append("password", data.password)
        if (data.status) form.append("status", data.status)
        // If user requested to remove existing image, include flag
        if ((data as any).removeAvatar) {
          form.append("removeImage", "true")
        }
        form.append("image", (data as any).avatar)
        res = await fetch("/api/admin/users", { method: "PATCH", body: form })
      } else {
        res = await fetch("/api/admin/users", {
          method: "PATCH",
          body: JSON.stringify({ id: editModalUser.id, ...data, removeImage: (data as any).removeAvatar ?? false }),
          headers: { "Content-Type": "application/json" },
        })
      }
      const json = await res.json()
      if (!res.ok) throw new Error(json?.error || "Update failed")
      setUsers((prev) =>
        prev.map((usr) =>
          usr.id === editModalUser.id ? mapApiUser(json.user as Record<string, unknown>) : usr
        )
      )
      setEditModalUser(null)
    } catch (_err) {
      // no-op for now
    }
  }

  async function handleDelete() {
    if (!deleteTargetUser) return
    setIsDeletingLoading(true)
    try {
      const res = await fetch("/api/admin/users", {
        method: "DELETE",
        body: JSON.stringify({ id: deleteTargetUser.id }),
        headers: { "Content-Type": "application/json" },
      })
      const json = await res.json()
      if (!res.ok) throw new Error(json?.error || "Delete failed")
      setUsers((prev) => prev.filter((u) => u.id !== deleteTargetUser.id))
      setDeleteTargetUser(null)
    } catch (_err) {
      // no-op for now
    } finally {
      setIsDeletingLoading(false)
    }
  }

  return (
    <>
      <Navbar
        title="Admins"
        breadcrumbs={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Admins" },
        ]}
      />

      <div className="p-6 flex flex-col gap-6">
        {/* Page header */}
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <div className="flex items-center gap-2.5 mb-1">
              <h1 className="text-2xl font-bold text-foreground font-sans">
                User Management
              </h1>
              <span
                className="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold font-sans uppercase tracking-wider"
                style={{
                  background: "rgba(29,45,104,0.10)",
                  color: "var(--brand-navy)",
                  border: "1px solid rgba(29,45,104,0.20)",
                }}
              >
                <Shield className="w-3 h-3" aria-hidden="true" />
                Admin Only
              </span>
            </div>
            <p className="text-muted-foreground text-sm font-sans">
              Manage system users, roles, and access permissions.
            </p>
          </div>

          <button
            onClick={() => setCreateModalOpen(true)}
            className="flex cursor-pointer items-center gap-2 px-4 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 hover:brightness-105 active:scale-[0.98] shrink-0"
            style={{
              background: "var(--brand-green)",
              boxShadow: "0 2px 8px rgba(43,182,115,0.3)",
            }}
          >
            <Plus className="w-4 h-4" aria-hidden="true" />
            Create New User
          </button>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {STATS.map((stat) => {
            const Icon = stat.icon
            return (
              <div
                key={stat.label}
                className="bg-card rounded-2xl p-5 border border-border flex items-center gap-4"
              >
                <div
                  className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
                  style={{ background: `${stat.color}18` }}
                >
                  <Icon
                    className="w-5 h-5"
                    style={{ color: stat.color }}
                    aria-hidden="true"
                  />
                </div>
                <div>
                  <p className="text-2xl font-bold text-foreground font-sans leading-none">
                    {stat.value}
                  </p>
                  <p className="text-xs text-muted-foreground font-sans mt-1">
                    {stat.label}
                  </p>
                </div>
              </div>
            )
          })}
        </div>

        {/* Table card */}
        <div className="bg-card rounded-2xl border border-border overflow-hidden">
          {/* Table toolbar */}
          <div className="flex flex-col w-full gap-0 border-b border-border">
            <div className="flex flex-wrap items-center gap-3 px-5 py-4 w-full">
              <div className="flex items-center gap-2 flex-1 min-w-[180px] px-3.5 py-2.5 rounded-xl bg-muted border border-border">
                <Search
                  className="w-3.5 h-3.5 text-muted-foreground shrink-0"
                  aria-hidden="true"
                />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => {
                    setSearchQuery(e.target.value)
                    tableView.resetToFirstPage()
                  }}
                  placeholder="Search by name or email..."
                  className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground font-sans outline-none"
                  aria-label="Search user"
                />
              </div>

              <div className="flex items-center gap-1 rounded-xl p-1 bg-muted border border-border">
                {(["all", "admin", "employee"] as const).map((r) => (
                  <button
                    key={r}
                    onClick={() => {
                      setFilterRole(r)
                      tableView.resetToFirstPage()
                    }}
                    className="px-3 py-1.5 cursor-pointer rounded-lg text-xs font-semibold font-sans transition-all"
                    style={
                      filterRole === r
                        ? { background: "var(--brand-navy)", color: "white" }
                        : { color: "var(--muted-foreground)" }
                    }
                  >
                    {r === "all" ? "All" : r === "admin" ? "Admin" : "Staff"}
                  </button>
                ))}
              </div>

              <div className="flex items-center gap-1 rounded-xl p-1 bg-muted border border-border">
                {(["all", "active", "inactive"] as const).map((s) => (
                  <button
                    key={s}
                    onClick={() => {
                      setFilterStatus(s)
                      tableView.resetToFirstPage()
                    }}
                    className="px-3 cursor-pointer py-1.5 rounded-lg text-xs font-semibold font-sans transition-all"
                    style={
                      filterStatus === s
                        ? {
                            background:
                              s === "active" ? "var(--brand-green)" : "#6B7280",
                            color: "white",
                          }
                        : { color: "var(--muted-foreground)" }
                    }
                  >
                    {s === "all" ? "All" : s === "active" ? "Active" : "Inactive"}
                  </button>
                ))}
              </div>
            </div>

            <div className="px-5 pb-4">
              <DashboardTableViewControls
                sortOptions={tableView.sortOptions}
                sortKey={tableView.sortKey}
                onSortChange={tableView.setSortKey}
                pageSizeOptions={tableView.pageSizeOptions}
                itemsPerPage={tableView.itemsPerPage}
                onItemsPerPageChange={tableView.setItemsPerPage}
                viewAll={tableView.viewAll}
                onViewAllToggle={tableView.toggleViewAll}
                displayedCount={viewResult.displayedCount}
                totalCount={viewResult.totalItems}
                itemLabel="users"
                viewAllCapped={viewResult.viewAllCapped}
                disabled={isLoading || !tableView.hydrated}
              />
            </div>
          </div>

          {/* Table */}
          <div className="overflow-x-auto">
            <table className="w-full" aria-label="User list">
              <thead>
                <tr className="border-b border-border">
                  {[
                    "Full Name",
                    "Email",
                    "Role",
                    "Status",
                    "Last updated",
                    "Actions",
                  ].map((col) => (
                    <th
                      key={col}
                      className="text-left px-5 py-3.5 text-xs font-bold text-muted-foreground font-sans uppercase tracking-wider"
                    >
                      {col}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {isLoading ? (
                  <tr>
                    <td
                      colSpan={6}
                      className="px-5 py-12 text-center text-muted-foreground text-sm font-sans"
                    >
                      Loading...
                    </td>
                  </tr>
                ) : paginated.length === 0 ? (
                  <tr>
                    <td
                      colSpan={6}
                      className="px-5 py-12 text-center text-muted-foreground text-sm font-sans"
                    >
                      No users found.
                    </td>
                  </tr>
                ) : (
                  paginated.map((user) => (
                    <tr
                      key={user.id}
                      className="border-b border-border last:border-0 hover:bg-muted/40 transition-colors"
                    >
                      {/* Name */}
                      <td className="px-5 py-4">
                        <div className="flex items-center gap-3">
                          {user.image ? (
                            <img
                              src={user.image}
                              alt={user.name}
                              className="w-9 h-9 rounded-full object-cover shrink-0"
                            />
                          ) : (
                            <div
                              className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold font-sans shrink-0"
                              style={{
                                background:
                                  user.role === "admin"
                                    ? "var(--brand-navy)"
                                    : "var(--brand-green)",
                              }}
                              aria-hidden="true"
                            >
                              {user.name.charAt(0)}
                            </div>
                          )}
                          <span className="text-sm font-semibold text-foreground font-sans">
                            {user.name}
                          </span>
                        </div>
                      </td>

                      {/* Email */}
                      <td className="px-5 py-4">
                        <span className="text-sm text-muted-foreground font-sans">
                          {user.email}
                        </span>
                      </td>

                      {/* Role */}
                      <td className="px-5 py-4">
                        <span
                          className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold font-sans"
                          style={
                            user.role === "admin"
                              ? {
                                  background: "rgba(29,45,104,0.10)",
                                  color: "var(--brand-navy)",
                                }
                              : {
                                  background: "rgba(43,182,115,0.10)",
                                  color: "var(--brand-green)",
                                }
                          }
                        >
                          {user.role === "admin" ? (
                            <UserCog className="w-3 h-3 " aria-hidden="true" />
                          ) : (
                            <UserCheck className="w-3 h-3" aria-hidden="true" />
                          )}
                          {user.role === "admin" ? "Admin" : "Staff"}
                        </span>
                      </td>

                      {/* Status */}
                      <td className="px-5 py-4">
                        <div className="flex items-center gap-2">
                          <span
                            className="w-2 h-2 rounded-full"
                            style={{
                              background:
                                user.status === "active"
                                  ? "var(--brand-green)"
                                  : "#9CA3AF",
                            }}
                            aria-hidden="true"
                          />
                          <span
                            className="text-xs font-semibold font-sans"
                            style={{
                              color:
                                user.status === "active"
                                  ? "var(--brand-green)"
                                  : "#9CA3AF",
                            }}
                          >
                            {user.status === "active" ? "Active" : "Inactive"}
                          </span>
                        </div>
                      </td>

                      {/* Last updated (account audit) */}
                      <td className="px-5 py-4">
                        <ContentAuditInfo audit={user.audit} mode="updated" variant="table" />
                      </td>

                      {/* Actions */}
                      <td className="px-5 py-4">
                        <div className="flex items-center gap-1">
                          <button
                            onClick={() => setEditModalUser(user)}
                            className="p-2 cursor-pointer rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                            title="Edit"
                            aria-label={`Edit user ${user.name}`}
                          >
                            <Pencil className="w-3.5 h-3.5" aria-hidden="true" />
                          </button>

                          <button
                            onClick={() => setDeleteTargetUser(user)}
                            className="p-2 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors"
                            title="Delete"
                            aria-label={`Delete user ${user.name}`}
                          >
                            <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>

          {!isLoading && !tableView.viewAll && viewResult.totalItems > 0 ? (
            <DashboardTablePagination
              currentPage={tableView.currentPage}
              totalPages={totalPages}
              totalItems={viewResult.totalItems}
              pageSize={tableView.itemsPerPage}
              itemLabel="users"
              onPageChange={tableView.setCurrentPage}
            />
          ) : null}
        </div>
      </div>

      {/* Create User Modal */}
      <UserFormModal
        open={createModalOpen}
        mode="create"
        onClose={() => setCreateModalOpen(false)}
        onSubmit={handleCreate}
      />

      {/* Edit User Modal */}
      <UserFormModal
        open={editModalUser !== null}
        mode="edit"
        initialData={
          editModalUser
            ? {
                id: editModalUser.id,
                name: editModalUser.name,
                email: editModalUser.email,
                role: editModalUser.role,
                status: editModalUser.status,
                image: editModalUser.image,
              }
            : undefined
        }
        onClose={() => setEditModalUser(null)}
        onSubmit={handleEdit}
      />

      {/* Delete Confirm Modal */}
      <DeleteConfirmModal
        open={deleteTargetUser !== null}
        userName={deleteTargetUser?.name ?? ""}
        isLoading={isDeletingLoading}
        onClose={() => setDeleteTargetUser(null)}
        onConfirm={handleDelete}
      />
    </>
  )
}