"use client";

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

interface ConceptGenerationCanvasProps {
  canvas: CanvasTemplate;
  teamName?: string;
  className?: string;
}

/**
 * Concept Generation Canvas Template (Template #16)
 * Transformer des scénarios en concepts actionnables et testables
 * 
 * Design: 6 concept cards in 3x2 grid
 */

interface ConceptCardProps {
  canvasId: string;
  conceptNumber: number;
}

function ConceptCard({ canvasId, conceptNumber }: ConceptCardProps) {
  return (
    <div className="bg-white border-[3px] border-black flex flex-col h-full overflow-hidden">
      {/* Card Header - Dark Blue */}
      <div className="bg-[#1e3a5f] px-3 py-[5px] shrink-0">
        <p className="text-[10px] font-bold text-white uppercase text-center">
          Concept #{conceptNumber}
        </p>
      </div>

      {/* Card Content */}
      <div className="flex-1 flex flex-col gap-[3px] p-2 min-h-0 overflow-hidden">
        {/* Scénario source */}
        <div className="shrink-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase">Scénario source</label>
        </div>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `concept-${conceptNumber}-scenario`, type: "text", label: "" }}
          hideLabel
          className="h-[22px] shrink-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[9px] h-full !rounded-none"
        />

        {/* Problème adressé */}
        <div className="shrink-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase">Problème adressé</label>
        </div>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `concept-${conceptNumber}-problem`, type: "text", label: "" }}
          hideLabel
          className="h-[22px] shrink-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[9px] h-full !rounded-none"
        />

        {/* Idée de concept */}
        <div className="shrink-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase">Idée de concept</label>
        </div>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `concept-${conceptNumber}-idea`, type: "textarea", label: "", rows: 2 }}
          hideLabel
          className="flex-1 min-h-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[9px] h-full resize-none !rounded-none"
        />

        {/* Pourquoi explorer */}
        <div className="shrink-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase italic">Pourquoi explorer ce concept aujourd'hui ?</label>
        </div>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `concept-${conceptNumber}-why`, type: "text", label: "" }}
          hideLabel
          className="h-[22px] shrink-0"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[9px] h-full !rounded-none"
        />
      </div>
    </div>
  );
}

export function ConceptGenerationCanvas({ canvas, className, teamName }: ConceptGenerationCanvasProps) {
  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]">
          Transformer des scénarios en concepts actionnables et testables
        </p>
      </div>

      {/* Main Content - 6 Concept Cards in responsive grid */}
      <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 md:grid-rows-2 gap-2 px-3 md:px-6 pb-2 md:min-h-0">
        <ConceptCard canvasId={canvas.id} conceptNumber={1} />
        <ConceptCard canvasId={canvas.id} conceptNumber={2} />
        <ConceptCard canvasId={canvas.id} conceptNumber={3} />
        <ConceptCard canvasId={canvas.id} conceptNumber={4} />
        <ConceptCard canvasId={canvas.id} conceptNumber={5} />
        <ConceptCard canvasId={canvas.id} conceptNumber={6} />
      </div>

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