/**
 * What is behind the door, shown to someone standing outside it.
 *
 * The locked concept panel is deliberate, not an oversight: a code-holder is
 * shown that supply and demand material exists and is behind sign-in, because
 * the point of this page for an outsider is partly to advertise the rest of
 * it. That argument only pays off if the panel *sells* — a grey "members only"
 * box tells a visitor they are unwelcome and nothing else — so each track is
 * named, described and given its own tile.
 *
 * The server never sends a single row of the locked tracks. This panel is a
 * signpost, not a redaction.
 */
import { KeyRound, LineChart, Lock, MonitorPlay, Users } from 'lucide-react';
import { LEARN_TRACK_DESCRIPTIONS, LEARN_TRACK_LABELS, type LearnTrack } from '@pig/core';
import { Button, Card } from '@/components/ui';

const TRACK_ICONS: Record<LearnTrack, typeof Lock> = {
  supply: LineChart,
  demand: Users,
  platform: MonitorPlay,
};

export interface LearnTrackTeaser {
  track: LearnTrack;
  /** `code` reads as an invitation; `members` reads as a locked door. */
  access: 'code' | 'members';
}

export function LearnTrackPanel({
  heading,
  description,
  teasers,
  showSignIn = true,
}: {
  heading: string;
  description: string;
  teasers: readonly LearnTrackTeaser[];
  showSignIn?: boolean;
}) {
  return (
    <Card className="flex min-w-0 flex-col gap-5 p-5 sm:p-6">
      <div className="flex min-w-0 flex-col gap-1">
        <h2 className="text-base font-semibold leading-tight">{heading}</h2>
        <p className="min-w-0 max-w-2xl text-sm leading-6 text-muted">{description}</p>
      </div>

      <ul className="grid min-w-0 list-none gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {teasers.map(({ track, access }) => {
          const Icon = TRACK_ICONS[track];
          return (
            <li
              key={track}
              className="flex min-w-0 flex-col gap-2 rounded-xl border border-border bg-surface-2/60 p-4"
            >
              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent-subtle text-accent-fg">
                <Icon className="size-4" aria-hidden />
              </span>
              <p className="min-w-0 font-semibold leading-snug">{LEARN_TRACK_LABELS[track]}</p>
              <p className="min-w-0 break-words text-sm leading-6 text-muted">
                {LEARN_TRACK_DESCRIPTIONS[track]}
              </p>
              <p className="mt-auto inline-flex min-w-0 items-center gap-1.5 pt-2 text-xs font-medium text-muted">
                {access === 'code' ? (
                  <>
                    <KeyRound className="size-3.5 shrink-0 text-accent-fg" aria-hidden />
                    <span className="min-w-0 text-accent-fg">Opens with your code</span>
                  </>
                ) : (
                  <>
                    <Lock className="size-3.5 shrink-0" aria-hidden />
                    <span className="min-w-0">Members only</span>
                  </>
                )}
              </p>
            </li>
          );
        })}
      </ul>

      {showSignIn ? (
        <div className="flex min-w-0 flex-col gap-2 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className="min-w-0 text-sm text-muted">
            Concept training is for the go-to-market team. Sign in with your PIG account to watch
            it.
          </p>
          <Button variant="primary" className="shrink-0" asChild>
            <a href="/">Sign in</a>
          </Button>
        </div>
      ) : null}
    </Card>
  );
}
