"use client";

import { useCallback, useMemo, useState } from "react";
import {
  Users,
  CheckCircle,
  Clock,
  Ban,
  Settings,
  UserPlus,
  MoreHorizontal,
  Pencil,
  Shield,
  Mail,
  Trash2,
} from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useT, useLocale } from "@/shared/i18n/client";
import { formatDate, formatRelative } from "@/shared/lib/format-date";
import { displayInitials, displayName } from "@/shared/lib/user-display";
import { cn } from "@/shared/lib/utils";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { usePageHeader } from "@/presentation/hooks/use-page-header";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { useDeleteTarget } from "@/presentation/hooks/use-delete-target";
import { useServerPagination } from "@/presentation/hooks/use-server-pagination";
import ServerDataTable, { type Column } from "@/presentation/components/shared/server-data-table";
import StatsCard from "@/presentation/components/shared/stats-card";
import ConfirmationDialog from "@/presentation/components/shared/confirmation-dialog";
import { Button } from "@/presentation/components/ui/button";
import { Badge } from "@/presentation/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/presentation/components/ui/avatar";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/presentation/components/ui/select";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/presentation/components/ui/dropdown-menu";
import InternalUserFormDialog from "@/presentation/components/internal-users/internal-user-form-dialog";
import UserPermissionsDialog from "@/presentation/components/internal-users/user-permissions-dialog";
import RoleSettingsDialog from "@/presentation/components/internal-users/role-settings-dialog";
import {
  INTERNAL_ROLE_BADGE,
  INTERNAL_ROLE_CODES,
  INTERNAL_STATUS_BADGE,
} from "@/shared/constants/internal-users";
import type { InternalUser } from "@/domain/entities/internal-user";

export default function InternalUsersPage() {
  const t = useT();
  const locale = useLocale();
  usePageHeader(t.pages.internalUsers.title, t.pages.internalUsers.subtitle);
  const container = useRepositories();
  const pagination = useServerPagination();

  const [formOpen, setFormOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<InternalUser | null>(null);
  const [permissionsUser, setPermissionsUser] = useState<InternalUser | null>(null);
  const [roleSettingsOpen, setRoleSettingsOpen] = useState(false);
  const deleteDialog = useDeleteTarget<InternalUser>();

  const { data: stats, refetch: refetchStats } = useApiQuery(
    () => container.internalUserRepository.getStats(),
    { deps: [] }
  );

  const { data: response, loading, refetch } = useApiQuery(
    () => container.internalUserRepository.findAll(pagination.params),
    { deps: [pagination.params] }
  );

  const { data: catalog, refetch: refetchCatalog } = useApiQuery(
    () => container.internalRoleRepository.getCatalog(),
    { deps: [] }
  );

  const roleCounts = useMemo(() => {
    const map: Record<string, number> = {};
    catalog?.roles.forEach((r) => {
      map[r.code] = r.count;
    });
    return map;
  }, [catalog]);

  const refetchAll = useCallback(() => {
    refetch();
    refetchStats();
  }, [refetch, refetchStats]);

  const deleteMutation = useApiMutation(
    (id: number) => container.internalUserRepository.delete(id),
    {
      successMessage: t.internalUsers.toasts.deleted,
      onSuccess: () => {
        deleteDialog.close();
        refetchAll();
      },
    }
  );

  const resendMutation = useApiMutation(
    (id: number) => container.internalUserRepository.resendInvitation(id),
    { successMessage: t.internalUsers.toasts.invitationResent }
  );

  const openInvite = useCallback(() => {
    setEditingUser(null);
    setFormOpen(true);
  }, []);

  const openEdit = useCallback((user: InternalUser) => {
    setEditingUser(user);
    setFormOpen(true);
  }, []);

  const columns: Column<InternalUser>[] = [
    {
      key: "first_name",
      label: t.internalUsers.columns.user,
      sortable: true,
      render: (row) => {
        const name = row.full_name?.trim();
        return (
          <div className="flex items-center gap-3 min-w-0">
            <Avatar className="h-9 w-9 flex-shrink-0">
              <AvatarImage src={row.profile_picture ?? undefined} />
              <AvatarFallback className="bg-primary/10 text-primary text-xs font-semibold">
                {displayInitials({ name: row.full_name, email: row.email })}
              </AvatarFallback>
            </Avatar>
            <div className="min-w-0">
              <p className="text-sm font-medium text-foreground truncate">{name || row.email}</p>
              {name && <p className="text-xs text-muted-foreground truncate">{row.email}</p>}
            </div>
          </div>
        );
      },
    },
    {
      key: "role",
      label: t.internalUsers.columns.role,
      sortable: true,
      render: (row) => (
        <Badge
          className={cn(
            "border-0 text-xs font-medium",
            INTERNAL_ROLE_BADGE[row.role] ?? "bg-gray-100 text-gray-600"
          )}
        >
          {row.role_label ?? t.internalUsers.roleLabels[row.role] ?? row.role}
        </Badge>
      ),
    },
    {
      key: "status",
      label: t.internalUsers.columns.status,
      sortable: true,
      render: (row) => (
        <Badge
          className={cn(
            "border-0 text-xs font-medium",
            INTERNAL_STATUS_BADGE[row.status] ?? "bg-gray-100 text-gray-600"
          )}
        >
          {t.internalUsers.statusLabels[row.status] ?? row.status}
        </Badge>
      ),
    },
    {
      key: "last_active_at",
      label: t.internalUsers.columns.lastActivity,
      sortable: true,
      render: (row) =>
        row.last_active_at ? formatRelative(row.last_active_at, locale) : t.internalUsers.noActivity,
    },
    {
      key: "created_at",
      label: t.internalUsers.columns.createdAt,
      sortable: true,
      render: (row) => formatDate(row.created_at, locale),
    },
    {
      key: "actions",
      label: "",
      className: "w-10",
      render: (row) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon-sm" onClick={(e) => e.stopPropagation()}>
              <MoreHorizontal className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
            <DropdownMenuItem onClick={() => openEdit(row)}>
              <Pencil className="w-4 h-4 mr-2" />
              {t.internalUsers.actions.edit}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setPermissionsUser(row)}>
              <Shield className="w-4 h-4 mr-2" />
              {t.internalUsers.actions.permissions}
            </DropdownMenuItem>
            {row.status === "invited" && (
              <DropdownMenuItem onClick={() => resendMutation.mutate(row.id)}>
                <Mail className="w-4 h-4 mr-2" />
                {t.internalUsers.actions.resendInvitation}
              </DropdownMenuItem>
            )}
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-destructive" onClick={() => deleteDialog.open(row)}>
              <Trash2 className="w-4 h-4 mr-2" />
              {t.internalUsers.actions.delete}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  return (
    <div className="p-6 space-y-6">
      {/* Header actions */}
      <div className="flex items-center justify-end gap-2">
        <Button variant="outline" size="sm" onClick={() => setRoleSettingsOpen(true)}>
          <Settings className="w-4 h-4 mr-2" />
          {t.internalUsers.roleSettingsButton}
        </Button>
        <Button size="sm" onClick={openInvite}>
          <UserPlus className="w-4 h-4 mr-2" />
          {t.internalUsers.inviteButton}
        </Button>
      </div>

      {/* Stats */}
      {stats && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <StatsCard title={t.internalUsers.stats.total} value={stats.total} icon={Users} accent="blue" />
          <StatsCard title={t.internalUsers.stats.active} value={stats.active} icon={CheckCircle} accent="green" />
          <StatsCard title={t.internalUsers.stats.invited} value={stats.invited} icon={Clock} accent="purple" />
          <StatsCard title={t.internalUsers.stats.suspended} value={stats.suspended} icon={Ban} accent="amber" />
        </div>
      )}

      <ServerDataTable
        columns={columns}
        data={response?.items ?? []}
        total={response?.total ?? 0}
        page={pagination.page}
        totalPages={response?.last_page ?? 1}
        loading={loading}
        search={pagination.search}
        onSearchChange={pagination.setSearch}
        onPageChange={pagination.setPage}
        onSortChange={pagination.setSort}
        sortBy={pagination.orderBy}
        sortOrder={pagination.order}
        searchPlaceholder={t.internalUsers.searchPlaceholder}
        emptyMessage={t.internalUsers.empty}
        toolbar={
          <>
            <div className="flex flex-col gap-1">
              <span className="text-[11px] font-medium text-muted-foreground leading-none">
                {t.internalUsers.filters.role}
              </span>
              <Select
                value={(pagination.filters.role as string) ?? "all"}
                onValueChange={(v) => pagination.setFilter("role", v === "all" ? undefined : v)}
              >
                <SelectTrigger className="h-8 w-40 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t.internalUsers.filters.allRoles}</SelectItem>
                  {INTERNAL_ROLE_CODES.map((code) => (
                    <SelectItem key={code} value={code}>
                      {t.internalUsers.roleLabels[code]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="flex flex-col gap-1">
              <span className="text-[11px] font-medium text-muted-foreground leading-none">
                {t.internalUsers.filters.status}
              </span>
              <Select
                value={(pagination.filters.status as string) ?? "all"}
                onValueChange={(v) => pagination.setFilter("status", v === "all" ? undefined : v)}
              >
                <SelectTrigger className="h-8 w-36 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t.internalUsers.filters.allStatuses}</SelectItem>
                  <SelectItem value="1">{t.internalUsers.statusLabels.active}</SelectItem>
                  <SelectItem value="0">{t.internalUsers.statusLabels.invited}</SelectItem>
                  <SelectItem value="2">{t.internalUsers.statusLabels.suspended}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </>
        }
      />

      <InternalUserFormDialog
        open={formOpen}
        onOpenChange={setFormOpen}
        user={editingUser}
        roleCounts={roleCounts}
        onSuccess={refetchAll}
      />

      <UserPermissionsDialog
        user={permissionsUser}
        onOpenChange={(open) => !open && setPermissionsUser(null)}
      />

      <RoleSettingsDialog
        open={roleSettingsOpen}
        onOpenChange={setRoleSettingsOpen}
        catalog={catalog}
        onSaved={refetchCatalog}
      />

      <ConfirmationDialog
        open={deleteDialog.isOpen}
        onOpenChange={(open) => !open && deleteDialog.close()}
        title={t.internalUsers.delete.title}
        description={t.internalUsers.delete.description(
          deleteDialog.target
            ? displayName({ name: deleteDialog.target.full_name, email: deleteDialog.target.email })
            : undefined
        )}
        confirmLabel={t.common.delete}
        variant="destructive"
        loading={deleteMutation.loading}
        onConfirm={() => deleteDialog.target && deleteMutation.mutate(deleteDialog.target.id)}
      />
    </div>
  );
}