"use client";

import { cn } from "@/lib/utils";
import { CanvasField } from "../CanvasField";
import { DesktopOnlyGuard } from "@/components/ui";
import type { CanvasTemplate } from "@/lib/types";

interface JourneyMapCanvasProps {
  canvas: CanvasTemplate;
  className?: string;
}

/**
 * Journey Map Canvas Template
 * Timeline-based layout for mapping user journeys
 */
export function JourneyMapCanvas({ canvas, className }: JourneyMapCanvasProps) {
  const stages = [
    { id: "awareness", label: "Découverte", color: "blue" },
    { id: "consideration", label: "Considération", color: "cyan" },
    { id: "decision", label: "Décision", color: "green" },
    { id: "usage", label: "Usage", color: "amber" },
    { id: "loyalty", label: "Fidélisation", color: "purple" },
  ];

  return (
    <DesktopOnlyGuard>
      <div className={cn("h-full flex flex-col", className)}>
        <div className="flex-1 p-6 overflow-auto">
          {/* Reference Info */}
          <div className="grid grid-cols-2 gap-4 mb-6">
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "persona-ref",
                type: "text",
                label: "Persona Associé",
                placeholder: "Nom du persona de référence",
              }}
            />
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "scenario-ref",
                type: "text",
                label: "Scénario de Référence",
                placeholder: "Titre du scénario",
              }}
            />
          </div>

          {/* Journey Timeline */}
          <div className="relative">
            {/* Timeline line */}
            <div className="absolute top-8 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 via-green-400 to-purple-400 rounded-full" />

            {/* Stage columns */}
            <div className="grid grid-cols-5 gap-3 relative">
              {stages.map((stage, index) => (
                <div key={stage.id} className="flex flex-col">
                  {/* Stage header */}
                  <div className="flex flex-col items-center mb-4">
                    <div className={cn(
                      "w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm z-10",
                      stage.color === "blue" && "bg-blue-500",
                      stage.color === "cyan" && "bg-cyan-500",
                      stage.color === "green" && "bg-green-500",
                      stage.color === "amber" && "bg-amber-500",
                      stage.color === "purple" && "bg-purple-500",
                    )}>
                      {index + 1}
                    </div>
                    <span className="text-xs font-bold text-gray-600 uppercase tracking-wide mt-2">
                      {stage.label}
                    </span>
                  </div>

                  {/* Stage content */}
                  <div className={cn(
                    "flex-1 rounded-xl border-2 p-3 space-y-3",
                    stage.color === "blue" && "bg-blue-50 border-blue-200",
                    stage.color === "cyan" && "bg-cyan-50 border-cyan-200",
                    stage.color === "green" && "bg-green-50 border-green-200",
                    stage.color === "amber" && "bg-amber-50 border-amber-200",
                    stage.color === "purple" && "bg-purple-50 border-purple-200",
                  )}>
                    <CanvasField
                      canvasId={canvas.id}
                      field={{
                        id: `${stage.id}-actions`,
                        type: "textarea",
                        label: "Actions",
                        placeholder: "Que fait l'utilisateur?",
                        rows: 3,
                      }}
                      className="!col-span-1"
                    />

                    <CanvasField
                      canvasId={canvas.id}
                      field={{
                        id: `${stage.id}-thoughts`,
                        type: "textarea",
                        label: "Pensées",
                        placeholder: "Que pense-t-il?",
                        rows: 2,
                      }}
                      className="!col-span-1"
                    />

                    <CanvasField
                      canvasId={canvas.id}
                      field={{
                        id: `${stage.id}-emotions`,
                        type: "textarea",
                        label: "Émotions",
                        placeholder: "😊 😐 😟",
                        rows: 2,
                      }}
                      className="!col-span-1"
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Pain Points & Opportunities */}
          <div className="grid grid-cols-2 gap-6 mt-6">
            <div className="bg-red-50 border border-red-200 rounded-xl p-4">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "pain-points",
                  type: "textarea",
                  label: "🔴 Points de Friction",
                  placeholder: "Quels sont les moments difficiles pour l'utilisateur?",
                  rows: 3,
                }}
              />
            </div>

            <div className="bg-green-50 border border-green-200 rounded-xl p-4">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "opportunities",
                  type: "textarea",
                  label: "🟢 Opportunités",
                  placeholder: "Quelles opportunités d'amélioration identifiez-vous?",
                  rows: 3,
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </DesktopOnlyGuard>
  );
}