"use client";

import { useState } from "react";
import { Loader2, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
import { toast } from "sonner";

import type { PortalAccessUserRow } from "@/app/dashboard/admins/portal/_lib/portal-access-server-api";
import { fetchPortalUsersList } from "@/components/admins/portal/api/portal-users-api";
import { PrincipalBadge } from "@/components/admins/rbac/principal-badge";
import { ErrorBanner } from "@/components/shared/error-banner";
import { DeleteConfirmDialog } from "@/components/shared/delete-confirm-dialog";
import { useDashboardList } from "@/components/settings/hooks/use-dashboard-list";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { isApiSuccess } from "@/lib/api-messages";
import { requestDashboardApi } from "@/lib/dashboard-api-client";
import { toastApiError, runDeleteMutation } from "@/lib/toast-api-error";

type PortalUsersPageClientProps = {
  customerId: number;
  initialUsers: PortalAccessUserRow[];
  groups: Array<{ group_id: number; name: string }>;
  initialErrorMessage: string | null;
};

type UserFormState = {
  email: string;
  first_name: string;
  last_name: string;
  password: string;
  group_id: string;
  status: string;
};

const EMPTY_FORM: UserFormState = {
  email: "",
  first_name: "",
  last_name: "",
  password: "",
  group_id: "",
  status: "active",
};

export function PortalUsersPageClient({
  customerId,
  initialUsers,
  groups,
  initialErrorMessage,
}: PortalUsersPageClientProps) {
  const {
    data: users,
    isRefreshing,
    refresh,
    removeLocal,
  } = useDashboardList<PortalAccessUserRow>({
    fetcher: () => fetchPortalUsersList(customerId),
    initialData: initialUsers,
    skipInitialLoad: true,
    errorMessage: "Could not load portal users.",
    refreshSuccessMessage: "Portal users refreshed",
  });
  const [sheetOpen, setSheetOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<PortalAccessUserRow | null>(null);
  const [form, setForm] = useState<UserFormState>(EMPTY_FORM);
  const [saving, setSaving] = useState(false);
  const [pendingDeleteUser, setPendingDeleteUser] = useState<PortalAccessUserRow | null>(null);

  function openCreate() {
    setEditingUser(null);
    setForm(EMPTY_FORM);
    setSheetOpen(true);
  }

  function openEdit(user: PortalAccessUserRow) {
    setEditingUser(user);
    setForm({
      email: user.email,
      first_name: user.first_name ?? "",
      last_name: user.last_name ?? "",
      password: "",
      group_id: user.group_id ? String(user.group_id) : "",
      status: user.status || "active",
    });
    setSheetOpen(true);
  }

  async function handleSave() {
    if (!form.email.trim()) {
      toast.error("Email is required.");
      return;
    }

    setSaving(true);
    try {
      const url = editingUser
        ? "/dashboard/admins/portal/users/update"
        : "/dashboard/admins/portal/users/create";
      const data = await requestDashboardApi<{ status?: string; message?: string }>({
        url,
        method: "POST",
        body: {
          customerId,
          userId: editingUser?.id,
          email: form.email.trim(),
          first_name: form.first_name.trim(),
          last_name: form.last_name.trim(),
          password: form.password || undefined,
          group_id: form.group_id ? Number(form.group_id) : null,
          status: form.status,
        },
        fallbackError: "Could not save portal user.",
        validate: (payload) => isApiSuccess(payload),
      });

      toast.success(data.message ?? "Portal user saved.");
      setSheetOpen(false);
      setEditingUser(null);
      await refresh();
    } catch (error) {
      toastApiError(error, "Could not save portal user.");
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete() {
    const target = pendingDeleteUser;
    if (!target) return;

    await runDeleteMutation(async () => {
      await requestDashboardApi<{ status?: string; message?: string }>({
        url: "/dashboard/admins/portal/users/delete",
        method: "POST",
        body: { customerId, userId: target.id },
        fallbackError: "Could not delete portal user.",
        validate: (payload) => isApiSuccess(payload),
      });
      removeLocal(String(target.id));
      toast.success("Portal user deleted.");
    }, "Could not delete portal user.");
  }

  if (initialErrorMessage) {
    return <ErrorBanner message={initialErrorMessage} />;
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-3">
        <p className="text-muted-foreground text-sm">
          Portal logins for this customer tenant. Corporate parent accounts are flagged when reported by the backend.
        </p>
        <div className="flex gap-2">
          <Button variant="outline" onClick={() => void refresh()} disabled={isRefreshing}>
            {isRefreshing ? (
              <Loader2 className="animate-spin" />
            ) : (
              <RefreshCw />
            )}
            Refresh
          </Button>
          <Button onClick={openCreate}>
            <Plus />
            New user
          </Button>
        </div>
      </div>

      <div className="rounded-xl border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Role</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="py-8 text-center text-muted-foreground">
                  No portal users yet.
                </TableCell>
              </TableRow>
            ) : (
              users.map((user) => (
                <TableRow key={user.id}>
                  <TableCell>
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="font-medium">{user.name}</span>
                      {user.is_corporate_portal_actor || user.account_type === "C" ? (
                        <Badge variant="outline">Corporate</Badge>
                      ) : null}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="space-y-1">
                      <span className="text-sm">{user.email}</span>
                      {user.customer_uid ? (
                        <PrincipalBadge principal={`customer:${user.customer_uid}`} principalType="customer" />
                      ) : null}
                    </div>
                  </TableCell>
                  <TableCell>{user.group_name ?? "—"}</TableCell>
                  <TableCell>
                    <Badge variant={user.status === "active" ? "secondary" : "outline"}>
                      {user.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button size="sm" variant="outline" onClick={() => openEdit(user)}>
                        <Pencil />
                        Edit
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => setPendingDeleteUser(user)}>
                        <Trash2 />
                        Delete
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
        <SheetContent className="sm:max-w-md">
          <SheetHeader>
            <SheetTitle>{editingUser ? "Edit portal user" : "Create portal user"}</SheetTitle>
            <SheetDescription>Assign a portal role (group) for this tenant.</SheetDescription>
          </SheetHeader>
          <div className="mt-4 space-y-3">
            <div className="space-y-1">
              <Label>Email</Label>
              <Input
                value={form.email}
                onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))}
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1">
                <Label>First name</Label>
                <Input
                  value={form.first_name}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, first_name: event.target.value }))
                  }
                />
              </div>
              <div className="space-y-1">
                <Label>Last name</Label>
                <Input
                  value={form.last_name}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, last_name: event.target.value }))
                  }
                />
              </div>
            </div>
            <div className="space-y-1">
              <Label>{editingUser ? "New password (optional)" : "Password"}</Label>
              <Input
                type="password"
                value={form.password}
                onChange={(event) => setForm((current) => ({ ...current, password: event.target.value }))}
              />
            </div>
            <div className="space-y-1">
              <Label>Role</Label>
              <Select
                value={form.group_id || undefined}
                onValueChange={(value) => setForm((current) => ({ ...current, group_id: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select role" />
                </SelectTrigger>
                <SelectContent>
                  {groups.map((group) => (
                    <SelectItem key={group.group_id} value={String(group.group_id)}>
                      {group.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label>Status</Label>
              <Select
                value={form.status}
                onValueChange={(value) => setForm((current) => ({ ...current, status: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="inactive">Inactive</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <SheetFooter className="mt-6">
            <Button variant="outline" onClick={() => setSheetOpen(false)} disabled={saving}>
              Cancel
            </Button>
            <Button onClick={() => void handleSave()} disabled={saving}>
              {saving ? "Saving…" : "Save user"}
            </Button>
          </SheetFooter>
        </SheetContent>
      </Sheet>

      <DeleteConfirmDialog
        open={Boolean(pendingDeleteUser)}
        onOpenChange={(open) => {
          if (!open) setPendingDeleteUser(null);
        }}
        icon={Trash2}
        title="Delete portal user?"
        description={
          pendingDeleteUser ? (
            <>
              <span className="font-medium text-foreground">{pendingDeleteUser.email}</span> will
              be permanently removed. This action cannot be undone.
            </>
          ) : (
            "This portal user will be permanently removed. This action cannot be undone."
          )
        }
        confirmLabel="Delete user"
        onConfirm={handleDelete}
      />
    </div>
  );
}