import { useState } from "react";

import { BackLink } from "@/client/components/ui/back-link";
import { Button } from "@/client/components/ui/button";
import { Card } from "@/client/components/ui/card";
import { Input } from "@/client/components/ui/input";
import { PageError } from "@/client/components/ui/page-error";
import { PageHeader } from "@/client/components/ui/page-header";
import { Skeleton } from "@/client/components/ui/skeleton";
import { useRequireSession } from "@/client/hooks/use-auth-guard";
import { authClient } from "@/client/lib/auth-client";

const AccountPasswordPageSkeleton = () => (
  <div className="mx-auto max-w-md py-12" aria-busy="true">
    <Skeleton className="mb-6 h-4 w-24" />
    <div className="mb-8">
      <Skeleton className="mb-3 h-8 w-52" />
      <Skeleton className="h-4 w-full max-w-sm" />
    </div>
    <div className="rounded-2xl border border-zinc-800/60 bg-zinc-900/40 p-5 sm:p-6">
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-1.5">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-11 w-full rounded-xl" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Skeleton className="h-4 w-28" />
          <Skeleton className="h-11 w-full rounded-xl" />
          <Skeleton className="h-3 w-40" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Skeleton className="h-4 w-44" />
          <Skeleton className="h-11 w-full rounded-xl" />
        </div>
        <Skeleton className="mt-3 h-11 w-40 rounded-xl" />
      </div>
    </div>
  </div>
);

export const AccountPasswordPage = () => {
  const session = useRequireSession("/account/password");

  const [current, setCurrent] = useState("");
  const [next, setNext] = useState("");
  const [confirm, setConfirm] = useState("");
  const [pending, setPending] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  if (session.isPending || !session.data) {
    return <AccountPasswordPageSkeleton />;
  }

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErr(null);
    setSuccess(false);
    if (next !== confirm) {
      setErr("New passwords don't match.");
      return;
    }
    if (next.length < 12) {
      setErr("New password must be at least 12 characters.");
      return;
    }
    setPending(true);
    try {
      const res = await authClient.changePassword({
        currentPassword: current,
        newPassword: next,
        revokeOtherSessions: true,
      });
      if (res.error) {
        setErr(res.error.message ?? "Could not change password.");
        return;
      }
      setCurrent("");
      setNext("");
      setConfirm("");
      setSuccess(true);
    } finally {
      setPending(false);
    }
  };

  return (
    <div className="mx-auto max-w-md py-12">
      <BackLink to="/account">Account</BackLink>

      <PageHeader
        title="Change password"
        description="Replaces the password on your email + password credential. Other active sessions are revoked."
      />

      <PageError message={err} onDismiss={() => setErr(null)} />

      <Card>
        <form onSubmit={submit} className="flex flex-col gap-4">
          <Input
            label="Current password"
            type="password"
            autoComplete="current-password"
            required
            value={current}
            onChange={(e) => setCurrent(e.target.value)}
          />
          <Input
            label="New password"
            type="password"
            autoComplete="new-password"
            required
            minLength={12}
            helper="At least 12 characters."
            value={next}
            onChange={(e) => setNext(e.target.value)}
          />
          <Input
            label="Confirm new password"
            type="password"
            autoComplete="new-password"
            required
            minLength={12}
            value={confirm}
            onChange={(e) => setConfirm(e.target.value)}
            onBlur={() => {
              // Catch the mismatch before submit so the user notices while
              // their attention is still on the field.
              if (confirm && next && confirm !== next) {
                setErr("New passwords don't match.");
              }
            }}
          />
          {success ? (
            <p className="mt-2 text-sm text-accent-400">Password updated. Other sessions have been signed out.</p>
          ) : null}
          <Button type="submit" loading={pending} className="mt-3">
            Change password
          </Button>
        </form>
      </Card>
    </div>
  );
};