"use client";

import { FormEvent, useState } from "react";
import { Copy, LinkIcon, Save, Send } from "lucide-react";
import { useRouter } from "next/navigation";

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

type OrganizationDetailClientProps = {
  invitations: OrganizationInvitation[];
  organization: Organization;
  roles: RoleDefinition[];
};

function getInviteHref(token: string): string {
  return `/register?invite=${encodeURIComponent(token)}`;
}

export function OrganizationDetailClient({
  invitations,
  organization,
  roles,
}: OrganizationDetailClientProps): React.ReactElement {
  const router = useRouter();
  const [settingsMessage, setSettingsMessage] = useState("");
  const [inviteMessage, setInviteMessage] = useState("");
  const [isPending, setIsPending] = useState(false);
  const organizationRoles = roles.filter((role) => role.scope === "organization" && role.organizationId === organization.id && role.isEnabled);
  const defaultRoleId = organizationRoles.find((role) => role.key === "caregiver")?.id ?? organizationRoles[0]?.id ?? "";

  async function handleSettingsSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    setSettingsMessage("");
    setIsPending(true);
    const formData = new FormData(event.currentTarget);
    const response = await fetch(`/api/organizations/${organization.id}`, {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        registrationEnabled: formData.get("registrationEnabled") === "on",
        oidcEnabled: formData.get("oidcEnabled") === "on",
        oidcIssuerUrl: String(formData.get("oidcIssuerUrl") ?? ""),
        oidcClientId: String(formData.get("oidcClientId") ?? ""),
        oidcClientSecret: String(formData.get("oidcClientSecret") ?? ""),
        oidcScopes: String(formData.get("oidcScopes") ?? ""),
        oidcRedirectUri: String(formData.get("oidcRedirectUri") ?? ""),
        oidcAutoProvision: formData.get("oidcAutoProvision") === "on",
      }),
    });
    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
    setIsPending(false);

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

    setSettingsMessage(result.reason);
    router.refresh();
  }

  async function handleInviteSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    setInviteMessage("");
    setIsPending(true);
    const formData = new FormData(event.currentTarget);
    const response = await fetch(`/api/organizations/${organization.id}/invitations`, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        email: String(formData.get("email") ?? ""),
        roleId: String(formData.get("roleId") ?? ""),
      }),
    });
    const result = (await response.json()) as ApiResult<{ invitation: OrganizationInvitation }>;
    setIsPending(false);

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

    setInviteMessage(`${result.reason}：${getInviteHref(result.invitation.token)}`);
    event.currentTarget.reset();
    router.refresh();
  }

  return (
    <div className="grid gap-5 xl:grid-cols-[0.95fr_1.05fr]">
      <Card>
        <CardHeader>
          <CardTitle>机构访问配置</CardTitle>
          <CardDescription>控制公开注册、OIDC 登录入口和自动开户策略。</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="grid gap-4" onSubmit={handleSettingsSubmit}>
            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
              <span>
                <span className="block font-medium">开放公开注册</span>
                <span className="block text-xs text-muted-foreground">关闭后，注册页不再展示该机构；邀请链接仍可使用。</span>
              </span>
              <input defaultChecked={organization.registrationEnabled} name="registrationEnabled" type="checkbox" />
            </label>

            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
              <span>
                <span className="block font-medium">启用 OIDC 登录</span>
                <span className="block text-xs text-muted-foreground">保存标准 OIDC 配置，后续登录入口按该开关展示。</span>
              </span>
              <input defaultChecked={organization.oidcEnabled} name="oidcEnabled" type="checkbox" />
            </label>

            <div className="grid gap-3 md:grid-cols-2">
              <label className="grid gap-2 text-sm">
                <span className="font-medium">Issuer URL</span>
                <Input defaultValue={organization.oidcIssuerUrl} name="oidcIssuerUrl" placeholder="https://idp.example.com" />
              </label>
              <label className="grid gap-2 text-sm">
                <span className="font-medium">Client ID</span>
                <Input defaultValue={organization.oidcClientId} name="oidcClientId" />
              </label>
            </div>

            <label className="grid gap-2 text-sm">
              <span className="font-medium">Client Secret</span>
              <Input
                name="oidcClientSecret"
                placeholder={organization.oidcHasClientSecret ? "已配置，留空则不修改" : "未配置"}
                type="password"
              />
            </label>

            <div className="grid gap-3 md:grid-cols-2">
              <label className="grid gap-2 text-sm">
                <span className="font-medium">Scopes</span>
                <Input defaultValue={organization.oidcScopes} name="oidcScopes" placeholder="openid profile email" />
              </label>
              <label className="grid gap-2 text-sm">
                <span className="font-medium">Redirect URI</span>
                <Input defaultValue={organization.oidcRedirectUri} name="oidcRedirectUri" placeholder="/api/auth/oidc/callback" />
              </label>
            </div>

            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
              <span>
                <span className="block font-medium">OIDC 自动开户</span>
                <span className="block text-xs text-muted-foreground">首次 OIDC 登录时自动创建账号并进入本机构。</span>
              </span>
              <input defaultChecked={organization.oidcAutoProvision} name="oidcAutoProvision" type="checkbox" />
            </label>

            {settingsMessage ? (
              <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
                {settingsMessage}
              </p>
            ) : null}

            <Button className="w-fit" disabled={isPending} type="submit">
              <Save className="size-4" aria-hidden="true" />
              保存配置
            </Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>机构邀请</CardTitle>
          <CardDescription>生成邀请链接后发送给成员；可限定邮箱，也可生成通用邀请。</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <form className="grid gap-3 md:grid-cols-[1fr_1fr_auto]" onSubmit={handleInviteSubmit}>
            <Input name="email" placeholder="邮箱，可留空" type="email" />
            <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={defaultRoleId}
              name="roleId"
              required
            >
              {organizationRoles.map((role) => (
                <option key={role.id} value={role.id}>
                  {role.label}
                </option>
              ))}
            </select>
            <Button disabled={isPending || !defaultRoleId} type="submit">
              <Send className="size-4" aria-hidden="true" />
              生成邀请
            </Button>
          </form>
          {inviteMessage ? (
            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
              {inviteMessage}
            </p>
          ) : null}

          <div className="overflow-x-auto rounded-md border">
            <table className="w-full min-w-[720px] text-sm">
              <thead className="bg-secondary text-left text-xs text-muted-foreground">
                <tr>
                  <th className="px-4 py-3 font-medium">对象</th>
                  <th className="px-4 py-3 font-medium">角色</th>
                  <th className="px-4 py-3 font-medium">状态</th>
                  <th className="px-4 py-3 font-medium">有效期</th>
                  <th className="px-4 py-3 text-right font-medium">链接</th>
                </tr>
              </thead>
              <tbody className="divide-y bg-card">
                {invitations.map((invitation) => (
                  <tr className="hover:bg-secondary/45" key={invitation.id}>
                    <td className="px-4 py-3">{invitation.email || "通用邀请"}</td>
                    <td className="px-4 py-3">{invitation.roleLabel}</td>
                    <td className="px-4 py-3">
                      <Badge variant={invitation.status === "active" ? "success" : "secondary"}>{invitation.status}</Badge>
                    </td>
                    <td className="px-4 py-3 text-muted-foreground">
                      {new Date(invitation.expiresAt).toLocaleString("zh-CN")}
                    </td>
                    <td className="px-4 py-3 text-right">
                      <Button
                        onClick={() => void navigator.clipboard.writeText(getInviteHref(invitation.token))}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        <Copy className="size-4" aria-hidden="true" />
                        复制
                      </Button>
                    </td>
                  </tr>
                ))}
                {invitations.length === 0 ? (
                  <tr>
                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={5}>
                      暂无邀请
                    </td>
                  </tr>
                ) : null}
              </tbody>
            </table>
          </div>
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <LinkIcon className="size-4" aria-hidden="true" />
            邀请链接使用 `/register?invite=...`，注册后自动加入机构。
          </div>
        </CardContent>
      </Card>
    </div>
  );
}