"use client";

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

interface TransitionS3CanvasProps {
  canvas: CanvasTemplate;
  teamName?: string;
  className?: string;
  pageIndex?: number;
  isMultiPage?: boolean;
}

/**
 * Transition to S3 Canvas Template (Template #19)
 * Préparer la phase terrain — Orienter la recherche utilisateur et le prototypage
 * 
 * Design: 3 tall columns with black headers + gray input areas
 * Bottom: Action plan section (black bg)
 */

interface ColumnProps {
  canvasId: string;
  icon: string;
  title: string;
  subtitle: string;
  fieldId: string;
  placeholderTitle: string;
  placeholderItems: string[];
}

function Column({ canvasId, icon, title, subtitle, fieldId, placeholderTitle, placeholderItems }: ColumnProps) {
  const placeholder = `${placeholderTitle}\n\n${placeholderItems.map(item => `• ${item}`).join('\n')}`;

  return (
    <div className="flex-1 bg-white border-4 border-black flex flex-col min-h-0 overflow-hidden">
      {/* Black Header - Tall with centered content */}
      <div className="bg-black px-5 pt-5 pb-4 shrink-0">
        <div className="text-center">
          <p className="text-[32px] mb-2">{icon}</p>
          <h3 className="text-[18px] font-bold text-white uppercase tracking-tight">
            {title}
          </h3>
          <p className="text-[11px] text-white/90 mt-1">
            {subtitle}
          </p>
        </div>
      </div>

      {/* Content Area */}
      <div className="flex-1 p-4 min-h-0">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: fieldId,
            type: "textarea",
            label: "",
            placeholder: placeholder,
            rows: 15,
          }}
          hideLabel
          className="h-full"
          inputClassName="bg-[#f9fafb] border-2 border-[#99a1af] !p-3 text-[11px] h-full resize-none !rounded-none"
        />
      </div>
    </div>
  );
}

export function TransitionS3Canvas({
  canvas,
  className,
  teamName,
  pageIndex = 1,
  isMultiPage = false
}: TransitionS3CanvasProps) {
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : "";
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      {/* Subtitle */}
      <div className="px-3 md:px-6 pb-3 shrink-0">
        <p className="text-[12px] md:text-[14px] text-[#364153] leading-[18px] md:leading-[20px]">
          Préparer la phase terrain — Orienter la recherche utilisateur et le prototypage
        </p>
      </div>

      {/* Main Content - 3 Columns stack on mobile */}
      {/* Main Content - 3 Columns stack on mobile */}
      <div className="flex-1 flex flex-col gap-3 px-3 md:px-6 pb-3 md:min-h-0">
        {/* Concept Name Section */}
        <div className="bg-white border-2 border-black p-4 shrink-0 flex items-center gap-4">
          <label className="font-bold text-[14px] uppercase whitespace-nowrap">Concept concerné :</label>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: `${fieldPrefix}concept-name`,
              type: "text",
              label: "",
              placeholder: "Nom du concept..."
            }}
            hideLabel
            className="flex-1"
            inputClassName="bg-[#f9fafb] border-b-2 border-black !border-t-0 !border-x-0 !rounded-none focus:!ring-0 px-2 py-1 font-bold text-[16px]"
          />
        </div>

        <div className="flex-1 flex flex-col md:flex-row gap-3 min-h-0">
          <Column
            canvasId={canvas.id}
            icon="🔬"
            title="Hypothèses à Tester"
            subtitle="Ce qui nécessite une validation terrain"
            fieldId={`${fieldPrefix}hypotheses`}
            placeholderTitle="Questions de validation :"
            placeholderItems={[
              "Quelle hypothèse clé valider ?",
              "Pourquoi la tester maintenant ?",
              "Quel est le critère de validation ?"
            ]}
          />

          <Column
            canvasId={canvas.id}
            icon="👥"
            title="Cibles à Investiguer"
            subtitle="Utilisateurs et contextes terrain"
            fieldId={`${fieldPrefix}targets`}
            placeholderTitle="Qui et où aller :"
            placeholderItems={[
              "Quel profil / segment cibler ?",
              "Où les trouver concrètement ?",
              "Quelle méthode d'investigation ?"
            ]}
          />

          <Column
            canvasId={canvas.id}
            icon="❓"
            title="Questions Terrain"
            subtitle="Ce qu'on a besoin d'apprendre"
            fieldId={`${fieldPrefix}field-questions`}
            placeholderTitle="Apprentissages recherchés :"
            placeholderItems={[
              "Qu'est-ce qu'on ignore encore ?",
              "Quelles incertitudes lever ?",
              "Quels insights manquent-ils ?"
            ]}
          />
        </div>
      </div>

      {/* Action Plan Section - Black Background */}
      <div className="mx-6 bg-black border-4 border-black p-5 shrink-0">
        <h3 className="text-[13px] font-bold text-white uppercase mb-2">
          → Plan d'action pour S3 (prochaines 2 semaines) :
        </h3>
        <CanvasField
          canvasId={canvas.id}
          field={{ id: `${fieldPrefix}action-plan`, type: "textarea", label: "", rows: 2 }}
          hideLabel
          className="h-[55px]"
          inputClassName="bg-white border-0 !p-2 text-[11px] h-full resize-none !rounded-none"
        />
      </div>

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