"use client";

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

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

/**
 * Prototype Brief Canvas Template
 * For defining prototype objectives and testing criteria
 */
export function PrototypeBriefCanvas({ canvas, className }: PrototypeBriefCanvasProps) {
  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-2 gap-4 md:gap-6 p-4 md:p-8">
        {/* Left Column */}
        <div className="flex flex-col gap-4 md:gap-6">
          {/* Objective */}
          <div className="bg-blue-50 border-2 border-blue-300 rounded-xl p-4 md:p-5">
            <div className="flex items-center gap-2 mb-3">
              <span className="text-xl md:text-2xl">🎯</span>
              <h3 className="font-bold text-blue-800 uppercase tracking-wide text-xs md:text-sm">
                Objectif du Prototype
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "objective",
                type: "textarea",
                label: "",
                placeholder: "Que voulez-vous apprendre ou valider avec ce prototype?",
                rows: 4,
              }}
              className="!col-span-1"
            />
          </div>

          {/* Hypothesis */}
          <div className="bg-purple-50 border-2 border-purple-300 rounded-xl p-5 flex-1">
            <div className="flex items-center gap-2 mb-3">
              <span className="text-2xl">🔬</span>
              <h3 className="font-bold text-purple-800 uppercase tracking-wide text-sm">
                Hypothèse à Tester
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "hypothesis",
                type: "textarea",
                label: "",
                placeholder: "Nous pensons que [hypothèse]. Nous le saurons si [métrique/observation].",
                rows: 5,
              }}
              className="!col-span-1"
            />
          </div>
        </div>

        {/* Right Column */}
        <div className="flex flex-col gap-6">
          {/* Success Criteria */}
          <div className="bg-green-50 border-2 border-green-300 rounded-xl p-5">
            <div className="flex items-center gap-2 mb-3">
              <span className="text-2xl">✅</span>
              <h3 className="font-bold text-green-800 uppercase tracking-wide text-sm">
                Critères de Succès
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "success-criteria",
                type: "list",
                label: "",
                placeholder: "• Critère 1\n• Critère 2\n• Critère 3",
                rows: 5,
              }}
              className="!col-span-1"
            />
          </div>

          {/* Resources */}
          <div className="bg-amber-50 border-2 border-amber-300 rounded-xl p-5 flex-1">
            <div className="flex items-center gap-2 mb-3">
              <span className="text-2xl">🛠️</span>
              <h3 className="font-bold text-amber-800 uppercase tracking-wide text-sm">
                Ressources Nécessaires
              </h3>
            </div>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "resources",
                type: "textarea",
                label: "",
                placeholder: "Matériel, outils, personnes, temps nécessaires...",
                rows: 5,
              }}
              className="!col-span-1"
            />
          </div>
        </div>
      </div>

      {/* Timeline */}
      <div className="px-8 pb-6">
        <div className="bg-gray-50 border border-gray-200 rounded-xl p-5">
          <div className="flex items-center gap-2 mb-3">
            <span className="text-2xl">📅</span>
            <h3 className="font-bold text-gray-700 uppercase tracking-wide text-sm">
              Planning
            </h3>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: "timeline",
              type: "textarea",
              label: "",
              placeholder: "Étapes clés et dates cibles pour la création et le test du prototype",
              rows: 2,
            }}
          />
        </div>
      </div>
    </div>
  );
}