"use client";

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

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

/**
 * Synthesis Board Canvas Template
 * Used for summarizing learnings and next steps
 */
export function SynthesisCanvas({ canvas, className }: SynthesisCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      <div className="flex-1 flex flex-col md:grid md:grid-cols-3 gap-4 md:gap-6 p-4 md:p-8">
        {/* Column 1: Key Insights */}
        <div className="flex flex-col gap-4">
          <div className="bg-blue-50 border border-blue-200 rounded-xl p-5 flex-1">
            <div className="flex items-center gap-2 mb-4">
              <span className="text-2xl">💡</span>
              <h3 className="font-bold text-blue-800 uppercase tracking-wide text-sm">
                Insights Clés
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "key-insights",
                type: "textarea",
                label: "",
                placeholder: "Quels sont les apprentissages majeurs de cette semaine?",
                rows: 8,
              }}
              className="!col-span-1"
            />
          </div>

          <div className="bg-purple-50 border border-purple-200 rounded-xl p-5">
            <div className="flex items-center gap-2 mb-4">
              <span className="text-2xl">🔄</span>
              <h3 className="font-bold text-purple-800 uppercase tracking-wide text-sm">
                Patterns Observés
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "patterns",
                type: "textarea",
                label: "",
                placeholder: "Quels schémas ou tendances avez-vous remarqués?",
                rows: 5,
              }}
              className="!col-span-1"
            />
          </div>
        </div>

        {/* Column 2: Questions & Surprises */}
        <div className="flex flex-col gap-4">
          <div className="bg-amber-50 border border-amber-200 rounded-xl p-5 flex-1">
            <div className="flex items-center gap-2 mb-4">
              <span className="text-2xl">❓</span>
              <h3 className="font-bold text-amber-800 uppercase tracking-wide text-sm">
                Questions Ouvertes
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "questions",
                type: "list",
                label: "",
                placeholder: "• Question 1\n• Question 2\n• Question 3",
                rows: 6,
              }}
              className="!col-span-1"
            />
          </div>

          <div className="bg-pink-50 border border-pink-200 rounded-xl p-5 flex-1">
            <div className="flex items-center gap-2 mb-4">
              <span className="text-2xl">🎯</span>
              <h3 className="font-bold text-pink-800 uppercase tracking-wide text-sm">
                Surprises
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "surprises",
                type: "textarea",
                label: "",
                placeholder: "Qu'est-ce qui vous a surpris ou étonné?",
                rows: 5,
              }}
              className="!col-span-1"
            />
          </div>
        </div>

        {/* Column 3: Next Steps */}
        <div className="flex flex-col gap-4">
          <div className="bg-green-50 border border-green-200 rounded-xl p-5 flex-1">
            <div className="flex items-center gap-2 mb-4">
              <span className="text-2xl">🚀</span>
              <h3 className="font-bold text-green-800 uppercase tracking-wide text-sm">
                Prochaines Étapes
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "next-steps",
                type: "textarea",
                label: "",
                placeholder: "Quelles sont les actions prioritaires pour la suite?",
                rows: 6,
              }}
              className="!col-span-1"
            />
          </div>

          <div className="bg-gray-50 border border-gray-200 rounded-xl p-5">
            <div className="flex items-center gap-2 mb-4">
              <span className="text-2xl">📌</span>
              <h3 className="font-bold text-gray-700 uppercase tracking-wide text-sm">
                À Retenir
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "key-takeaways",
                type: "list",
                label: "",
                placeholder: "• Point clé 1\n• Point clé 2\n• Point clé 3",
                rows: 5,
              }}
              className="!col-span-1"
            />
          </div>
        </div>
      </div>
    </div>
  );
}