"use client";

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

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

/**
 * Weak Signals Selection Canvas Template (Template #8)
 * Identifiez et sélectionnez les signaux faibles les plus inspirants
 * 
 * Design: 6 signal cards in 3x2 grid + black synthesis section
 * Each card has: header, description, source, why interesting, what it announces
 */

interface SignalCardProps {
  canvasId: string;
  signalNumber: number;
}

function SignalCard({ canvasId, signalNumber }: SignalCardProps) {
  return (
    <div className="bg-white border-[3px] border-black flex flex-col h-full overflow-hidden">
      {/* Card Header - Black background */}
      <div className="bg-black px-2 py-[3px] shrink-0">
        <p className="text-[10px] font-bold text-white uppercase leading-tight">
          Signal #{signalNumber}
        </p>
      </div>

      {/* Card Content */}
      <div className="flex-1 flex flex-col gap-[2px] p-[6px] min-h-0 overflow-hidden">
        {/* Description du signal */}
        <div className="flex flex-col shrink-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase leading-tight mb-[2px]">
            Description du signal
          </label>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `signal-${signalNumber}-desc`,
              type: "textarea",
              label: "",
              placeholder: "",
              rows: 2,
            }}
            hideLabel
            inputClassName="bg-[#f9fafb] border border-[#d1d5dc] !p-1 text-[9px] !h-[36px] resize-none !rounded-none"
          />
        </div>

        {/* Source */}
        <div className="flex flex-col shrink-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase leading-tight mb-[2px]">
            Source
          </label>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `signal-${signalNumber}-source`,
              type: "text",
              label: "",
              placeholder: "",
            }}
            hideLabel
            inputClassName="bg-[#f9fafb] border border-[#d1d5dc] !p-1 text-[9px] !h-[20px] !rounded-none"
          />
        </div>

        {/* Pourquoi intéressant ? */}
        <div className="flex flex-col shrink-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase leading-tight mb-[2px]">
            Pourquoi intéressant ?
          </label>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `signal-${signalNumber}-why`,
              type: "textarea",
              label: "",
              placeholder: "",
              rows: 1,
            }}
            hideLabel
            inputClassName="bg-[#f9fafb] border border-[#d1d5dc] !p-1 text-[9px] !h-[26px] resize-none !rounded-none"
          />
        </div>

        {/* Qu'est-ce que ça annonce ? */}
        <div className="flex flex-col flex-1 min-h-0">
          <label className="text-[9px] font-bold text-[#0a0a0a] uppercase leading-tight mb-[2px] shrink-0">
            Qu'est-ce que ça annonce ?
          </label>
          <CanvasField
            canvasId={canvasId}
            field={{
              id: `signal-${signalNumber}-announces`,
              type: "textarea",
              label: "",
              placeholder: "",
              rows: 3,
            }}
            hideLabel
            className="flex-1 min-h-0"
            inputClassName="bg-[#f9fafb] border border-[#d1d5dc] !p-1 text-[9px] h-full min-h-[40px] resize-none !rounded-none"
          />
        </div>
      </div>
    </div>
  );
}

export function WeakSignalsSelectionCanvas({ canvas, className, teamName }: WeakSignalsSelectionCanvasProps) {
  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]">
          Identifiez et sélectionnez les signaux faibles les plus inspirants pour nourrir vos personas et scénarios
        </p>
      </div>

      {/* Main Content - 6 Signal 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">
        <SignalCard canvasId={canvas.id} signalNumber={1} />
        <SignalCard canvasId={canvas.id} signalNumber={2} />
        <SignalCard canvasId={canvas.id} signalNumber={3} />
        <SignalCard canvasId={canvas.id} signalNumber={4} />
        <SignalCard canvasId={canvas.id} signalNumber={5} />
        <SignalCard canvasId={canvas.id} signalNumber={6} />
      </div>

      {/* Synthesis Section - Black Background */}
      <div className="bg-black border-4 border-black mx-6 mb-2 shrink-0">
        <div className="flex flex-col gap-1 p-3">
          <h3 className="font-bold text-[14px] text-white uppercase leading-[20px]">
            → Synthèse des 6-8 signaux les plus pertinents
          </h3>
          <p className="text-[11px] text-white/80 italic leading-[14px]">
            Comment ces signaux influencent-ils le défi initial proposé par le partenaire ? Qu'est-ce qu'ils révèlent ensemble ?
          </p>
          <CanvasField
            canvasId={canvas.id}
            field={{
              id: "synthesis",
              type: "textarea",
              label: "",
              placeholder: "",
              rows: 2,
            }}
            hideLabel
            inputClassName="bg-white border-2 border-[#d1d5dc] !p-2 text-[12px] h-[45px] resize-none"
          />
        </div>
      </div>

      {/* Footer */}
      <div className="border-t-2 border-[#d1d5dc] mx-6 pt-2 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>
  );
}