"use client";

import type { ComponentProps } from "react";
import { CoachShell } from "@/components/coach-shell";
import { ScenarioCarousel } from "@/components/scenario-carousel";

type ScenarioItem = ComponentProps<typeof ScenarioCarousel>["scenarios"][number];
export type HomeViewportMode = "scenario" | "coach";

type HomeViewportShellProps = {
  scenarios: ScenarioItem[];
  viewportMode: HomeViewportMode;
  onViewportModeChange: (mode: HomeViewportMode) => void;
};

export function HomeViewportShell({
  scenarios,
  viewportMode,
  onViewportModeChange,
}: HomeViewportShellProps) {
  return (
    <section className="fade-in-up flex h-full flex-col">
      <div className="px-1">
        <div className="glass-card rounded-[22px] border border-[var(--line)] px-3 py-2.5 sm:rounded-[26px] sm:px-5 sm:py-4">
          <div className="flex flex-wrap items-center gap-2">
            <button
              type="button"
              onClick={() => onViewportModeChange("scenario")}
              className={
                viewportMode === "scenario"
                  ? "rounded-full bg-[rgba(23,117,186,0.12)] px-4 py-2 text-sm font-semibold text-[var(--primary)]"
                  : "rounded-full border border-[var(--line)] bg-white px-4 py-2 text-sm font-semibold text-[var(--foreground)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
              }
            >
              Cas pratique
            </button>
            <button
              type="button"
              data-tutorial-target="coach-tab"
              onClick={() => onViewportModeChange("coach")}
              className={
                viewportMode === "coach"
                  ? "rounded-full bg-[rgba(216,142,4,0.14)] px-4 py-2 text-sm font-semibold text-[var(--accent-gold)]"
                  : "rounded-full border border-[var(--line)] bg-white px-4 py-2 text-sm font-semibold text-[var(--foreground)] transition-colors hover:border-[var(--accent-gold)] hover:text-[var(--accent-gold)]"
              }
            >
              Coach
            </button>
          </div>
        </div>
      </div>

      {viewportMode === "scenario" ? (
        scenarios.length > 0 ? (
          <ScenarioCarousel scenarios={scenarios} />
        ) : (
          <section className="glass-card fade-in-up mt-5 rounded-[32px] p-6 lg:p-8">
            <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
              Aucun cas pratique disponible
            </p>
            <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
              Le fichier YAML des scenarios est vide.
            </h2>
            <p className="mt-4 max-w-3xl text-base leading-8 text-[var(--foreground)]">
              Ajoutez au moins un scenario dans `data/demo/scenarios.yaml` pour
              alimenter le catalogue de demonstration.
            </p>
          </section>
        )
      ) : (
        <CoachShell />
      )}
    </section>
  );
}