"use client";

import { cn } from "@/lib/utils";
import { CanvasField } from "./CanvasField";
import { MultiPageBenchmarkWrapper } from "./MultiPageBenchmarkWrapper";
import {
  InterviewNotesCanvas,
  PersonaCanvas,
  TensionsCanvas,
  ValueChainCanvas,
  StakeholderMapCanvas,
  JourneyMapCanvas,
  SynthesisCanvas,
  PitchCanvas,
  FeedbackGridCanvas,
  RetrospectiveCanvas,
  ConceptSketchCanvas,
  PrototypeBriefCanvas,
  FinalConceptCanvas,
  SystemLearningCanvas,
  WeakSignalsSelectionCanvas,
  SituationsCanvas,
  ScenarioCanvas,
  ScenarioSelectionCanvas,
  ScenarioValidationCanvas,
  ScenarioCardCanvas,
  ScenarioImpactCanvas,
  ConceptGenerationCanvas,
  PartnerReactionsCanvas,
  ConceptJourneyCanvas,
  TransitionS3Canvas,
  // Week 3 Canvases
  ConceptRecapCanvas,
  ConceptHypothesesCanvas,
  EmpathyMapCanvas,
  AssumptionsTrackerCanvas,
  InterviewGuideCanvas,
  KeyInsightsCanvas,
  UserJourneyMapCanvas,
  BenchmarkJourneyCanvas,
  ConceptEvaluationCanvas,
  TouchpointSelectionCanvas,
  ConceptNarrativeCanvas,
  PrototypeReadinessCanvas,
  // Week 1 Canvases
  BenchmarkSectorielCanvas,
  BenchmarkCrosssectorielCanvas,
  MindmapHackathonCanvas,
  ReformulationProblematiqueCanvas,
  WhiteboardCanvas,
  MindmapSignauxFaiblesCanvas,
} from "./templates";
import type { CanvasTemplate } from "@/lib/types";

interface CanvasViewerProps {
  canvas: CanvasTemplate;
  className?: string;
  teamName?: string;
}

// Map template IDs to specialized components
const TEMPLATE_COMPONENTS: Record<string, React.ComponentType<{ canvas: CanvasTemplate; className?: string; teamName?: string }>> = {
  // Week 2 Canvases
  // "interview-notes": InterviewNotesCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "persona-future": PersonaCanvas, // Now handled by MultiPageBenchmarkWrapper
  "tensions-paradoxes": TensionsCanvas,
  "value-chain": ValueChainCanvas,
  "stakeholder-map": StakeholderMapCanvas,
  "journey-map": JourneyMapCanvas,
  "synthesis-board": SynthesisCanvas,
  "pitch-canvas": PitchCanvas,
  "inter-team-pitch": PitchCanvas,
  "feedback-grid": FeedbackGridCanvas,
  "retrospective": RetrospectiveCanvas,
  "concept-sketch": ConceptSketchCanvas,
  "prototype-brief": PrototypeBriefCanvas,
  "final-concept": FinalConceptCanvas,
  "system-learning": SystemLearningCanvas,
  "weak-signals-selection": WeakSignalsSelectionCanvas,
  "situations": SituationsCanvas,
  // "scenario-generation": ScenarioCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "scenario-selection": ScenarioSelectionCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "scenario-validation": ScenarioValidationCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "scenario-card": ScenarioCardCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "scenario-impact": ScenarioImpactCanvas, // Now handled by MultiPageBenchmarkWrapper
  "concept-generation": ConceptGenerationCanvas,
  "partner-reactions": PartnerReactionsCanvas,
  "concept-journey": ConceptJourneyCanvas,
  // "s3-transition": TransitionS3Canvas, // Now handled by MultiPageBenchmarkWrapper
  // Week 3 Canvases
  // "concept-recap": ConceptRecapCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "concept-hypotheses": ConceptHypothesesCanvas, // Now handled by MultiPageBenchmarkWrapper
  "empathy-map": EmpathyMapCanvas,
  // "assumptions-tracker": AssumptionsTrackerCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "interview-guide": InterviewGuideCanvas, // Now handled by MultiPageBenchmarkWrapper
  // "user-journey-map": UserJourneyMapCanvas, // Now handled by MultiPageBenchmarkWrapper
  "key-insights": KeyInsightsCanvas,
  // "user-journey-map": UserJourneyMapCanvas, // Duplicate removed
  // "benchmark-journey": BenchmarkJourneyCanvas, // Now handled by MultiPageBenchmarkWrapper
  "concept-evaluation": ConceptEvaluationCanvas,
  // "touchpoint-selection": TouchpointSelectionCanvas, // Now handled by MultiPageBenchmarkWrapper
  "concept-narrative": ConceptNarrativeCanvas,
  "prototype-readiness": PrototypeReadinessCanvas,
  // Week 1 Canvases (non-multi-page ones)
  "mindmap-hackathon": MindmapHackathonCanvas,
  "reformulation-problematique": ReformulationProblematiqueCanvas,
  "whiteboard-ideation": WhiteboardCanvas,
};

// Benchmark canvases that support multi-page functionality
const MULTI_PAGE_BENCHMARK_COMPONENTS: Record<string, React.ComponentType<{
  canvas: CanvasTemplate;
  className?: string;
  teamName?: string;
  pageIndex: number;
  isMultiPage?: boolean;
}>> = {
  "benchmark-sectoriel": BenchmarkSectorielCanvas,
  "benchmark-crosssectoriel": BenchmarkCrosssectorielCanvas,
  "interview-notes": InterviewNotesCanvas,
  "persona-future": PersonaCanvas,
  "scenario-impact": ScenarioImpactCanvas,
  "mindmap-signaux-faibles": MindmapSignauxFaiblesCanvas,
  "scenario-validation": ScenarioValidationCanvas,
  "scenario-card": ScenarioCardCanvas,
  "scenario-generation": ScenarioCanvas,
  "scenario-selection": ScenarioSelectionCanvas,
  "concept-recap": ConceptRecapCanvas,
  "concept-hypotheses": ConceptHypothesesCanvas,
  "assumptions-tracker": AssumptionsTrackerCanvas,
  "interview-guide": InterviewGuideCanvas,
  "user-journey-map": UserJourneyMapCanvas,
  "benchmark-journey": BenchmarkJourneyCanvas,
  "touchpoint-selection": TouchpointSelectionCanvas,
  "s3-transition": TransitionS3Canvas,
};

export function CanvasViewer({ canvas, className, teamName }: CanvasViewerProps) {
  // Check if this is a multi-page benchmark canvas
  const MultiPageBenchmarkComponent = MULTI_PAGE_BENCHMARK_COMPONENTS[canvas.templateId];

  // For multi-page benchmark canvases, use the wrapper
  if (MultiPageBenchmarkComponent) {
    return (
      <MultiPageBenchmarkWrapper
        canvas={canvas}
        className={className}
        teamName={teamName}
        BenchmarkComponent={MultiPageBenchmarkComponent}
      />
    );
  }

  // Get specialized template component if available
  const TemplateComponent = TEMPLATE_COMPONENTS[canvas.templateId];

  return (
    <div className={cn("canvas-a3-viewport", className)}>
      {/* A3 Fixed Canvas Container - Always renders at 1587 × 1123px */}
      <div
        className="canvas-a3-fixed"
        data-canvas-id={canvas.id}
      >
        {/* Week Banner - Small text at top */}
        <div className="text-center py-2 md:py-3 shrink-0">
          <span className="inline-block px-3 md:px-4 py-1 border border-black text-[10px] md:text-[12px] font-medium tracking-wide uppercase">
            Programme Pionniers — Semaine {canvas.week}
          </span>
        </div>

        {/* Canvas Title Header */}
        <div className="mx-4 md:mx-8 border-2 border-black shrink-0">
          <div className="flex flex-col items-center py-3 md:py-5 px-2">
            <div className="flex items-center justify-center gap-2 md:gap-4">
              {/* Number Badge */}
              <div className="w-8 h-8 md:w-10 md:h-10 bg-black text-white flex items-center justify-center font-bold text-[16px] md:text-[20px] shrink-0">
                {canvas.exerciseNumber}
              </div>
              {/* Title */}
              <h1 className="text-[18px] md:text-[32px] font-normal tracking-[0.5px] md:tracking-[1px] uppercase text-center">
                {canvas.title}
              </h1>
            </div>
            {/* Subtitle - shown directly under title */}
            {canvas.subtitle && (
              <p className="text-[12px] md:text-[14px] text-[#364153] mt-2 text-center">
                {canvas.subtitle}
              </p>
            )}
          </div>
        </div>

        {/* Canvas Body - Use specialized template or default grid */}
        <div className="flex-1 mx-4 md:mx-6 my-2 md:my-3 overflow-hidden">
          {TemplateComponent ? (
            <TemplateComponent canvas={canvas} className="h-full border border-gray-200" teamName={teamName} />
          ) : (
            <div className="p-8 h-full overflow-auto border border-gray-200">
              <div className="grid grid-cols-2 gap-6">
                {canvas.inputFields.map((field) => (
                  <CanvasField
                    key={field.id}
                    canvasId={canvas.id}
                    field={field}
                  />
                ))}
              </div>
              {/* Default Footer for non-specialized templates */}
              <div className="mt-6 pt-4 border-t-2 border-[#d1d5dc] flex items-center justify-between text-[12px] text-[#6a7282]">
                <div className="flex items-center gap-1">
                  <span>Équipe : {teamName || ''}</span>
                </div>
                <span>© Mathieu Aguesse 2026</span>
                <div className="flex items-center gap-1">
                  <span>Date :</span>
                  <span className="border-b border-gray-300 min-w-[80px] inline-block">&nbsp;</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}