"use client";

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

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

/**
 * Feedback Grid Canvas Template
 * Four-quadrant layout for organizing user feedback
 */
export function FeedbackGridCanvas({ canvas, className }: FeedbackGridCanvasProps) {
  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-3 md:gap-4 md:h-full">
          {/* Likes */}
          <div className="bg-green-50 border-2 border-green-300 rounded-2xl p-5 flex flex-col">
            <div className="flex items-center gap-3 mb-4">
              <span className="text-3xl">👍</span>
              <div>
                <h3 className="font-bold text-green-800 uppercase tracking-wide text-sm">
                  Ce qui plaît
                </h3>
                <p className="text-xs text-green-600">Points positifs identifiés</p>
              </div>
            </div>
            <div className="flex-1">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "likes",
                  type: "textarea",
                  label: "",
                  placeholder: "Quels aspects ont été appréciés par les testeurs?",
                  rows: 8,
                }}
                className="!col-span-1"
              />
            </div>
          </div>

          {/* Dislikes */}
          <div className="bg-red-50 border-2 border-red-300 rounded-2xl p-5 flex flex-col">
            <div className="flex items-center gap-3 mb-4">
              <span className="text-3xl">👎</span>
              <div>
                <h3 className="font-bold text-red-800 uppercase tracking-wide text-sm">
                  Ce qui déplaît
                </h3>
                <p className="text-xs text-red-600">Points d'amélioration</p>
              </div>
            </div>
            <div className="flex-1">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "dislikes",
                  type: "textarea",
                  label: "",
                  placeholder: "Quels aspects ont posé problème ou déçu?",
                  rows: 8,
                }}
                className="!col-span-1"
              />
            </div>
          </div>

          {/* Questions */}
          <div className="bg-amber-50 border-2 border-amber-300 rounded-2xl p-5 flex flex-col">
            <div className="flex items-center gap-3 mb-4">
              <span className="text-3xl">❓</span>
              <div>
                <h3 className="font-bold text-amber-800 uppercase tracking-wide text-sm">
                  Questions soulevées
                </h3>
                <p className="text-xs text-amber-600">Interrogations des testeurs</p>
              </div>
            </div>
            <div className="flex-1">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "questions",
                  type: "textarea",
                  label: "",
                  placeholder: "Quelles questions ont émergé pendant les tests?",
                  rows: 8,
                }}
                className="!col-span-1"
              />
            </div>
          </div>

          {/* Ideas */}
          <div className="bg-purple-50 border-2 border-purple-300 rounded-2xl p-5 flex flex-col">
            <div className="flex items-center gap-3 mb-4">
              <span className="text-3xl">💡</span>
              <div>
                <h3 className="font-bold text-purple-800 uppercase tracking-wide text-sm">
                  Nouvelles idées
                </h3>
                <p className="text-xs text-purple-600">Suggestions et inspirations</p>
              </div>
            </div>
            <div className="flex-1">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "ideas",
                  type: "textarea",
                  label: "",
                  placeholder: "Quelles nouvelles idées ont été suggérées?",
                  rows: 8,
                }}
                className="!col-span-1"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}