import { useEffect, useState } from "react";
import { Link } from "@tanstack/react-router";
import { BookOpen, Calendar, Flag, Trophy, Users } from "lucide-react";
import { toast } from "sonner";
import { DeskHero, DeskSkeleton, StatTile } from "@/components/desk-hero";
import { DisneyWalkCard } from "@/components/stadium/disney-walk";
import { StadiumLiveStrip } from "@/components/stadium/live-strip";
import { DealRoomPanel, OpenDealRoom } from "@/components/stadium/deal-room";
import { GameRulesCard } from "@/components/stadium/game-rules";
import { BioLink } from "@/components/public-shell";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { firstName } from "@/lib/identity";
import { creditLine } from "@/lib/coach-powers";
import { StaffEditField } from "@/components/staff-edit";
import { askModuleQuestion, getStudentDesk, rsvpStudentGameDay } from "@/lib/server/api-academy";
import { setPublicBio } from "@/lib/server/api-public";
import { formatDate, formatDateTime } from "@/lib/utils";

type Desk = Awaited<ReturnType<typeof getStudentDesk>>;
export type StudentSection = "all" | "courses" | "team" | "calendar";

const QUARTER: Record<string, string> = {
  Q1: "Quarter 1 · fall",
  Q2: "Quarter 2 · winter",
  Q3: "Quarter 3 · spring",
  Q4: "Quarter 4 · summer",
};

function weeksDone(pct: number, weeks: number) {
  return Math.max(0, Math.min(weeks, Math.round((pct / 100) * weeks)));
}

function Bar({ value }: { value: number }) {
  return (
    <div className="progress-bar">
      <span style={{ width: `${Math.max(0, Math.min(100, value))}%` }} />
    </div>
  );
}

export function StudentHome({
  email,
  section = "all",
}: {
  email: string;
  section?: StudentSection;
}) {
  const [data, setData] = useState<Desk | null>(null);

  async function load() {
    const next = await getStudentDesk({ data: { email } });
    setData(next);
  }

  useEffect(() => {
    let live = true;
    setData(null);
    void getStudentDesk({ data: { email } }).then((d) => {
      if (live) setData(d);
    });
    return () => {
      live = false;
    };
  }, [email]);

  if (!data) return <DeskSkeleton />;
  if (!data.user) {
    return <p className="text-sm text-muted-foreground">No athlete record is attached to this account.</p>;
  }

  const { user, member, profile, team, teammates, courses, assignments, modules, events } = data;
  const due = assignments.filter((a) => a.submission_status !== "graded");
  const showAll = section === "all";

  return (
    <div className="stagger-in">
      {showAll ? (
        <DeskHero
          kicker={`Student view · ${member?.member_no ?? "member"}`}
          title={`Welcome back, ${firstName(user.full_name)}`}
          description={
            profile?.bio ??
            `${user.title}. Courses, assignments from your instructor, Game Day register, and the next stadium night.`
          }
          badge={profile?.sport ?? user.sport ?? "Athlete"}
          actions={
            <Button asChild size="sm">
              <Link to="/public/stadium/$arena" params={{ arena: "football" }} search={{ walk: true }}>
                Walk into the stadium
              </Link>
            </Button>
          }
        />
      ) : null}

      {showAll ? <DisneyWalkCard audience="student" /> : null}
      {showAll ? <StadiumLiveStrip /> : null}

      {showAll ? (
        <div className="mb-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <StatTile
            icon={Trophy}
            label="Academy yards"
            value={member?.yard_points ?? 0}
            hint="Season standing on your team. Education score — not money, not investment."
          />
          <StatTile
            icon={Flag}
            label="Stadium yards"
            value={member?.stadium_points ?? 0}
            hint="Football metaphor: every real move (packet filed, docs requested, vote, live briefing) is yards on the field. Not money. A first down is a completed packet. A score is a donor bringing the project live."
          />
          <StatTile
            icon={BookOpen}
            label="Courses in progress"
            value={courses.filter((c) => c.status === "in_progress").length}
            hint={`${courses.filter((c) => c.status === "completed").length} finished. In progress means you have not completed every week yet.`}
          />
          <StatTile
            icon={Flag}
            label="Assignments due"
            value={due.length}
            hint="Work your instructor assigned. Still waiting on you."
          />
        </div>
      ) : null}

      {showAll ? <StadiumYardsNote traction={Boolean(member?.traction)} /> : null}
      {showAll && member ? <CreditStatusCard member={member} /> : null}

      {showAll && team?.capstone_slug ? (
        <Card className="mb-6">
          <CardContent className="flex flex-col gap-3 pt-5 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p className="text-[11px] font-medium tracking-[0.16em] text-primary uppercase">Deal room</p>
              <h2 className="font-display text-xl">{team.name} packet</h2>
              <p className="mt-1 text-sm text-muted-foreground">
                File an executive summary, business plan, or financials. Packet review can catch donor-facing mistakes.
                Your original is always saved for your coach. Donors never see the draft.
              </p>
            </div>
            <OpenDealRoom slug={team.capstone_slug} label="Open the deal room" />
          </CardContent>
        </Card>
      ) : null}

      {section === "all" || section === "courses" ? (
        <div className={section === "all" ? "grid gap-6 lg:grid-cols-5" : "space-y-6"}>
          <div className={section === "all" ? "space-y-6 lg:col-span-3" : "space-y-6"}>
            <Card>
              <CardContent className="pt-5">
                <div className="mb-4 flex items-center justify-between gap-2">
                  <div>
                    <div className="flex items-center gap-2">
                      <Flag className="size-4 text-primary" />
                      <h2 className="font-display text-xl">Courses you are enrolled in</h2>
                    </div>
                    <p className="mt-1 text-sm text-navy">
                      These are classes this season — not a degree and not a completed transcript. The percent is how
                      much of that course you have finished. It is not a grade. Every enrolled athlete is automatically
                      placed in CFL-101 NIL & Personal Finance, CFL-102 Athletic Branding, and CFL-103 NIL Tax
                      Implications.
                    </p>
                  </div>
                  {showAll ? (
                    <Link to="/learn/courses" className="shrink-0 text-sm font-semibold text-primary hover:underline">
                      All courses
                    </Link>
                  ) : null}
                </div>
                {courses.some((c) => c.code === "CFL-101") ? <NilBasics /> : null}
                {courses.some((c) => c.code === "CFL-102") ? <BrandingBasics /> : null}
                {courses.some((c) => c.code === "CFL-103") ? <TaxBasics /> : null}
                <ul className="mt-5 space-y-5">
                  {courses.map((c) => {
                    const done = weeksDone(c.progress_pct, c.weeks || 8);
                    const weeks = c.weeks || 8;
                    return (
                      <li key={c.course_id} className="rounded-lg bg-muted/50 px-3 py-3">
                        <div className="mb-1.5 flex items-baseline justify-between gap-3">
                          <div>
                            <p className="text-sm font-semibold text-navy">
                              {c.code} · {c.title}
                              {c.code === "CFL-301" ? <span className="text-gold-ink"> *</span> : null}
                            </p>
                            <p className="mt-0.5 text-xs font-medium text-navy">
                              {QUARTER[c.quarter] ?? c.quarter}
                              {c.status === "completed" ? " · completed" : " · still in progress"}
                            </p>
                            <p className="mt-1 text-sm text-navy">{c.summary}</p>
                            <div className="mt-2">
                              <StaffEditField
                                table="courses"
                                id={c.course_id}
                                field="summary"
                                value={c.summary}
                                label="course summary"
                                onSaved={load}
                              />
                            </div>
                            <p className="mt-1 text-sm font-medium text-navy">
                              Instructor: {c.instructor_name ?? "Staff"}
                              {c.instructor_title ? ` · ${c.instructor_title}` : ""}
                            </p>
                          </div>
                          <span className="tabular shrink-0 text-sm font-semibold text-navy">{c.progress_pct}%</span>
                        </div>
                        <Bar value={c.progress_pct} />
                        <p className="mt-1.5 text-xs font-medium text-navy">
                          {c.progress_pct}% of this course is done — about {done} of {weeks} weeks.{" "}
                          {c.status === "completed"
                            ? "You finished this class."
                            : "You are still enrolled. This number is progress, not a test score."}
                        </p>
                        {c.code === "CFL-301" ? <VentureStudioNote /> : null}
                        {c.code === "CFL-102" ? (
                          <p className="mt-2 text-xs font-medium text-navy">
                            Auto-assigned with NIL. Athletic branding is how you present your name, photo, and voice —
                            separate from the CFL mark. Instructor: Priya Nair.
                          </p>
                        ) : null}
                        {c.code === "CFL-103" ? (
                          <p className="mt-2 text-xs font-medium text-navy">
                            Comes after NIL. Tax implications of a 1099 deal — set-asides, estimated payments, a simple
                            book. Education, not CPA advice.
                          </p>
                        ) : null}
                      </li>
                    );
                  })}
                </ul>
              </CardContent>
            </Card>

            <Card>
              <CardContent className="pt-5">
                <h2 className="mb-1 font-display text-xl">Gradebook</h2>
                <p className="mb-3 text-sm text-navy">
                  Your instructor scores this 0–100 and writes a note. Super Admin can override. This is a class grade,
                  not stadium yards.
                </p>
                <ul className="divide-y divide-border">
                  {assignments.map((a) => (
                    <li
                      key={a.id}
                      className="flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between"
                    >
                      <div>
                        <p className="text-sm font-semibold text-navy">{a.title}</p>
                        <p className="mt-0.5 text-xs font-medium text-navy">{a.course_title}</p>
                        <p className="mt-1 max-w-prose text-sm text-navy">{a.prompt}</p>
                        {a.instructor_name ? (
                          <p className="mt-1 text-xs font-medium text-navy">
                            Assigned by {a.instructor_name}
                            {a.instructor_title ? ` · ${a.instructor_title}` : ""}
                          </p>
                        ) : null}
                        {a.submission_status === "graded" && a.feedback ? (
                          <p className="mt-2 text-sm text-navy">Coach note: {a.feedback}</p>
                        ) : null}
                      </div>
                      <div className="shrink-0 text-right">
                        {a.submission_status === "graded" ? (
                          <Badge variant="success">
                            {a.score} / {a.points}
                          </Badge>
                        ) : a.submission_status === "submitted" ? (
                          <Badge variant="warning">Submitted — in the gradebook</Badge>
                        ) : (
                          <Badge variant="outline">Due {a.due_at ? formatDate(a.due_at) : "—"}</Badge>
                        )}
                      </div>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          </div>

          {section === "all" ? (
            <div className="space-y-6 lg:col-span-2">
              <TeamPanel
                team={team}
                teammates={teammates}
                email={email}
                profile={profile}
                ownName={user.full_name}
              />
              <EventsPanel events={events} email={email} onChanged={load} />
              <ModulesPanel modules={modules} email={email} />
            </div>
          ) : (
            <ModulesPanel modules={modules} email={email} />
          )}
        </div>
      ) : null}

      {section === "team" ? (
        <div className="space-y-4">
          <GameRulesCard compact />
          <TeamPanel
            team={team}
            teammates={teammates}
            email={email}
            profile={profile}
            ownName={user.full_name}
          />
          {team?.capstone_slug ? <DealRoomPanel slug={team.capstone_slug} /> : null}
        </div>
      ) : null}
      {section === "calendar" ? <EventsPanel events={events} email={email} onChanged={load} detailed /> : null}
    </div>
  );
}

function TeamPanel({
  team,
  teammates,
  email,
  profile,
  ownName,
}: {
  team: Desk["team"];
  teammates: Desk["teammates"];
  email: string;
  profile: Desk["profile"];
  ownName: string;
}) {
  const [published, setPublished] = useState(Boolean(profile?.public_bio));
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    setPublished(Boolean(profile?.public_bio));
  }, [profile?.public_bio]);

  async function toggle(next: boolean) {
    setBusy(true);
    try {
      await setPublicBio({ data: { email, public_bio: next } });
      setPublished(next);
      toast.success(next ? "Your bio is on the public team page." : "Your bio is private again.");
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not update bio");
    } finally {
      setBusy(false);
    }
  }

  const slug = profile?.public_slug ?? teammates.find((t) => t.full_name === ownName)?.public_slug ?? null;

  return (
    <Card>
      <CardContent className="pt-5">
        <div className="mb-3 flex items-center justify-between gap-2">
          <div className="flex items-center gap-2">
            <Users className="size-4 text-primary" />
            <h2 className="font-display text-xl">{team?.name ?? "Team"}</h2>
          </div>
          <Link to="/learn/team" className="text-sm text-primary hover:underline">
            Deal room
          </Link>
        </div>
        <p className="text-sm text-muted-foreground">{team?.venture_summary}</p>
        {team ? (
          <div className="mt-2">
            <StaffEditField
              table="teams"
              id={team.id}
              field="venture_summary"
              value={team.venture_summary}
              label="team summary"
            />
          </div>
        ) : null}
        <p className="mt-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
          {team?.category} · {team?.yard_points} team points
        </p>
        <p className="mt-3 text-xs text-muted-foreground">
          CFL takes no equity in this venture. Yard points are educational standings, not investment performance.
        </p>
        <div className="mt-4 flex items-center justify-between gap-3 rounded-lg bg-muted/70 px-3 py-3">
          <div className="min-w-0">
            <p className="text-sm font-medium" id="public-bio-label">
              Publish my bio
            </p>
            <p className="text-xs text-muted-foreground">
              Adds a Bio link on the public team page. Emergency contact stays private.
            </p>
          </div>
          <Switch
            id="public-bio"
            checked={published}
            disabled={busy}
            onCheckedChange={(v) => void toggle(Boolean(v))}
            aria-labelledby="public-bio-label"
          />
        </div>
        {published && slug ? (
          <p className="mt-2 text-sm">
            <BioLink slug={slug} publicBio />
            <span className="text-muted-foreground"> on the public site</span>
          </p>
        ) : null}
        <ul className="mt-4 space-y-2">
          {teammates.map((t) => (
            <li key={t.member_id} className="flex items-center gap-2.5">
              <span className="flex size-8 items-center justify-center rounded-full bg-secondary text-xs font-semibold">
                {t.avatar_initials}
              </span>
              <span className="min-w-0 flex-1 truncate text-sm">{t.full_name}</span>
              <span className="tabular text-xs text-muted-foreground">{t.yard_points} pts</span>
              <BioLink slug={t.public_slug} publicBio={t.public_bio} />
            </li>
          ))}
        </ul>
        {team?.slug ? (
          <div className="mt-4 grid gap-2">
            <Button asChild variant="outline" className="w-full">
              <Link to="/public/teams/$slug" params={{ slug: team.slug }}>
                View public team page
              </Link>
            </Button>
            <Button asChild className="w-full">
              <Link to="/public/stadium">Watch the live drive</Link>
            </Button>
          </div>
        ) : null}
      </CardContent>
    </Card>
  );
}

function EventsPanel({
  events,
  email,
  onChanged,
  detailed,
}: {
  events: Desk["events"];
  email: string;
  onChanged: () => Promise<void>;
  detailed?: boolean;
}) {
  const [busy, setBusy] = useState<string | null>(null);

  async function rsvp(id: string, status: "registered" | "out") {
    setBusy(id);
    try {
      await rsvpStudentGameDay({ data: { email, gameDayId: id, status } });
      toast.success(status === "registered" ? "You’re registered." : "We’ll hold the seat for someone else.");
      await onChanged();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not save the registration.");
    } finally {
      setBusy(null);
    }
  }

  return (
    <Card>
      <CardContent className="pt-5">
        <div className="mb-3 flex items-center justify-between gap-2">
          <div className="flex items-center gap-2">
            <Calendar className="size-4 text-primary" />
            <h2 className="font-display text-xl">Upcoming Game Days</h2>
          </div>
          <Link to="/learn/calendar" className="text-sm font-semibold text-primary hover:underline">
            Game days
          </Link>
        </div>
        <p className="mb-3 text-sm text-navy">
          Lecture, film session, or stadium night. If you are not enrolled, register. That tells the coach you will be
          in the room.
        </p>
        <ul className="space-y-3">
          {events.map((e) => (
            <li key={e.id} className="rounded-lg bg-muted/60 px-3 py-3">
              <p className="text-sm font-semibold text-navy">{e.title}</p>
              <p className="text-xs font-medium text-navy">
                {formatDateTime(e.starts_at)} · {e.location}
              </p>
              {detailed && e.notes ? <p className="mt-1 text-sm text-navy">{e.notes}</p> : null}
              <div className="mt-2">
                <StaffEditField
                  table="game_days"
                  id={e.id}
                  field="notes"
                  value={e.notes}
                  label="Game Day notes"
                  onSaved={onChanged}
                />
              </div>
              <div className="mt-2 flex flex-wrap items-center gap-2">
                {e.rsvp === "registered" ? (
                  <>
                    <Badge variant="success">Registered</Badge>
                    <Button size="sm" variant="outline" disabled={busy === e.id} onClick={() => void rsvp(e.id, "out")}>
                      Can’t make it
                    </Button>
                  </>
                ) : (
                  <Button size="sm" variant="gold" disabled={busy === e.id} onClick={() => void rsvp(e.id, "registered")}>
                    {busy === e.id ? "Saving…" : "Register"}
                  </Button>
                )}
              </div>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}

function ModulesPanel({ modules, email }: { modules: Desk["modules"]; email: string }) {
  const [openId, setOpenId] = useState<string | null>(null);
  const [question, setQuestion] = useState("");
  const [busy, setBusy] = useState(false);

  async function ask(moduleId: string, courseTitle: string) {
    setBusy(true);
    try {
      await askModuleQuestion({ data: { email, moduleId, courseTitle, body: question } });
      toast.success("Question sent to your instructor.");
      setQuestion("");
      setOpenId(null);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not send the question.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <Card>
      <CardContent className="pt-5">
        <h2 className="mb-1 font-display text-xl">This week’s modules</h2>
        <p className="mb-3 text-sm text-navy">
          Lessons inside the courses you are enrolled in. Open a question if the week is unclear — it goes to the
          instructor who owns that class.
        </p>
        <ol className="space-y-3">
          {modules.map((m) => (
            <li key={m.id} className="rounded-lg bg-muted/50 px-3 py-3">
              <p className="text-xs font-medium tracking-wide text-navy uppercase">
                {m.course_title} · week {m.week}
              </p>
              <p className="text-sm font-semibold text-navy">{m.title}</p>
              <p className="text-sm text-navy">{m.summary}</p>
              {openId === m.id ? (
                <div className="mt-2 space-y-2">
                  <textarea
                    value={question}
                    onChange={(e) => setQuestion(e.target.value)}
                    rows={3}
                    placeholder="Ask your instructor about this week…"
                    className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                  />
                  <div className="flex gap-2">
                    <Button size="sm" variant="gold" disabled={busy} onClick={() => void ask(m.id, m.course_title)}>
                      {busy ? "Sending…" : "Send question"}
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => setOpenId(null)}>
                      Cancel
                    </Button>
                  </div>
                </div>
              ) : (
                <Button size="sm" variant="outline" className="mt-2" onClick={() => setOpenId(m.id)}>
                  Ask a question
                </Button>
              )}
            </li>
          ))}
        </ol>
      </CardContent>
    </Card>
  );
}

function StadiumYardsNote({ traction }: { traction: boolean }) {
  return (
    <Card className="mb-6">
      <CardContent className="pt-5">
        <h2 className="font-display text-xl">What “stadium yards” means</h2>
        <p className="mt-2 text-sm text-navy">
          It is a football scoreboard for schoolwork — not cash, not equity, not an investment return. Think of the
          season as a drive down the field:
        </p>
        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-navy">
          <li>
            <strong>A play</strong> is a real action: file a packet, answer a donor question, get a document request.
          </li>
          <li>
            <strong>Yards</strong> are points for that play (a packet upload is a first down; bringing a project live is
            a score).
          </li>
          <li>
            <strong>Academy yards</strong> are the class standing on your team. <strong>Stadium yards</strong> are only
            the public drive — deal room + fan votes.
          </li>
        </ul>
        {traction ? (
          <p className="mt-2 text-sm font-medium text-navy">Traction flag is on — a coach can move you this series.</p>
        ) : null}
      </CardContent>
    </Card>
  );
}

function NilBasics() {
  return (
    <div className="rounded-lg border border-gold-ink/30 bg-gold-wash px-3 py-3">
      <p className="text-[11px] font-semibold tracking-[0.16em] text-gold-ink uppercase">CFL-101 · NIL basics</p>
      <h3 className="mt-1 font-display text-lg text-navy">Name, Image & Likeness — and your money</h3>
      <p className="mt-1 text-sm text-navy">
        NIL is the right of a college athlete to be paid for their own name, photo, and personal brand — a social post,
        an appearance, a local shop deal. It is not a team salary and it is not an investment in CFL.
      </p>
      <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-navy">
        <li>Read a month of spending the way you watch film. No shame. Patterns only.</li>
        <li>An NIL deal is a contract. Know who can use your photo, for how long, and what you actually get paid.</li>
        <li>Most NIL money is a 1099. Set aside tax in the off-season. Keep a simple book.</li>
        <li>CFL never takes a piece of your venture. You say that in every pitch.</li>
      </ul>
      <p className="mt-2 text-xs font-medium text-navy">
        Auto-assigned to every enrolled athlete. Instructor: Priya Nair, curriculum lead.
      </p>
    </div>
  );
}

function BrandingBasics() {
  return (
    <div className="mt-3 rounded-lg border border-gold-ink/30 bg-gold-wash px-3 py-3">
      <p className="text-[11px] font-semibold tracking-[0.16em] text-gold-ink uppercase">CFL-102 · Athletic branding</p>
      <h3 className="mt-1 font-display text-lg text-navy">Your name is inventory. The CFL mark is not.</h3>
      <p className="mt-1 text-sm text-navy">
        Athletic branding is the class after NIL basics: what you actually own (name, photo, voice), what a local shop
        is buying, and how to talk about your sport without making a medical claim or selling equity. Auto-assigned to
        every enrolled athlete.
      </p>
    </div>
  );
}

function TaxBasics() {
  return (
    <div className="mt-3 rounded-lg border border-gold-ink/30 bg-gold-wash px-3 py-3">
      <p className="text-[11px] font-semibold tracking-[0.16em] text-gold-ink uppercase">CFL-103 · NIL tax implications</p>
      <h3 className="mt-1 font-display text-lg text-navy">The deal is not a paycheck</h3>
      <p className="mt-1 text-sm text-navy">
        Most NIL money arrives as a 1099. This class is the set-aside, the four estimated-payment dates, and a simple
        book so April is not a surprise. It is education, not tax advice — you still take the sheet to a CPA.
        Auto-assigned once you are an enrolled athlete.
      </p>
    </div>
  );
}

function VentureStudioNote() {
  return (
    <p className="mt-2 text-xs font-medium text-navy">
      * Venture Studio is the lab, not a company. You prototype with your team, split roles like a game-day roster
      (captain, scout, trainer, closer), and practice the one sentence you are allowed to say — plus the sentence you
      must never say. CFL still takes no equity. Completing the class is not “launching a startup.”
    </p>
  );
}

function CreditStatusCard({ member }: { member: NonNullable<Desk["member"]> }) {
  const stage = member.credit_stage ?? "none";
  return (
    <Card className="mb-6">
      <CardContent className="pt-5">
        <h2 className="font-display text-xl">Academic credit</h2>
        <p className="mt-2 text-sm font-semibold text-navy">{creditLine(member.credit_status, stage)}</p>
        <p className="mt-2 text-sm text-navy">
          {stage === "none"
            ? "If you are taking CFL as an internship or for college credit, your instructor recommends it. Super Admin approves. Your registrar still posts the credit — CFL is not the university."
            : stage === "recommended"
              ? "Your coach recommended this. Super Admin has not approved it yet. Nothing has gone to your registrar."
              : stage === "approved"
                ? "Super Admin approved. CFL attested the internship / college credit. Take this note to your registrar — they still have to post it."
                : "Super Admin returned this. Your coach has to revise the recommendation."}
        </p>
        {member.credit_note ? <p className="mt-2 text-sm text-navy">Note: {member.credit_note}</p> : null}
      </CardContent>
    </Card>
  );
}