"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useRooSports } from "@/components/app-provider";

const statusCopy = {
  "not-started": {
    label: "Not applied",
    heading: "Help a local session run well.",
    body: "Apply once to volunteer as a coach. Your parent account and family tools stay exactly where they are.",
    action: "Learn about volunteering",
    href: "/coach/verification",
  },
  pending: {
    label: "Under review",
    heading: "Your volunteer application is being reviewed.",
    body: "You can continue browsing and booking activities while RooSports reviews your safety details.",
    action: "View application status",
    href: "/coach/verification",
  },
  approved: {
    label: "Approved",
    heading: "Your coach workspace is ready.",
    body: "Browse sessions that need support, register your interest and keep confirmed assignments together.",
    action: "Open coach workspace",
    href: "/coach",
  },
  rejected: {
    label: "Changes requested",
    heading: "Your application needs an update.",
    body: "Review your WWCC and volunteer details, then submit a corrected application for another decision.",
    action: "Update application",
    href: "/coach/verification",
  },
  expired: {
    label: "WWCC expired",
    heading: "Renew your safety details.",
    body: "Submit the renewed WWCC details before requesting another coaching assignment.",
    action: "Renew application",
    href: "/coach/verification",
  },
} as const;

export default function ProfilePage() {
  const router = useRouter();
  const { user, role, firstName, coachStatus } = useRooSports();
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  const coachContent = statusCopy[coachStatus];
  const fullName = [user?.firstName, user?.lastName].filter(Boolean).join(" ");

  const logout = async () => {
    setIsLoggingOut(true);
    try {
      await fetch("/api/auth/logout", { method: "POST", credentials: "include" });
      router.replace("/login");
      router.refresh();
    } finally {
      setIsLoggingOut(false);
    }
  };

  return (
    <div className="pb-12 pt-4 text-[#0b0f12] sm:pt-10">
      <section className="grid items-center gap-12 py-6 lg:grid-cols-[1.05fr_0.95fr] lg:py-12">
        <div>
          <p className="flex items-center gap-3 text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#617078]">
            <span className="h-2.5 w-2.5 rounded-full bg-[#ef7d00]" />
            Your account
          </p>
          <h1 className="mt-5 max-w-3xl text-[clamp(3rem,5.5vw,5rem)] font-extrabold leading-[0.94] tracking-[-0.065em]">
            Everything personal, in one quiet place.
          </h1>
          <p className="mt-7 max-w-xl text-base leading-7 text-[#617078] sm:text-lg">
            Review your account, manage family details and switch into coaching only when that access has been approved.
          </p>
        </div>

        <aside className="relative overflow-hidden rounded-[2.5rem] bg-[#dbe9f0] p-8 sm:p-10">
          <span className="absolute -right-14 -top-16 h-52 w-52 rounded-full bg-[#ffd47e]" />
          <span className="absolute right-4 top-9 h-28 w-28 rounded-full border-[18px] border-white/45" />
          <div className="relative">
            <span className="grid h-20 w-20 place-items-center rounded-full bg-[#0b0f12] text-2xl font-extrabold text-white">
              {firstName.charAt(0).toUpperCase() || "U"}
            </span>
            <h2 className="mt-7 text-4xl font-extrabold tracking-[-0.055em]">{fullName || "RooSports member"}</h2>
            <p className="mt-2 text-sm text-[#617078]">{user?.email}</p>
            <span className="mt-6 inline-flex rounded-full bg-white/55 px-4 py-2 text-[10px] font-extrabold uppercase tracking-[0.15em] backdrop-blur">
              {role === "parent" ? "Parent account" : role === "coach" ? "Coach account" : "Adult player"}
            </span>
          </div>
        </aside>
      </section>

      <section className="grid gap-10 py-14 lg:grid-cols-[0.68fr_1.32fr] lg:gap-20">
        <div>
          <p className="text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#617078]">Account details</p>
          <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.05em]">The essentials</h2>
        </div>
        <dl className="divide-y divide-[#b9c9d0]/45">
          <div className="grid gap-2 py-5 sm:grid-cols-[11rem_1fr]">
            <dt className="text-sm text-[#68747c]">Full name</dt>
            <dd className="text-sm font-extrabold">{fullName}</dd>
          </div>
          <div className="grid gap-2 py-5 sm:grid-cols-[11rem_1fr]">
            <dt className="text-sm text-[#68747c]">Email</dt>
            <dd className="text-sm font-extrabold">{user?.email}</dd>
          </div>
          <div className="grid gap-2 py-5 sm:grid-cols-[11rem_1fr]">
            <dt className="text-sm text-[#68747c]">Account status</dt>
            <dd className="text-sm font-extrabold capitalize">{user?.accountStatus || "Active"}</dd>
          </div>
        </dl>
      </section>

      {(role === "parent" || role === "coach") && (
        <section className="relative overflow-hidden rounded-[2.5rem] bg-[#f6e8c4] p-7 sm:p-10 lg:p-12">
          <span className="absolute -bottom-28 -right-20 h-72 w-72 rounded-full bg-white/30" />
          <div className="relative grid items-center gap-8 lg:grid-cols-[1fr_auto]">
            <div>
              <span className="inline-flex rounded-full bg-white/55 px-4 py-2 text-[10px] font-extrabold uppercase tracking-[0.16em]">
                Volunteer coach · {coachContent.label}
              </span>
              <h2 className="mt-5 max-w-3xl text-3xl font-extrabold tracking-[-0.05em] sm:text-4xl">
                {coachContent.heading}
              </h2>
              <p className="mt-4 max-w-2xl text-sm leading-6 text-[#655f55]">{coachContent.body}</p>
            </div>
            <Link
              href={coachContent.href}
              className="inline-flex items-center justify-between gap-5 rounded-full bg-[#0b0f12] py-2 pl-6 pr-2 text-sm font-extrabold text-white transition hover:bg-[#ff9a2f] hover:text-[#0b0f12] lg:min-w-[16rem]"
            >
              {coachContent.action}
              <span className="grid h-11 w-11 place-items-center rounded-full bg-white text-[#0b0f12]">
                <span className="material-symbols-outlined">arrow_forward</span>
              </span>
            </Link>
          </div>
        </section>
      )}

      <div className="mt-12 flex items-center justify-between gap-5 border-t border-[#b9c9d0]/45 pt-7">
        <p className="text-sm text-[#68747c]">Signed in as {user?.email}</p>
        <button
          type="button"
          onClick={logout}
          disabled={isLoggingOut}
          className="text-sm font-extrabold transition hover:text-[#c65b00] disabled:opacity-50"
        >
          {isLoggingOut ? "Signing out…" : "Sign out"}
        </button>
      </div>
    </div>
  );
}