/**
 * The platform track, as an ordered course.
 *
 * Product how-to has a running order — `sortOrder` is the curriculum, and
 * "your first hour in PIG" is not interchangeable with the margin report. A
 * grid of equal tiles says "pick one"; a numbered list says "start here", so
 * the two tracks are rendered as different objects rather than one
 * undifferentiated grid.
 */
import { ChevronRight } from 'lucide-react';
import { formatLearnDuration } from '@pig/core';
import { Badge, Card, Label } from '@/components/ui';
import { ArchiveControl } from './ArchiveControl';
import { learnPlayback } from './model';
import { LearnPoster } from './LearnPoster';
import { bySortOrder, type LearnResourceView } from './model';

export function LearnWalkthroughList({
  resources,
  managing,
  onPlay,
}: {
  resources: readonly LearnResourceView[];
  managing: boolean;
  onPlay: (resource: LearnResourceView) => void;
}) {
  const ordered = bySortOrder(resources);

  return (
    /* Width is the caller's business — this list sits in a 1024px page column
       for a code-holder and in a capped column inside the shell for a member,
       and a cap here would fight one of them. */
    <ol className="flex min-w-0 list-none flex-col gap-3">
      {ordered.map((resource, index) => {
        const playback = learnPlayback(resource);
        return (
        <li key={resource.id} className="min-w-0">
          <Card className="group relative flex min-w-0 flex-col overflow-hidden transition-shadow duration-1 ease-enter hover:shadow-md sm:flex-row">
            <button
              type="button"
              onClick={() => onPlay(resource)}
              className="flex min-w-0 flex-1 items-center gap-3 p-3 text-left focus-visible:ring-inset focus-visible:ring-offset-0 sm:gap-4 sm:p-4"
            >
              <div className="w-28 shrink-0 overflow-hidden rounded-lg border border-border sm:w-44">
                <LearnPoster
                  seed={resource.id}
                  track={resource.track}
                  duration={formatLearnDuration(resource.durationSeconds)}
                  // Only a PIG-hosted clip has a real frame; a Cap embed resolves to
                  // an iframe and falls back to the generated poster.
                  poster={playback?.kind === 'video' ? playback.poster : null}
                  alt={`Still from ${resource.title}`}
                  size="row"
                />
              </div>
              <div className="flex min-w-0 flex-1 flex-col gap-1">
                <Label className="nums">Step {index + 1}</Label>
                <h3 className="min-w-0 break-words font-semibold leading-snug">
                  {resource.title}
                </h3>
                {resource.summary ? (
                  <p className="line-clamp-2 min-w-0 break-words text-sm leading-6 text-muted">
                    {resource.summary}
                  </p>
                ) : null}
              </div>
              <ChevronRight
                className="hidden size-5 shrink-0 text-muted transition-transform group-hover:translate-x-0.5 sm:block"
                aria-hidden
              />
            </button>

            {managing ? (
              /* A right-hand rail on a desktop row, a strip underneath on a
                 phone — squeezed into 393px beside the text it left the title
                 wrapping one word to a line. */
              <div className="flex min-w-0 shrink-0 flex-row items-center justify-between gap-2 border-t border-border p-2 sm:flex-col sm:items-end sm:justify-center sm:border-l sm:border-t-0">
                <Badge tone={resource.visibility === 'code' ? 'accent' : 'neutral'}>
                  {resource.visibility === 'code' ? 'By code' : 'Members'}
                </Badge>
                <ArchiveControl id={resource.id} title={resource.title} />
              </div>
            ) : null}
          </Card>
        </li>
        );
      })}
    </ol>
  );
}