"use client";

import {
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { Download, MoreHorizontal, Search, UserCheck, UserX } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ARCHETYPES } from "@/data/archetypes";
import { DEMO_USERS } from "@/data/users";
import type { NovalUser } from "@/types/novalife";

const archetypeMap = Object.fromEntries(ARCHETYPES.map((a) => [a.id, a]));

function ArchetypeBadge({ id }: { id?: string }) {
  if (!id) return <span className="text-xs text-gray-400">—</span>;
  const a = archetypeMap[id];
  if (!a) return <span className="text-xs text-gray-400">{id}</span>;
  return (
    <span
      className="inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium"
      style={{ backgroundColor: a.color + "22", color: a.color, borderColor: a.color + "44" }}
    >
      {a.name.replace("The ", "")}
    </span>
  );
}

function PackageBadge({ pkg }: { pkg?: string | null }) {
  if (!pkg) return <span className="text-xs text-gray-400">—</span>;
  const styles: Record<string, string> = {
    starter: "bg-blue-50 text-blue-700 border-blue-200",
    advanced: "bg-teal-50 text-teal-700 border-teal-200",
    professional: "bg-violet-50 text-violet-700 border-violet-200",
  };
  return (
    <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium capitalize ${styles[pkg] ?? "bg-gray-50 text-gray-600 border-gray-200"}`}>
      {pkg}
    </span>
  );
}

function StatusBadge({ status }: { status: string }) {
  const styles: Record<string, string> = {
    active: "bg-emerald-50 text-emerald-700 border-emerald-200",
    suspended: "bg-red-50 text-red-600 border-red-200",
    pending: "bg-amber-50 text-amber-700 border-amber-200",
  };
  return (
    <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium capitalize ${styles[status] ?? "bg-gray-50 text-gray-600 border-gray-200"}`}>
      {status}
    </span>
  );
}

function UserRowActions({ user }: { user: NovalUser }) {
  const router = useRouter();
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="h-7 w-7">
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-44">
        <DropdownMenuItem onClick={() => router.push(`/admin/users/${user.id}`)}>
          View Profile
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          onClick={() => toast.info("In PoC — action simulated", { description: `Suspend account: ${user.email}` })}
          className="text-amber-600"
        >
          Suspend Account
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => toast.info("In PoC — action simulated", { description: `Reset password for: ${user.email}` })}
        >
          Reset Password
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

const columns: ColumnDef<NovalUser>[] = [
  {
    id: "name",
    header: "User",
    accessorFn: (row) => `${row.firstName} ${row.lastName}`,
    cell: ({ row }) => {
      const user = row.original;
      const archetype = user.archetypeResult?.primaryArchetype ? archetypeMap[user.archetypeResult.primaryArchetype] : undefined;
      return (
        <div className="flex items-center gap-3">
          <div
            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
            style={{ backgroundColor: archetype?.color ?? "#0F766E" }}
          >
            {user.firstName[0]}{user.lastName[0]}
          </div>
          <div>
            <p className="font-medium text-gray-900">{user.firstName} {user.lastName}</p>
            <p className="text-xs text-gray-400">{user.email}</p>
          </div>
        </div>
      );
    },
  },
  {
    id: "archetype",
    header: "Archetype",
    accessorFn: (row) => row.archetypeResult?.primaryArchetype ?? "",
    cell: ({ row }) => <ArchetypeBadge id={row.original.archetypeResult?.primaryArchetype} />,
    filterFn: (row, _id, filterValue) => {
      if (!filterValue || filterValue === "all") return true;
      return row.original.archetypeResult?.primaryArchetype === filterValue;
    },
  },
  {
    id: "package",
    header: "Package",
    accessorFn: (row) => row.purchasedPackage ?? "",
    cell: ({ row }) => <PackageBadge pkg={row.original.purchasedPackage} />,
    filterFn: (row, _id, filterValue) => {
      if (!filterValue || filterValue === "all") return true;
      return row.original.purchasedPackage === filterValue;
    },
  },
  {
    id: "status",
    header: "Status",
    accessorFn: (row) => row.status,
    cell: ({ row }) => <StatusBadge status={row.original.status} />,
    filterFn: (row, _id, filterValue) => {
      if (!filterValue || filterValue === "all") return true;
      return row.original.status === filterValue;
    },
  },
  {
    id: "joined",
    header: "Joined",
    accessorFn: (row) => row.createdAt,
    cell: ({ row }) => (
      <span className="text-xs text-gray-500">
        {new Date(row.original.createdAt).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "2-digit" })}
      </span>
    ),
  },
  {
    id: "actions",
    header: "",
    cell: ({ row }) => <UserRowActions user={row.original} />,
  },
];

export default function UsersPage() {
  const router = useRouter();
  const [globalFilter, setGlobalFilter] = useState("");
  const [archetypeFilter, setArchetypeFilter] = useState("all");
  const [packageFilter, setPackageFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState("all");

  const filteredData = DEMO_USERS.filter((user) => {
    const search = globalFilter.toLowerCase();
    const matchSearch =
      !search ||
      user.firstName.toLowerCase().includes(search) ||
      user.lastName.toLowerCase().includes(search) ||
      user.email.toLowerCase().includes(search);

    const matchArchetype = archetypeFilter === "all" || user.archetypeResult?.primaryArchetype === archetypeFilter;
    const matchPackage = packageFilter === "all" || user.purchasedPackage === packageFilter;
    const matchStatus = statusFilter === "all" || user.status === statusFilter;

    return matchSearch && matchArchetype && matchPackage && matchStatus;
  });

  const table = useReactTable({
    data: filteredData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageSize: 10 } },
  });

  const total = DEMO_USERS.length;
  const active = DEMO_USERS.filter((u) => u.status === "active").length;
  const suspended = DEMO_USERS.filter((u) => u.status === "suspended").length;

  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">User Management</h1>
          <p className="text-sm text-gray-500">Manage all registered users and their accounts</p>
        </div>
        <Button
          variant="outline"
          size="sm"
          className="gap-2"
          onClick={() => toast.info("CSV export triggered — in PoC mode")}
        >
          <Download className="h-4 w-4" />
          Export CSV
        </Button>
      </div>

      {/* Summary counts */}
      <div className="flex gap-4">
        <div className="flex items-center gap-2 rounded-lg bg-white border border-gray-100 px-4 py-2.5 shadow-sm">
          <UserCheck className="h-4 w-4 text-gray-500" />
          <span className="text-sm font-medium text-gray-700">Total: <strong>{total}</strong></span>
        </div>
        <div className="flex items-center gap-2 rounded-lg bg-white border border-emerald-100 px-4 py-2.5 shadow-sm">
          <UserCheck className="h-4 w-4 text-emerald-600" />
          <span className="text-sm font-medium text-gray-700">Active: <strong className="text-emerald-700">{active}</strong></span>
        </div>
        <div className="flex items-center gap-2 rounded-lg bg-white border border-red-100 px-4 py-2.5 shadow-sm">
          <UserX className="h-4 w-4 text-red-500" />
          <span className="text-sm font-medium text-gray-700">Suspended: <strong className="text-red-600">{suspended}</strong></span>
        </div>
      </div>

      {/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-wrap gap-3">
            <div className="relative flex-1 min-w-48">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
              <Input
                placeholder="Search by name or email..."
                value={globalFilter}
                onChange={(e) => setGlobalFilter(e.target.value)}
                className="pl-9 h-9 text-sm"
              />
            </div>
            <Select value={archetypeFilter} onValueChange={setArchetypeFilter}>
              <SelectTrigger className="w-44 h-9 text-sm">
                <SelectValue placeholder="All archetypes" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Archetypes</SelectItem>
                {ARCHETYPES.map((a) => (
                  <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select value={packageFilter} onValueChange={setPackageFilter}>
              <SelectTrigger className="w-36 h-9 text-sm">
                <SelectValue placeholder="All packages" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Packages</SelectItem>
                <SelectItem value="starter">Starter</SelectItem>
                <SelectItem value="advanced">Advanced</SelectItem>
                <SelectItem value="professional">Professional</SelectItem>
              </SelectContent>
            </Select>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-32 h-9 text-sm">
                <SelectValue placeholder="All statuses" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Statuses</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="suspended">Suspended</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Table */}
      <Card>
        <CardContent className="p-0">
          {filteredData.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <UserX className="h-10 w-10 text-gray-300 mb-3" />
              <p className="text-sm font-medium text-gray-500">No users found</p>
              <p className="text-xs text-gray-400 mt-1">Try adjusting your search or filters</p>
            </div>
          ) : (
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-100 bg-gray-50/50">
                  {table.getFlatHeaders().map((header) => (
                    <th key={header.id} className="px-4 py-3 text-left text-xs font-medium text-gray-500">
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {table.getRowModel().rows.map((row) => (
                  <tr
                    key={row.id}
                    className="border-b border-gray-50 hover:bg-gray-50/60 cursor-pointer transition-colors"
                    onClick={() => router.push(`/admin/users/${row.original.id}`)}
                  >
                    {row.getVisibleCells().map((cell) => (
                      <td
                        key={cell.id}
                        className="px-4 py-3"
                        onClick={cell.column.id === "actions" ? (e) => e.stopPropagation() : undefined}
                      >
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </CardContent>
      </Card>

      {/* Pagination */}
      {filteredData.length > 0 && (
        <div className="flex items-center justify-between text-sm text-gray-500">
          <span>
            Showing {table.getState().pagination.pageIndex * 10 + 1}–
            {Math.min((table.getState().pagination.pageIndex + 1) * 10, filteredData.length)} of {filteredData.length} users
          </span>
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              disabled={!table.getCanPreviousPage()}
              onClick={() => table.previousPage()}
              className="h-8 px-3 text-xs"
            >
              Previous
            </Button>
            <Badge variant="outline" className="px-3 py-1 text-xs font-normal">
              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
            </Badge>
            <Button
              variant="outline"
              size="sm"
              disabled={!table.getCanNextPage()}
              onClick={() => table.nextPage()}
              className="h-8 px-3 text-xs"
            >
              Next
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}