"use client";

import * as React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { StatusBadge } from "@/components/shared/status-badge";
import {
  loadSameIpUsersAction,
  loadSignInHistoryAction,
} from "@/lib/actions/admin-users";
import { formatDateTime } from "@/lib/format";
import { adminTexts } from "@/lib/i18n/admin";
import { adminUsersTexts } from "@/lib/i18n/admin-users";
import { DialogLoading, FormError, UserDialog } from "./dialog-shell";
import type { SameIpEntry, SignInEntry } from "./types";

/** Shared "load once when the dialog opens" hook for the read-only dialogs. */
function useDialogData<T>(
  open: boolean,
  load: () => Promise<{ ok: boolean; data?: T; error?: string }>,
): { data: T | null; error: string | null } {
  const [data, setData] = React.useState<T | null>(null);
  const [error, setError] = React.useState<string | null>(null);
  const loadRef = React.useRef(load);
  loadRef.current = load;

  React.useEffect(() => {
    if (!open) return;
    let cancelled = false;
    setData(null);
    setError(null);
    loadRef
      .current()
      .then((result) => {
        if (cancelled) return;
        if (result.ok && result.data !== undefined) setData(result.data);
        else setError(result.error ?? adminUsersTexts.errors.loadFailed);
      })
      .catch(() => {
        if (!cancelled) setError(adminUsersTexts.errors.loadFailed);
      });
    return () => {
      cancelled = true;
    };
  }, [open]);

  return { data, error };
}

const HEAD =
  "sticky top-0 z-10 border-b bg-card px-2.5 py-1.5 text-left text-[11px] font-semibold tracking-wider text-muted-foreground uppercase";

export function SignInHistoryDialog({
  userId,
  username,
  open,
  onOpenChange,
}: {
  userId: string;
  username: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const t = adminUsersTexts.signIn;
  const { data, error } = useDialogData<SignInEntry[]>(open, () =>
    loadSignInHistoryAction(userId),
  );

  return (
    <UserDialog
      open={open}
      onOpenChange={onOpenChange}
      title={`${t.title} · ${username}`}
      description={t.description}
      size="lg"
    >
      {error ? <FormError message={error} /> : null}
      {!data && !error ? <DialogLoading /> : null}

      {data ? (
        data.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">{t.empty}</p>
        ) : (
          <div className="max-h-[60vh] overflow-auto rounded-lg border">
            <table className="w-full border-separate border-spacing-0 text-sm">
              <thead>
                <tr>
                  <th className={HEAD}>{t.when}</th>
                  <th className={HEAD}>{t.ip}</th>
                  <th className={HEAD}>{t.agent}</th>
                </tr>
              </thead>
              <tbody>
                {data.map((row) => (
                  <tr key={row.id} className="[&:last-child>td]:border-0">
                    <td className="border-b px-2.5 py-1.5 whitespace-nowrap">
                      {formatDateTime(row.at)}
                    </td>
                    <td className="border-b px-2.5 py-1.5 font-mono text-xs whitespace-nowrap tabular-nums">
                      {row.ip}
                    </td>
                    <td
                      className="max-w-[24rem] truncate border-b px-2.5 py-1.5 text-xs text-muted-foreground"
                      title={row.userAgent}
                    >
                      {row.userAgent}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )
      ) : null}

      <div className="flex justify-end">
        <Button type="button" variant="outline" size="lg" onClick={() => onOpenChange(false)}>
          {adminTexts.common.close}
        </Button>
      </div>
    </UserDialog>
  );
}

export function SameIpDialog({
  userId,
  username,
  open,
  onOpenChange,
}: {
  userId: string;
  username: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const t = adminUsersTexts.sameIp;
  const { data, error } = useDialogData<SameIpEntry[]>(open, () =>
    loadSameIpUsersAction(userId),
  );

  return (
    <UserDialog
      open={open}
      onOpenChange={onOpenChange}
      title={`${t.title} · ${username}`}
      description={t.description}
      size="lg"
    >
      {error ? <FormError message={error} /> : null}
      {!data && !error ? <DialogLoading /> : null}

      {data ? (
        data.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">{t.empty}</p>
        ) : (
          <div className="max-h-[60vh] overflow-auto rounded-lg border">
            <table className="w-full border-separate border-spacing-0 text-sm">
              <thead>
                <tr>
                  <th className={HEAD}>{t.user}</th>
                  <th className={HEAD}>{t.sharedIps}</th>
                  <th className={HEAD}>{t.lastSeen}</th>
                  <th className={HEAD} />
                </tr>
              </thead>
              <tbody>
                {data.map((row) => (
                  <tr key={row.id} className="[&:last-child>td]:border-0">
                    <td className="border-b px-2.5 py-1.5">
                      <div className="leading-tight">
                        <div className="flex items-center gap-1.5">
                          <span className="text-sm font-medium">{row.username}</span>
                          <StatusBadge status={row.status} />
                        </div>
                        <div className="truncate text-xs text-muted-foreground">
                          {row.email}
                        </div>
                      </div>
                    </td>
                    <td className="border-b px-2.5 py-1.5">
                      <div className="flex flex-wrap gap-1">
                        {row.ips.slice(0, 4).map((ip) => (
                          <span
                            key={ip}
                            className="rounded bg-muted px-1.5 py-px font-mono text-[11px] text-muted-foreground tabular-nums"
                          >
                            {ip}
                          </span>
                        ))}
                        {row.ips.length > 4 ? (
                          <span className="text-[11px] text-muted-foreground">
                            +{row.ips.length - 4}
                          </span>
                        ) : null}
                      </div>
                    </td>
                    <td className="border-b px-2.5 py-1.5 text-xs whitespace-nowrap text-muted-foreground">
                      {formatDateTime(row.lastSeen)}
                    </td>
                    <td className="border-b px-2.5 py-1.5 text-right">
                      <Link
                        href={`/admin/users?q=${encodeURIComponent(row.username)}&qf=username`}
                        className="text-xs font-medium text-blue-600 hover:underline dark:text-blue-400"
                      >
                        {t.openUser}
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )
      ) : null}

      <div className="flex justify-end">
        <Button type="button" variant="outline" size="lg" onClick={() => onOpenChange(false)}>
          {adminTexts.common.close}
        </Button>
      </div>
    </UserDialog>
  );
}