"use client";

import Link from "next/link";
import { useRooSports } from "@/components/app-provider";
import { getEvent, SPORTS_EVENTS, type SportsEvent } from "@/lib/demo-data";

const sportTones: Record<SportsEvent["sport"], string> = {
  Soccer: "bg-[#dcebf1]",
  Basketball: "bg-[#f7e5b7]",
  "Touch Rugby": "bg-[#d8eadf]",
};

function SessionRow({ event, requested, onRequest }: { event: SportsEvent; requested: boolean; onRequest: () => void }) {
  return (
    <article className="grid items-center gap-5 py-6 sm:grid-cols-[auto_1fr_auto]">
      <div className={`grid h-16 w-16 place-items-center rounded-full ${sportTones[event.sport]}`}>
        <span className="material-symbols-outlined text-2xl">
          {event.sport === "Soccer" ? "sports_soccer" : event.sport === "Basketball" ? "sports_basketball" : "sports_rugby"}
        </span>
      </div>
      <div>
        <p className="text-[10px] font-extrabold uppercase tracking-[0.14em] text-[#68747c]">
          {event.sport} · {event.ageGroup}
        </p>
        <h3 className="mt-1 text-xl font-extrabold tracking-[-0.035em]">{event.title}</h3>
        <p className="mt-2 text-sm text-[#68747c]">
          {event.dateLabel} · {event.time} · {event.venue}
        </p>
      </div>
      <button
        type="button"
        disabled={requested}
        onClick={onRequest}
        className={`rounded-full px-5 py-3 text-sm font-extrabold transition ${
          requested ? "bg-[#d8eadf] text-[#2f7657]" : "bg-white/65 hover:bg-[#0b0f12] hover:text-white"
        }`}
      >
        {requested ? "Interest sent" : "Volunteer for session"}
      </button>
    </article>
  );
}

export default function CoachWorkspacePage() {
  const {
    coachStatus,
    coachApplication,
    coachEventRequests,
    coachAssignments,
    requestCoachEvent,
  } = useRooSports();

  if (coachStatus !== "approved") {
    const isPending = coachStatus === "pending";
    return (
      <div className="grid min-h-[calc(100vh-10rem)] place-items-center py-10 text-[#0b0f12]">
        <section className="grid w-full max-w-5xl items-center gap-10 lg:grid-cols-2">
          <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]" />
              Coach workspace
            </p>
            <h1 className="mt-5 text-[clamp(3rem,5vw,4.75rem)] font-extrabold leading-[0.94] tracking-[-0.065em]">
              {isPending ? "We will open this after review." : "Start with one safe application."}
            </h1>
            <p className="mt-7 max-w-xl text-base leading-7 text-[#617078]">
              {isPending
                ? "Your parent account remains active. RooSports will unlock this workspace only after your WWCC is approved."
                : "Apply to volunteer, complete the safety review and then choose sessions that match your sport and availability."}
            </p>
            <Link
              href="/coach/verification"
              className="mt-9 inline-flex items-center gap-3 rounded-full bg-[#0b0f12] px-6 py-3.5 text-sm font-extrabold text-white"
            >
              {isPending ? "View application status" : "Apply to volunteer"}
              <span className="material-symbols-outlined text-xl">arrow_forward</span>
            </Link>
          </div>
          <aside className="relative min-h-[26rem] overflow-hidden rounded-[2.5rem] bg-[#dbe9f0] p-9">
            <span className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-[#ffd47e]" />
            <span className="absolute -right-5 top-10 h-36 w-36 rounded-full border-[22px] border-white/45" />
            <div className="relative flex h-full flex-col justify-end">
              <span className="material-symbols-outlined text-5xl">verified_user</span>
              <h2 className="mt-5 max-w-sm text-3xl font-extrabold tracking-[-0.05em]">Player details stay protected until approval.</h2>
            </div>
          </aside>
        </section>
      </div>
    );
  }

  const assignedEvents = coachAssignments.map(getEvent).filter((event): event is SportsEvent => Boolean(event));
  const preferredSports = coachApplication?.preferredSports || [];
  const availableEvents = [...SPORTS_EVENTS]
    .filter((event) => !coachAssignments.includes(event.id))
    .sort((first, second) => Number(preferredSports.includes(second.sport)) - Number(preferredSports.includes(first.sport)))
    .slice(0, 4);

  return (
    <div className="pb-12 pt-4 text-[#0b0f12] sm:pt-10">
      <section className="grid items-stretch gap-10 py-6 lg:grid-cols-[1.1fr_0.9fr] lg:py-10">
        <div className="flex flex-col justify-center">
          <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-[#4c9c76]" />
            Approved volunteer coach
          </p>
          <h1 className="mt-5 max-w-3xl text-[clamp(3rem,5vw,4.75rem)] font-extrabold leading-[0.94] tracking-[-0.065em]">
            Help the right session, without the admin chase.
          </h1>
          <p className="mt-7 max-w-xl text-base leading-7 text-[#617078] sm:text-lg">
            Register interest in a session. RooSports confirms the final coach assignment and only then shares the details you need.
          </p>
        </div>
        <aside className="relative overflow-hidden rounded-[2.5rem] bg-[#d8eadf] p-8 sm:p-10">
          <span className="absolute -right-14 -top-14 h-48 w-48 rounded-full bg-white/35" />
          <div className="relative flex h-full min-h-[18rem] flex-col justify-between">
            <span className="inline-flex w-fit rounded-full bg-[#0b0f12] px-4 py-2 text-[10px] font-extrabold uppercase tracking-[0.16em] text-white">
              Coach access on
            </span>
            <div>
              <p className="text-sm text-[#557063]">Your usual availability</p>
              <h2 className="mt-2 text-3xl font-extrabold tracking-[-0.05em]">
                {coachApplication?.availability || "Flexible weekends"}
              </h2>
            </div>
          </div>
        </aside>
      </section>

      <section className="py-12">
        <div className="grid gap-8 lg:grid-cols-[0.62fr_1.38fr]">
          <div>
            <p className="text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#617078]">Confirmed</p>
            <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.05em]">Your assignments</h2>
          </div>
          {assignedEvents.length > 0 ? (
            <div className="divide-y divide-[#b9c9d0]/45">
              {assignedEvents.map((event) => (
                <SessionRow key={event.id} event={event} requested onRequest={() => undefined} />
              ))}
            </div>
          ) : (
            <p className="max-w-2xl py-2 text-base leading-7 text-[#68747c]">
              No confirmed sessions yet. Once RooSports assigns you, the session will appear here with arrival and organiser details.
            </p>
          )}
        </div>
      </section>

      <section className="py-12">
        <div className="mb-7 flex items-end justify-between gap-5">
          <div>
            <p className="text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#617078]">Needs support</p>
            <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.05em] sm:text-5xl">Sessions you could help.</h2>
          </div>
          <p className="hidden max-w-sm text-right text-sm leading-6 text-[#68747c] sm:block">Interest is not an assignment. RooSports confirms the final match.</p>
        </div>
        <div className="divide-y divide-[#b9c9d0]/45">
          {availableEvents.map((event) => (
            <SessionRow
              key={event.id}
              event={event}
              requested={coachEventRequests.includes(event.id)}
              onRequest={() => requestCoachEvent(event.id)}
            />
          ))}
        </div>
      </section>
    </div>
  );
}