"use client";

import { CheckIcon, CopyIcon, EyeIcon, KeyIcon } from "@/assets/icons";
import { cn } from "@/lib/utils";
import { FC } from "react";
import IsVisible from "./IsVisible";
import { useResetPasswordModalPresenter } from "./useResetPasswordModalPresenter";

interface IProps {
  subjectName?: string | null;
  subjectLabel?: string;
  password: string | null;
  isLoading: boolean;
  isOpen: boolean;
}

const ResetPasswordModalContent: FC<IProps> = ({
  subjectName,
  subjectLabel = "user",
  password,
  isLoading,
  isOpen,
}) => {
  const {
    isCopied,
    isPasswordVisible,
    togglePasswordVisibility,
    copyPasswordToClipboard,
  } = useResetPasswordModalPresenter({ isOpen, password });

  return (
    <div
      className="w-full max-w-md sm:min-w-[24rem]"
      data-cy="reset-password-modal-content"
    >
      <div className="relative mb-5 flex flex-col items-center text-center">
        <div className="pointer-events-none absolute -top-6 h-24 w-24 rounded-full bg-primary/25 blur-3xl" />
        <div className="relative flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-primary/15 via-primary/10 to-primary/5 ring-1 ring-inset ring-primary/20 shadow-inner">
          <KeyIcon className="h-7 w-7 text-primary" />
        </div>
        <h3 className="mt-4 text-lg font-semibold tracking-tight text-dark dark:text-white">
          Reset Password
        </h3>
        <p className="mt-1 max-w-xs text-sm leading-relaxed text-dark-5 dark:text-dark-6">
          <IsVisible condition={!!subjectName}>
            A new password has been generated for{" "}
            <span className="font-medium text-dark dark:text-white">
              {subjectName}
            </span>
            . Copy it now — it will not be shown again.
          </IsVisible>
          <IsVisible condition={!subjectName}>
            Generating a new password for this {subjectLabel}. Copy it now — it
            will not be shown again.
          </IsVisible>
        </p>
      </div>

      <IsVisible condition={isLoading}>
        <div
          className="flex h-24 items-center justify-center rounded-xl bg-gray-1/60 ring-1 ring-inset ring-stroke dark:bg-dark/40 dark:ring-stroke-dark"
          data-cy="reset-password-loading"
        >
          <span className="inline-flex items-center gap-2 text-sm font-medium text-dark-5 dark:text-dark-6">
            <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary/30 border-t-primary" />
            Generating a secure password…
          </span>
        </div>
      </IsVisible>

      <IsVisible condition={!isLoading && !!password}>
        <div
          className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-1 via-white to-gray-1 p-4 ring-1 ring-inset ring-stroke shadow-sm dark:from-dark/40 dark:via-dark-2 dark:to-dark/40 dark:ring-stroke-dark"
          data-cy="reset-password-result"
        >
          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-dark-5 dark:text-dark-6">
            New password
          </p>
          <div className="flex items-center gap-2">
            <code
              className="flex-1 select-all rounded-lg bg-white px-3 py-2.5 font-mono text-sm font-semibold tracking-wide text-dark shadow-inner ring-1 ring-inset ring-stroke break-all dark:bg-dark-3 dark:text-white dark:ring-stroke-dark"
              data-cy="reset-password-value"
            >
              {isPasswordVisible
                ? password
                : "•".repeat(Math.max(password?.length ?? 0, 8))}
            </code>
            <button
              type="button"
              onClick={togglePasswordVisibility}
              className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white text-dark-5 ring-1 ring-inset ring-stroke transition hover:-translate-y-0.5 hover:text-primary dark:bg-dark-3 dark:text-dark-6 dark:ring-stroke-dark dark:hover:text-primary"
              data-cy="reset-password-toggle-visibility"
              aria-label={
                isPasswordVisible ? "Hide password" : "Show password"
              }
            >
              <EyeIcon className="h-5 w-5" />
            </button>
          </div>

          <button
            type="button"
            onClick={copyPasswordToClipboard}
            disabled={isCopied}
            className={cn(
              "mt-4 inline-flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-dark-2",
              isCopied
                ? "bg-gradient-to-br from-green to-green-dark text-white shadow-[0_6px_18px_-4px_rgba(34,173,92,0.55)] focus-visible:ring-green/40"
                : "bg-gradient-to-br from-primary to-[#4C46C9] text-white shadow-[0_6px_18px_-4px_rgba(87,80,241,0.55)] focus-visible:ring-primary/40",
            )}
            data-cy="reset-password-copy-button"
          >
            <IsVisible condition={isCopied}>
              <CheckIcon className="h-4 w-4" />
              <span>Copied</span>
            </IsVisible>
            <IsVisible condition={!isCopied}>
              <CopyIcon className="h-4 w-4" />
              <span>Copy to clipboard</span>
            </IsVisible>
          </button>
        </div>
      </IsVisible>
    </div>
  );
};

export default ResetPasswordModalContent;
