"use client";

import { FormEvent, useState } from "react";
import { Pencil, Plus, Power } from "lucide-react";
import { useRouter } from "next/navigation";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import type { ApiResult } from "@/modules/core/server/api";
import type { Organization } from "@/modules/core/types";

export function OrganizationManagementClient(): React.ReactElement {
  const router = useRouter();
  const [message, setMessage] = useState("");
  const [isPending, setIsPending] = useState(false);

  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    setMessage("");
    setIsPending(true);
    const formData = new FormData(event.currentTarget);
    const response = await fetch("/api/organizations", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        name: String(formData.get("name") ?? ""),
        slug: String(formData.get("slug") ?? ""),
      }),
    });
    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    setMessage(result.reason);
    event.currentTarget.reset();
    router.refresh();
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>新增机构</CardTitle>
        <CardDescription>创建后会自动初始化机构内置角色。</CardDescription>
      </CardHeader>
      <CardContent>
        <form className="grid gap-3 md:grid-cols-[1fr_1fr_auto]" onSubmit={handleSubmit}>
          <Input name="name" placeholder="机构名称" required />
          <Input name="slug" placeholder="机构标识，可留空" />
          <Button disabled={isPending} type="submit">
            <Plus className="size-4" aria-hidden="true" />
            新增机构
          </Button>
        </form>
        {message ? (
          <p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
            {message}
          </p>
        ) : null}
      </CardContent>
    </Card>
  );
}

type OrganizationRowActionsProps = {
  organization: Organization;
};

export function OrganizationRowActions({ organization }: OrganizationRowActionsProps): React.ReactElement {
  const router = useRouter();
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [message, setMessage] = useState("");
  const [isPending, setIsPending] = useState(false);

  async function updateOrganization(payload: Record<string, string>): Promise<void> {
    setMessage("");
    setIsPending(true);
    const response = await fetch(`/api/organizations/${organization.id}`, {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(payload),
    });
    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    setMessage(result.reason);
    setIsEditOpen(false);
    router.refresh();
  }

  async function disableOrganization(): Promise<void> {
    setMessage("");
    setIsPending(true);
    const response = await fetch(`/api/organizations/${organization.id}`, {
      method: "DELETE",
    });
    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    router.refresh();
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    await updateOrganization({
      name: String(formData.get("name") ?? ""),
      slug: String(formData.get("slug") ?? ""),
      status: String(formData.get("status") ?? ""),
    });
  }

  return (
    <div className="flex items-center justify-end gap-2">
      <Button onClick={() => setIsEditOpen(true)} size="sm" type="button" variant="outline">
        <Pencil className="size-4" aria-hidden="true" />
        编辑
      </Button>
      {organization.status === "disabled" ? (
        <Button
          disabled={isPending}
          onClick={() => void updateOrganization({ status: "active" })}
          size="sm"
          type="button"
          variant="outline"
        >
          <Power className="size-4" aria-hidden="true" />
          启用
        </Button>
      ) : (
        <Button disabled={isPending} onClick={() => void disableOrganization()} size="sm" type="button" variant="destructive">
          <Power className="size-4" aria-hidden="true" />
          停用
        </Button>
      )}
      <Dialog
        description="编辑机构名称、唯一标识和启停状态。"
        onClose={() => setIsEditOpen(false)}
        open={isEditOpen}
        title="编辑机构"
      >
        <form className="grid gap-4" onSubmit={handleSubmit}>
          <label className="grid gap-2 text-sm">
            <span className="font-medium">机构名称</span>
            <Input defaultValue={organization.name} name="name" required />
          </label>
          <label className="grid gap-2 text-sm">
            <span className="font-medium">机构标识</span>
            <Input defaultValue={organization.slug} name="slug" required />
          </label>
          <label className="grid gap-2 text-sm">
            <span className="font-medium">状态</span>
            <select
              className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
              defaultValue={organization.status}
              name="status"
            >
              <option value="active">启用</option>
              <option value="disabled">停用</option>
            </select>
          </label>
          {message ? (
            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
              {message}
            </p>
          ) : null}
          <div className="flex justify-end gap-2">
            <Button onClick={() => setIsEditOpen(false)} type="button" variant="outline">
              取消
            </Button>
            <Button disabled={isPending} type="submit">
              保存
            </Button>
          </div>
        </form>
      </Dialog>
    </div>
  );
}