"use client";

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

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

/**
 * Partner Reactions Canvas Template (Template #17)
 * Capturer les retours, émotions et insights pendant l'atelier co-création
 * 
 * Design: 2x2 grid (Résonne, Inquiète, Enthousiasme, Questions) + synthesis
 */

export function PartnerReactionsCanvas({ canvas, className }: PartnerReactionsCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      {/* Subtitle */}
      <div className="px-3 md:px-6 pb-2 shrink-0">
        <p className="text-[12px] md:text-[14px] text-[#364153] leading-[18px] md:leading-[20px]">
          Capturer les retours, émotions et insights pendant l'atelier co-création
        </p>
      </div>

      {/* 2x2 Grid - stacks on mobile */}
      <div className="flex-1 grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-3 px-3 md:px-6 pb-3 md:min-h-0">
        {/* Ce qui résonne */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[36px] h-[36px] shrink-0 flex items-center justify-center">
              <span className="text-[18px] text-white">+</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Ce qui résonne</h3>
              <p className="text-[10px] text-[#4a5565]">Pertinent, intéressant</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{ id: "resonates", type: "textarea", label: "", placeholder: "Zone pour post-its ou notes manuscrites", rows: 4 }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* Ce qui inquiète */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[36px] h-[36px] shrink-0 flex items-center justify-center">
              <span className="text-[18px] text-white">!</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Ce qui inquiète</h3>
              <p className="text-[10px] text-[#4a5565]">Préoccupations, doutes, peurs</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{ id: "concerns", type: "textarea", label: "", placeholder: "Zone pour post-its ou notes manuscrites", rows: 4 }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* Ce qui enthousiasme */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[36px] h-[36px] shrink-0 flex items-center justify-center">
              <span className="text-[18px] text-white">★</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Ce qui enthousiasme</h3>
              <p className="text-[10px] text-[#4a5565]">Opportunités à explorer</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{ id: "excitement", type: "textarea", label: "", placeholder: "Zone pour post-its ou notes manuscrites", rows: 4 }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>

        {/* Questions ouvertes */}
        <div className="bg-white border-4 border-black p-4 flex flex-col min-h-0">
          <div className="flex gap-3 items-start mb-2 shrink-0">
            <div className="bg-black w-[36px] h-[36px] shrink-0 flex items-center justify-center">
              <span className="text-[18px] text-white">?</span>
            </div>
            <div>
              <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase">Questions ouvertes</h3>
              <p className="text-[10px] text-[#4a5565]">Besoin de clarification</p>
            </div>
          </div>
          <CanvasField
            canvasId={canvas.id}
            field={{ id: "questions", type: "textarea", label: "", placeholder: "Zone pour post-its ou notes manuscrites", rows: 4 }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[10px] h-full resize-none !rounded-none"
          />
        </div>
      </div>

      {/* Synthesis Section */}
      <div className="mx-6 bg-[#f3f4f6] border-4 border-black p-4 shrink-0">
        <h3 className="text-[14px] font-bold text-[#0a0a0a] uppercase mb-2">
          → Synthèse des échanges :
        </h3>
        <CanvasField
          canvasId={canvas.id}
          field={{ id: "synthesis", type: "textarea", label: "", rows: 2 }}
          hideLabel
          className="h-[50px]"
          inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[11px] h-full resize-none !rounded-none"
        />
      </div>

      {/* Footer */}
      <div className="border-t-2 border-[#d1d5dc] mx-6 pt-2 pb-1 shrink-0 mt-2">
        <div className="flex items-center justify-between text-[12px] text-[#6a7282]">
          <span>Atelier :</span>
          <span>© Mathieu Aguesse 2026</span>
          <span>Date :</span>
        </div>
      </div>
    </div>
  );
}