"use client";
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Pencil, Trash2, Eye, Plus } from "lucide-react";
import { DataTable } from "@/components/shared/data-table";
import {
  PageHeader,
  PreviewNotice,
  StatusBadge,
  Panel,
} from "@/components/shared/page";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/shared/field";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  PreviewLink,
  usePreviewRole,
} from "@/components/layout/preview-context";
import { canManage } from "@/lib/preview";
import { currency } from "@/lib/format";
import { usePeople } from "./people-provider";
import { PersonForm } from "./person-form";
import { blankPerson } from "./fixtures";
import type { Person } from "./model";
export function PeopleView({ investors = false }: { investors?: boolean }) {
  const { people, setPeople } = usePeople();
  const [editing, setEditing] = useState<Person | null>(null),
    [deleting, setDeleting] = useState<Person | null>(null),
    [groups, setGroups] = useState(["No group", "Central Partners"]),
    [groupName, setGroupName] = useState(""),
    [groupOpen, setGroupOpen] = useState(false),
    [notice, setNotice] = useState("");
  const role = usePreviewRole();
  const createdId = useSearchParams().get("created");
  const created = people.find((p) => p.id === createdId);
  if (!canManage(role))
    return (
      <PreviewNotice>
        This preview identity cannot manage organization users.
      </PreviewNotice>
    );
  const rows = people.filter((p) =>
    investors ? p.role === "Investor" : p.role === "Customer",
  );
  return (
    <>
      <PageHeader title={investors ? "Organization Investors" : "Customers"} />
      <div className="space-y-5">
        <PreviewNotice />
        {created && (
          <p
            role="status"
            className="rounded-lg border border-success/30 p-3 text-success"
          >
            Organization user {created.name} ({created.role}) created in this
            session.
          </p>
        )}
        {notice && (
          <p role="status" className="text-success">
            {notice}
          </p>
        )}
        {investors && (
          <Panel title="Investor Groups">
            <div className="flex flex-wrap items-center gap-3 p-5">
              {groups.map((g) => (
                <span key={g} className="rounded-lg border px-3 py-2 text-sm">
                  {g}
                  <span className="ml-2 text-muted-foreground">
                    {rows.filter((r) => r.group === g).length}
                  </span>
                  {g !== "No group" && (
                    <button
                      aria-label={`Delete group ${g}`}
                      className="ml-3 text-destructive"
                      onClick={() => {
                        setPeople((all) =>
                          all.map((p) =>
                            p.group === g ? { ...p, group: "No group" } : p,
                          ),
                        );
                        setGroups((all) => all.filter((x) => x !== g));
                        setNotice("Group removed; members moved to No group.");
                      }}
                    >
                      ×
                    </button>
                  )}
                </span>
              ))}
              <Button variant="outline" onClick={() => setGroupOpen(true)}>
                <Plus className="size-4" />
                Add Group
              </Button>
            </div>
          </Panel>
        )}
        <DataTable
          title={investors ? "Investor List" : "User List"}
          rows={rows}
          onCreate={() =>
            setEditing({
              ...blankPerson,
              role: investors ? "Investor" : "Customer",
            })
          }
          columns={[
            {
              key: "name",
              label: "Name",
              render: (r) =>
                investors ? (
                  r.name
                ) : (
                  <PreviewLink
                    href={`/customers/${r.id}`}
                    className="text-link"
                  >
                    {r.name}
                  </PreviewLink>
                ),
            },
            { key: "email", label: "Email" },
            { key: "phone", label: "Phone" },
            { key: "role", label: "Role" },
            ...(investors
              ? [{ key: "group" as const, label: "Investor Group" }]
              : [
                  {
                    key: "balance" as const,
                    label: "Balance",
                    render: (r: Person) => currency(r.balance),
                  },
                ]),
            {
              key: "status",
              label: "Status",
              render: (r) => <StatusBadge>{r.status}</StatusBadge>,
            },
          ]}
          filters={[
            { key: "status", label: "Status", options: ["Active", "Inactive"] },
          ]}
          actions={(r) => (
            <>
              {!investors && (
                <PreviewLink
                  href={`/customers/${r.id}`}
                  className="p-2 text-info"
                >
                  <Eye className="size-4" />
                  <span className="sr-only">View {r.name}</span>
                </PreviewLink>
              )}
              <Button
                variant="ghost"
                size="icon"
                aria-label={`Edit ${r.name}`}
                onClick={() => setEditing({ ...r })}
              >
                <Pencil className="size-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                aria-label={`Delete ${r.name}`}
                onClick={() => setDeleting(r)}
              >
                <Trash2 className="size-4" />
              </Button>
            </>
          )}
        />
        {investors && (
          <PreviewLink href="/users/new" className="text-link">
            Create organization user
          </PreviewLink>
        )}
      </div>
      <Dialog
        open={!!editing}
        onOpenChange={(open) => {
          if (!open) setEditing(null);
        }}
      >
        <DialogContent className="max-h-[90dvh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editing?.id ? "Edit" : "Create"}{" "}
              {investors ? "Investor" : "Customer"}
            </DialogTitle>
            <DialogDescription>
              Save changes to the current browser session.
            </DialogDescription>
          </DialogHeader>
          {editing && (
            <PersonForm
              key={editing.id || "new"}
              initial={editing}
              people={people}
              groups={groups}
              onCancel={() => setEditing(null)}
              onSave={(p) => {
                const next = {
                  ...p,
                  id: p.id || `customer-preview-${crypto.randomUUID()}`,
                };
                setPeople((all) =>
                  p.id
                    ? all.map((r) => (r.id === p.id ? next : r))
                    : [next, ...all],
                );
                setEditing(null);
                setNotice("User saved in local preview.");
              }}
            />
          )}
        </DialogContent>
      </Dialog>
      <Dialog
        open={!!deleting}
        onOpenChange={(open) => {
          if (!open) setDeleting(null);
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete {deleting?.name}?</DialogTitle>
            <DialogDescription>
              This removes only the local fixture record.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleting(null)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={() => {
                setPeople((all) => all.filter((r) => r.id !== deleting?.id));
                setDeleting(null);
                setNotice("User removed from local preview.");
              }}
            >
              Delete Preview
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <Dialog open={groupOpen} onOpenChange={setGroupOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add Investor Group</DialogTitle>
            <DialogDescription>
              Group fixture investors in this session.
            </DialogDescription>
          </DialogHeader>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              const name = groupName.trim();
              if (!name || groups.includes(name)) return;
              setGroups([...groups, name]);
              setGroupName("");
              setGroupOpen(false);
              setNotice("Investor group added.");
            }}
          >
            <Field
              label="Group Name"
              required
              value={groupName}
              onChange={(e) => setGroupName(e.target.value)}
            />
            <div className="mt-5 flex justify-end gap-2">
              <Button
                variant="outline"
                type="button"
                onClick={() => setGroupOpen(false)}
              >
                Cancel
              </Button>
              <Button
                disabled={
                  !groupName.trim() || groups.includes(groupName.trim())
                }
              >
                Add Group
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
}
export function NewUserView() {
  const { people, setPeople } = usePeople(),
    router = useRouter(),
    role = usePreviewRole();
  return (
    <>
      <PageHeader title="Create New User" />
      {canManage(role) ? (
        <Panel>
          <div className="max-w-2xl space-y-5 p-6">
            <PreviewNotice />
            <PersonForm
              initial={{ ...blankPerson, role: "Operator" }}
              people={people}
              account
              onCancel={() => router.back()}
              onSave={(person) => {
                const id = `user-${crypto.randomUUID()}`;
                setPeople((all) => [{ ...person, id }, ...all]);
                router.push(`/organization/users?role=${role}&created=${id}`);
              }}
            />
          </div>
        </Panel>
      ) : (
        <PreviewNotice>
          This identity cannot create organization users.
        </PreviewNotice>
      )}
    </>
  );
}