"use client";

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

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

/**
 * Retrospective Canvas Template
 * Final reflection canvas for the workshop
 */
export function RetrospectiveCanvas({ canvas, className }: RetrospectiveCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      <div className="flex-1 p-4 md:p-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 md:h-full">
          {/* Left Column */}
          <div className="flex flex-col gap-4 md:gap-6">
            {/* Successes */}
            <div className="flex-1 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300 rounded-2xl p-5">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-3xl">🎉</span>
                <h3 className="font-bold text-green-800 uppercase tracking-wide">
                  Succès
                </h3>
              </div>
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "successes",
                  type: "textarea",
                  label: "",
                  placeholder: "Quels ont été les moments forts et les réussites de cet atelier?",
                  rows: 6,
                }}
                className="!col-span-1"
              />
            </div>

            {/* Challenges */}
            <div className="flex-1 bg-gradient-to-br from-amber-50 to-orange-50 border-2 border-amber-300 rounded-2xl p-5">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-3xl">🏔️</span>
                <h3 className="font-bold text-amber-800 uppercase tracking-wide">
                  Défis
                </h3>
              </div>
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "challenges",
                  type: "textarea",
                  label: "",
                  placeholder: "Quels obstacles avez-vous rencontrés et comment les avez-vous surmontés?",
                  rows: 6,
                }}
                className="!col-span-1"
              />
            </div>
          </div>

          {/* Right Column */}
          <div className="flex flex-col gap-6">
            {/* Learnings */}
            <div className="flex-1 bg-gradient-to-br from-blue-50 to-cyan-50 border-2 border-blue-300 rounded-2xl p-5">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-3xl">📚</span>
                <h3 className="font-bold text-blue-800 uppercase tracking-wide">
                  Apprentissages
                </h3>
              </div>
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "learnings",
                  type: "textarea",
                  label: "",
                  placeholder: "Quels sont les apprentissages clés que vous retirez de cette expérience?",
                  rows: 6,
                }}
                className="!col-span-1"
              />
            </div>

            {/* Next Actions */}
            <div className="flex-1 bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-300 rounded-2xl p-5">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-3xl">🚀</span>
                <h3 className="font-bold text-purple-800 uppercase tracking-wide">
                  Prochaines Actions
                </h3>
              </div>
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "next-actions",
                  type: "list",
                  label: "",
                  placeholder: "• Action concrète 1\n• Action concrète 2\n• Action concrète 3",
                  rows: 6,
                }}
                className="!col-span-1"
              />
            </div>
          </div>
        </div>

        {/* Team Gratitude */}
        <div className="mt-6 bg-gradient-to-r from-rose-50 via-pink-50 to-fuchsia-50 border-2 border-pink-300 rounded-2xl p-5">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-3xl">💝</span>
            <h3 className="font-bold text-pink-800 uppercase tracking-wide">
              Reconnaissance
            </h3>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: "gratitude",
              type: "textarea",
              label: "",
              placeholder: "Que souhaitez-vous remercier ou célébrer? Mentionnez les contributions individuelles...",
              rows: 2,
            }}
          />
        </div>
      </div>
    </div>
  );
}