"use client";

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

import type { PortalAccessUserRow } from "@/app/dashboard/admins/portal/_lib/portal-access-server-api";
import { PrincipalBadge } from "@/components/admins/rbac/principal-badge";
import { ErrorBanner } from "@/components/shared/error-banner";
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";

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 [users, setUsers] = useState(initialUsers);
  const [sheetOpen, setSheetOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<PortalAccessUserRow | null>(null);
  const [form, setForm] = useState<UserFormState>(EMPTY_FORM);
  const [saving, setSaving] = useState(false);

  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);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Could not save portal user.");
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete(user: PortalAccessUserRow) {
    if (!window.confirm(`Delete portal user "${user.email}"?`)) return;

    try {
      await requestDashboardApi<{ status?: string; message?: string }>({
        url: "/dashboard/admins/portal/users/delete",
        method: "POST",
        body: { customerId, userId: user.id },
        fallbackError: "Could not delete portal user.",
        validate: (payload) => isApiSuccess(payload),
      });
      setUsers((current) => current.filter((item) => item.id !== user.id));
      toast.success("Portal user deleted.");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "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>
        <Button onClick={openCreate}>
          <Plus />
          New user
        </Button>
      </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={() => void handleDelete(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>
    </div>
  );
}