import { Check, Pencil, X } from "lucide-react";
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 { PageHeader } from "@/client/components/ui/page-header";
import { Skeleton } from "@/client/components/ui/skeleton";
import { useRequireSession } from "@/client/hooks/use-auth-guard";
import { type SessionUser } from "@/client/lib/auth-client";
import { fallbackHandle } from "@/client/lib/handle";
import { apiJsonRequest, responseMessage } from "@/client/lib/http";

interface UsernameEditorProps {
  initial: string;
  onSaved: () => void | Promise<void>;
}

// The page passes `key={currentHandle}` so a successful save (which
// updates `currentHandle`) remounts this component, resetting the
// editing/pending/error/value state without an effect-driven sync.
const UsernameEditor = ({ initial, onSaved }: UsernameEditorProps) => {
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(initial);
  const [pending, setPending] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  const cancel = () => {
    setValue(initial);
    setErr(null);
    setEditing(false);
  };

  const save = async () => {
    setErr(null);
    setPending(true);
    try {
      const res = await apiJsonRequest("/api/account/handle", { preferredUsername: value }, { method: "POST" });
      if (!res.ok) {
        setErr(await responseMessage(res, "Could not update username."));
        return;
      }
      await onSaved();
      setEditing(false);
    } finally {
      setPending(false);
    }
  };

  return (
    <Card>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
        <div className="min-w-0 flex-1">
          <h2 className="text-lg font-semibold text-zinc-100">Username</h2>
          <p className="mt-1 text-xs text-zinc-500">
            Your <code className="font-mono">preferred_username</code> claim. Downstream apps may use it as a slug.
          </p>
          {editing && err ? <p className="mt-2 text-xs text-red-400">{err}</p> : null}
        </div>
        <div className="flex shrink-0 items-center gap-2">
          {editing ? (
            <>
              <input
                value={value}
                onChange={(e) => setValue(e.target.value.toLowerCase())}
                maxLength={32}
                autoFocus
                autoCapitalize="off"
                autoCorrect="off"
                spellCheck={false}
                disabled={pending}
                aria-label="Username"
                className="h-9 w-48 rounded-lg border border-zinc-700/60 bg-zinc-800/80 px-3 font-mono text-sm text-zinc-100 focus:border-accent-500/50 focus:outline-none focus:ring-1 focus:ring-accent-500/30 disabled:cursor-not-allowed disabled:opacity-60"
                onKeyDown={(e) => {
                  if (pending) return;
                  if (e.key === "Escape") cancel();
                  if (e.key === "Enter") void save();
                }}
              />
              <Button size="sm" loading={pending} onClick={save} aria-label="Save username" className="!px-2">
                {pending ? null : <Check className="h-4 w-4" aria-hidden="true" />}
              </Button>
              <Button
                size="sm"
                variant="ghost"
                onClick={cancel}
                disabled={pending}
                aria-label="Cancel"
                className="!px-2"
              >
                <X className="h-4 w-4" aria-hidden="true" />
              </Button>
            </>
          ) : (
            <>
              <code className="inline-flex h-9 items-center rounded-lg border border-transparent bg-zinc-800/60 px-3 font-mono text-sm text-zinc-100">
                {initial}
              </code>
              <Button size="sm" variant="ghost" onClick={() => setEditing(true)}>
                <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
                Edit
              </Button>
            </>
          )}
        </div>
      </div>
    </Card>
  );
};

const AccountProfilePageSkeleton = () => (
  <div className="mx-auto max-w-3xl" aria-busy="true">
    <Skeleton className="mb-6 h-4 w-24" />
    <div className="mb-8">
      <Skeleton className="mb-3 h-8 w-32" />
      <Skeleton className="h-4 w-72" />
    </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-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
        <div className="min-w-0 flex-1 space-y-2">
          <Skeleton className="h-5 w-28" />
          <Skeleton className="h-3 w-72" />
        </div>
        <div className="flex shrink-0 items-center gap-2">
          <Skeleton className="h-9 w-48" />
          <Skeleton className="h-9 w-16" />
        </div>
      </div>
    </div>
  </div>
);

export const AccountProfilePage = () => {
  const session = useRequireSession("/account/profile");

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

  const sessionUser = session.data.user as SessionUser;
  const currentHandle = sessionUser.preferredUsername ?? fallbackHandle(sessionUser);

  return (
    <div className="mx-auto max-w-3xl">
      <BackLink to="/account">Account</BackLink>
      <PageHeader title="Profile" description={`Signed in as ${session.data.user.email}.`} />
      <UsernameEditor key={currentHandle} initial={currentHandle} onSaved={() => session.refetch()} />
    </div>
  );
};