"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

import PasswordFields from "@/components/admin/PasswordFields";
import { Card } from "@/components/admin/ui";
import type { ProfileView as Profile } from "@/lib/view-models";

const ROLE_LABEL: Record<string, string> = {
  super_admin: "Super admin",
  host: "Host",
};

/**
 * Your own account (spec admin-auth, task 9.5).
 *
 * The password section renders only for a password account. A Google admin is not shown a
 * disabled field or an explanation of a feature they cannot use — there is no password on
 * that account, so there is nothing to present.
 *
 * Nothing here can act on anyone else's account. Changing another admin's password is the
 * roster's job and produces a temporary password, never a chosen one.
 */
export default function ProfileView({ profile }: { profile: Profile }) {
  const router = useRouter();
  const [changed, setChanged] = useState(false);

  return (
    <div className="space-y-4">
      <h1 className="text-lg font-semibold tracking-tight text-stone-900">Profile</h1>

      <Card title="Your account">
        <dl className="grid gap-3 text-sm sm:grid-cols-2">
          <div>
            <dt className="text-xs uppercase tracking-wide text-stone-500">Email</dt>
            <dd className="mt-0.5 text-stone-900">{profile.email}</dd>
          </div>
          <div>
            <dt className="text-xs uppercase tracking-wide text-stone-500">Name</dt>
            <dd className="mt-0.5 text-stone-900">{profile.name ?? "—"}</dd>
          </div>
          <div>
            <dt className="text-xs uppercase tracking-wide text-stone-500">Role</dt>
            <dd className="mt-0.5 text-stone-900">
              {ROLE_LABEL[profile.role] ?? profile.role}
            </dd>
          </div>
          <div>
            <dt className="text-xs uppercase tracking-wide text-stone-500">Sign-in</dt>
            <dd className="mt-0.5 text-stone-900">
              {profile.authMethod === "google" ? (
                "Google account"
              ) : (
                <>
                  Username and password
                  {profile.username && (
                    <span className="text-stone-500"> ({profile.username})</span>
                  )}
                </>
              )}
            </dd>
          </div>
        </dl>
        <p className="mt-4 text-xs text-stone-500">
          Your role and how you sign in are set by a super admin. Ask one if either is wrong.
        </p>
      </Card>

      {profile.canChangePassword ? (
        <Card title="Change your password">
          <p className="text-sm text-stone-600">
            Changing your password signs you out everywhere else. This device stays signed in.
          </p>
          {changed && (
            <p
              role="status"
              className="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-900"
            >
              Password changed. Your other devices have been signed out.
            </p>
          )}
          <PasswordFields
            onChanged={() => {
              setChanged(true);
              // The API re-issued this device's cookie; refresh so the server components
              // read the new session rather than the one it replaced.
              router.refresh();
            }}
          />
        </Card>
      ) : (
        <Card title="Password">
          <p className="text-sm text-stone-600">
            This account signs in with Google, so there is no password here to change. Manage
            it in your Google account.
          </p>
        </Card>
      )}
    </div>
  );
}