import { useState, ReactNode } from "react";
import { router } from "@inertiajs/react";
import { useQuery } from "@tanstack/react-query";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Search, User, Shield, Building2, Eye, Pencil, KeyRound } from "lucide-react";
import AdminLayout from "@/layouts/AdminLayout";
import { EditUserDialog, ResetPasswordDialog, type EditableUser } from "@/components/admin/UserAccountDialogs";
import { useQueryClient } from "@tanstack/react-query";

interface ProfileWithRoles {
  id: string;
  user_id: string;
  full_name: string | null;
  email: string | null;
  created_at: string;
  roles: { role: string; company_id: string | null; company_name?: string }[];
}

const roleLabelMap: Record<string, string> = {
  sys_admin: "System Admin",
  sys_manager: "System Manager",
  admin: "Admin",
  manager: "Manager",
  company_manager: "Company Manager",
  company_trainer: "Company Trainer",
  delegate: "Delegate",
  user: "User",
};

const roleColor = (role: string) => {
  if (role.startsWith("sys_")) return "destructive";
  if (role === "admin" || role === "manager") return "default";
  if (role.startsWith("company_")) return "secondary";
  return "outline";
};

const IndividualAccountsPage = () => {
  const queryClient = useQueryClient();
  const [searchTerm, setSearchTerm] = useState("");
  const [roleFilter, setRoleFilter] = useState<string>("all");
  const [selectedUser, setSelectedUser] = useState<ProfileWithRoles | null>(null);
  const [editing, setEditing] = useState<EditableUser | null>(null);
  const [resetting, setResetting] = useState<EditableUser | null>(null);

  // System-level roles that should NOT appear on this page
  const sysRoles = ["sys_admin", "sys_manager", "admin", "manager"];

  // Fetch all profiles with their roles
  const { data: profiles, isLoading } = useQuery({
    queryKey: ["all-profiles"],
    queryFn: async (): Promise<ProfileWithRoles[]> => {
      const res = await fetch("/api/admin/profiles");
      if (!res.ok) return [];
      const allProfiles = (await res.json()) as ProfileWithRoles[];
      // Exclude users who have any system-level role
      return allProfiles.filter(
        (p) => !p.roles.some((r) => sysRoles.includes(r.role))
      );
    },
  });

  const filtered = profiles?.filter((p) => {
    const term = searchTerm.toLowerCase();
    const matchesSearch =
      !term ||
      p.full_name?.toLowerCase().includes(term) ||
      p.email?.toLowerCase().includes(term);

    const matchesRole =
      roleFilter === "all" ||
      p.roles.some((r) => r.role === roleFilter);

    return matchesSearch && matchesRole;
  });

  const delegateCount = profiles?.filter((p) => p.roles.some((r) => r.role === "delegate")).length || 0;
  const companyManagerCount = profiles?.filter((p) => p.roles.some((r) => r.role === "company_manager")).length || 0;
  const totalCount = profiles?.length || 0;

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Individual Accounts</h1>
          <p className="text-sm text-muted-foreground mt-1">
            {totalCount} total accounts · {delegateCount} delegates · {companyManagerCount} company managers
          </p>
        </div>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-3 mb-6">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search by name or email..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-9"
          />
        </div>
        <Select value={roleFilter} onValueChange={setRoleFilter}>
          <SelectTrigger className="w-[180px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Roles</SelectItem>
            <SelectItem value="delegate">Delegates</SelectItem>
            <SelectItem value="company_manager">Company Managers</SelectItem>
            <SelectItem value="company_trainer">Company Trainers</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Accounts table */}
      {isLoading ? (
        <p className="text-muted-foreground">Loading accounts...</p>
      ) : (
        <div className="bg-card border border-border rounded-xl overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Roles</TableHead>
                <TableHead>Company</TableHead>
                <TableHead>Registered</TableHead>
                <TableHead className="w-[80px]">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filtered?.map((p) => {
                const companyRole = p.roles.find((r) => r.company_name);
                return (
                  <TableRow key={p.id}>
                    <TableCell className="font-medium">{p.full_name || "—"}</TableCell>
                    <TableCell>
                      <span className="text-sm">{p.email || "—"}</span>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        {p.roles.length > 0 ? (
                          p.roles.map((r, i) => (
                            <Badge key={i} variant={roleColor(r.role) as any} className="text-xs">
                              {roleLabelMap[r.role] || r.role}
                            </Badge>
                          ))
                        ) : (
                          <span className="text-xs text-muted-foreground">None</span>
                        )}
                      </div>
                    </TableCell>
                    <TableCell>
                      {companyRole ? (
                        <button
                          className="text-sm text-primary hover:underline"
                          onClick={() => router.visit(`/admin/companies/${companyRole.company_id}`)}
                        >
                          {companyRole.company_name}
                        </button>
                      ) : (
                        <span className="text-sm text-muted-foreground">—</span>
                      )}
                    </TableCell>
                    <TableCell className="text-sm text-muted-foreground">
                      {new Date(p.created_at).toLocaleDateString()}
                    </TableCell>
                    <TableCell>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setSelectedUser(p)}
                        title="View details"
                      >
                        <Eye className="h-4 w-4" />
                      </Button>
                    </TableCell>
                  </TableRow>
                );
              })}
              {filtered?.length === 0 && (
                <TableRow>
                  <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                    No accounts found.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      )}

      <Dialog open={!!selectedUser} onOpenChange={(open) => !open && setSelectedUser(null)}>
        <DialogContent className="max-w-lg">
          {selectedUser && (
            <>
              <DialogHeader>
                <DialogTitle className="flex items-center gap-2">
                  <User className="h-5 w-5" />
                  {selectedUser.full_name || "Unnamed User"}
                </DialogTitle>
              </DialogHeader>

              <div className="space-y-4 mt-2">
                <div className="grid grid-cols-[110px_1fr] gap-y-3 gap-x-4 text-sm">
                  <span className="text-xs text-muted-foreground font-medium pt-0.5">Email</span>
                  <span className="text-foreground break-all">{selectedUser.email || "—"}</span>

                  <span className="text-xs text-muted-foreground font-medium pt-0.5">User ID</span>
                  <span className="text-foreground font-mono text-xs break-all">{selectedUser.user_id}</span>

                  <span className="text-xs text-muted-foreground font-medium pt-0.5">Registered</span>
                  <span className="text-foreground">{new Date(selectedUser.created_at).toLocaleDateString()}</span>

                  <span className="text-xs text-muted-foreground font-medium pt-0.5">Roles</span>
                  <div className="flex flex-wrap gap-1">
                    {selectedUser.roles.length > 0 ? (
                      selectedUser.roles.map((r, i) => (
                        <Badge key={i} variant={roleColor(r.role) as any} className="text-xs">
                          {roleLabelMap[r.role] || r.role}
                          {r.company_name && ` @ ${r.company_name}`}
                        </Badge>
                      ))
                    ) : (
                      <span className="text-sm text-muted-foreground">No roles assigned</span>
                    )}
                  </div>
                </div>

                <div className="flex flex-wrap gap-2 pt-3 border-t border-border">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() =>
                      setEditing({
                        user_id: selectedUser.user_id,
                        full_name: selectedUser.full_name,
                        email: selectedUser.email ?? "",
                      })
                    }
                  >
                    <Pencil className="h-3 w-3 mr-1" /> Edit details
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() =>
                      setResetting({
                        user_id: selectedUser.user_id,
                        full_name: selectedUser.full_name,
                        email: selectedUser.email ?? "",
                      })
                    }
                  >
                    <KeyRound className="h-3 w-3 mr-1" /> Set password
                  </Button>
                  {selectedUser.roles.some((r) => r.role === "company_manager" && r.company_id) && (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        const companyRole = selectedUser.roles.find((r) => r.role === "company_manager");
                        if (companyRole?.company_id) router.visit(`/admin/companies/${companyRole.company_id}`);
                      }}
                    >
                      <Building2 className="h-3 w-3 mr-1" /> View Company
                    </Button>
                  )}
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => router.visit("/admin/user-roles")}
                  >
                    <Shield className="h-3 w-3 mr-1" /> Manage Roles
                  </Button>
                </div>
              </div>
            </>
          )}
        </DialogContent>
      </Dialog>

      <EditUserDialog
        user={editing}
        onClose={() => setEditing(null)}
        onSaved={(updated) => {
          queryClient.invalidateQueries({ queryKey: ["all-profiles"] });
          // Refresh the open profile view so the popup reflects the edit immediately.
          if (selectedUser && updated.user_id === selectedUser.user_id) {
            setSelectedUser({
              ...selectedUser,
              full_name: updated.full_name,
              email: updated.email,
            });
          }
        }}
      />
      <ResetPasswordDialog user={resetting} onClose={() => setResetting(null)} />
    </div>
  );
};

IndividualAccountsPage.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default IndividualAccountsPage;