"use client";

import { useState } from "react";

import { TemplateDetailBreadcrumb } from "@/components/templates/TemplateDetailBreadcrumb";
import { TemplateDetailExamples } from "@/components/templates/TemplateDetailExamples";
import { TemplateDetailInfo } from "@/components/templates/TemplateDetailInfo";
import { TemplateDetailPreview } from "@/components/templates/TemplateDetailPreview";
import {
  getTemplateDetailAspectRatios,
  type TemplateDetailAspectRatio,
  type VideoCatalogTemplate,
} from "@/lib/video-templates-catalog";

interface TemplateDetailContentProps {
  template: VideoCatalogTemplate;
}

export function TemplateDetailContent({ template }: TemplateDetailContentProps) {
  // Selected aspect is shared so the preview picker drives which variant gets built.
  const aspects = getTemplateDetailAspectRatios(template);
  const [selectedAspect, setSelectedAspect] = useState<TemplateDetailAspectRatio>(
    aspects[0] ?? "16:9"
  );

  // The content project (variant) UUID for the selected aspect — keys preset stories.
  const variantProjectId =
    (template.variants?.find((v) => v.aspect === selectedAspect) ?? template.variants?.[0])?.projectId;

  return (
    <div className="mx-auto max-w-7xl px-4 py-8 lg:px-8 lg:py-12">
      <TemplateDetailBreadcrumb templateName={template.name} />

      <div className="mt-6 grid gap-10 lg:grid-cols-[3fr_2fr] lg:items-start">
        <TemplateDetailPreview
          template={template}
          selectedAspect={selectedAspect}
          onSelectAspect={setSelectedAspect}
        />
        <TemplateDetailInfo template={template} selectedAspect={selectedAspect} />
      </div>

      <TemplateDetailExamples templateId={template.id} projectId={variantProjectId} />
    </div>
  );
}
