"use client";

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

interface ValidationSelectorProps {
  canvasId: string;
  fieldId: string;
  title?: string;
  className?: string;
}

function ValidationSelector({ canvasId, fieldId, title = "✓ Validation finale", className }: ValidationSelectorProps) {
  const { getCanvas, updateCanvasField } = useCanvasStore();
  const currentValue = (getCanvas(canvasId)?.fields[fieldId] as string) || "";

  const containerStyle = (() => {
    switch (currentValue) {
      case "GO": return "bg-[#22c55e] border-[#22c55e]";
      case "AJUSTEMENTS": return "bg-[#eab308] border-[#eab308]";
      case "NO-GO": return "bg-[#ef4444] border-[#ef4444]";
      default: return "bg-black border-black";
    }
  })();

  const headerTextStyle = currentValue === "AJUSTEMENTS" ? "text-black" : "text-white";

  const options = [
    { value: "GO", label: "GO", style: "bg-[#22c55e] text-white border-[#22c55e]" },
    { value: "AJUSTEMENTS", label: "AJUSTEMENTS", style: "bg-[#eab308] text-white border-[#eab308]" },
    { value: "NO-GO", label: "NO-GO", style: "bg-[#ef4444] text-white border-[#ef4444]" },
  ];

  return (
    <div className={cn(
      "border-4 p-3 flex items-center justify-between shrink-0 transition-colors duration-300",
      containerStyle,
      className
    )}>
      <h3 className={cn("text-[13px] font-bold uppercase transition-colors duration-300", headerTextStyle)}>
        {title}
      </h3>
      <div className="flex gap-2">
        {options.map((option) => (
          <button
            key={option.value}
            type="button"
            onClick={() => updateCanvasField(canvasId, fieldId, option.value)}
            className={cn(
              "border-2 px-4 py-2 text-[11px] font-bold transition-all duration-200",
              option.style,
              currentValue === option.value
                ? "ring-2 ring-white scale-105 shadow-lg"
                : "opacity-90 hover:opacity-100 hover:scale-105"
            )}
          >
            {option.label}
          </button>
        ))}
      </div>
    </div>
  );
}

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

/**
 * Concept Journey Canvas Template (Template #18)
 * Définir les grandes étapes de l'expérience du concept
 * 
 * Design: 2 columns (Concept A & B) with 5 steps each + validation buttons
 */

interface ConceptColumnProps {
  canvasId: string;
  conceptLabel: string;
}

function ConceptColumn({ canvasId, conceptLabel }: ConceptColumnProps) {
  const prefix = conceptLabel.toLowerCase().replace(" ", "-");

  return (
    <div className="flex flex-col gap-2 flex-1 min-h-0">
      {/* Column Header */}
      <div className="bg-[#1e3a5f] px-4 py-2 text-center shrink-0">
        <p className="text-[14px] font-bold text-white uppercase">{conceptLabel}</p>
      </div>

      {/* Step 1: Paradoxe Initial */}
      <div className="bg-white border-[3px] border-black p-3 shrink-0">
        <div className="flex items-center gap-2 mb-1">
          <div className="bg-black w-[24px] h-[24px] shrink-0 flex items-center justify-center">
            <span className="text-[11px] font-bold text-white">1</span>
          </div>
          <label className="text-[10px] font-bold text-[#0a0a0a] uppercase">Paradoxe initial</label>
        </div>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `${prefix}-paradox`, type: "text", label: "" }}
          hideLabel
          className="h-[24px]"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full !rounded-none"
        />
      </div>

      <div className="text-center text-[#6a7282] shrink-0">↓</div>

      {/* Step 2: Signaux Faibles Clés */}
      <div className="bg-white border-[3px] border-black p-3 shrink-0">
        <div className="flex items-center gap-2 mb-1">
          <div className="bg-black w-[24px] h-[24px] shrink-0 flex items-center justify-center">
            <span className="text-[11px] font-bold text-white">2</span>
          </div>
          <label className="text-[10px] font-bold text-[#0a0a0a] uppercase">Signaux faibles clés</label>
        </div>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `${prefix}-signals`, type: "text", label: "" }}
          hideLabel
          className="h-[24px]"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full !rounded-none"
        />
      </div>

      <div className="text-center text-[#6a7282] shrink-0">↓</div>

      {/* Step 3: Scénario Source */}
      <div className="bg-white border-[3px] border-black p-3 shrink-0">
        <div className="flex items-center gap-2 mb-1">
          <div className="bg-black w-[24px] h-[24px] shrink-0 flex items-center justify-center">
            <span className="text-[11px] font-bold text-white">3</span>
          </div>
          <label className="text-[10px] font-bold text-[#0a0a0a] uppercase">Scénario source</label>
        </div>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `${prefix}-scenario`, type: "text", label: "" }}
          hideLabel
          className="h-[24px]"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full !rounded-none"
        />
      </div>

      <div className="text-center text-[#6a7282] shrink-0">↓</div>

      {/* Step 4: Le Concept - Black Background */}
      <div className="bg-black border-[3px] border-black p-3 flex-1 min-h-0">
        <div className="flex items-center gap-2 mb-1">
          <div className="bg-white w-[24px] h-[24px] shrink-0 flex items-center justify-center">
            <span className="text-[11px] font-bold text-black">4</span>
          </div>
          <label className="text-[10px] font-bold text-white uppercase">Le concept</label>
        </div>
        <p className="text-[9px] text-white/80 mb-1">Description</p>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `${prefix}-concept-desc`, type: "textarea", label: "", rows: 2 }}
          hideLabel
          className="h-[40px] mb-2"
          inputClassName="bg-white border-0 !p-1 text-[10px] h-full resize-none !rounded-none"
        />
        <p className="text-[9px] text-white/80 mb-1">Pourquoi ce concept ?</p>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `${prefix}-concept-why`, type: "textarea", label: "", rows: 2 }}
          hideLabel
          className="h-[40px]"
          inputClassName="bg-white border-0 !p-1 text-[10px] h-full resize-none !rounded-none"
        />
      </div>

      <div className="text-center text-[#6a7282] shrink-0">↓</div>

      {/* Step 5: Justification */}
      <div className="bg-white border-[3px] border-black p-3 shrink-0">
        <div className="flex items-center gap-2 mb-1">
          <div className="bg-black w-[24px] h-[24px] shrink-0 flex items-center justify-center">
            <span className="text-[11px] font-bold text-white">5</span>
          </div>
          <label className="text-[10px] font-bold text-[#0a0a0a] uppercase">Justification</label>
        </div>
        <p className="text-[9px] text-[#4a5565] italic mb-1">Pourquoi explorer en phase terrain ?</p>
        <CanvasField
          canvasId={canvasId}
          field={{ id: `${prefix}-justification`, type: "text", label: "" }}
          hideLabel
          className="h-[24px]"
          inputClassName="bg-white border border-[#d1d5dc] !p-1 text-[10px] h-full !rounded-none"
        />
      </div>

      <div className="text-center text-[#6a7282] shrink-0">↓</div>

      {/* Validation */}
      <ValidationSelector
        canvasId={canvasId}
        fieldId={`${prefix}-validation`}
        title={`✓ Validation ${conceptLabel}`}
        className="border-2 p-2"
      />
    </div>
  );
}

export function ConceptJourneyCanvas({ canvas, className, teamName }: ConceptJourneyCanvasProps) {
  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]">
          Définir les grandes étapes de l'expérience du concept
        </p>
      </div>

      {/* Main Content - 2 Concept Columns */}
      <div className="flex-1 flex flex-col md:flex-row gap-4 px-3 md:px-6 pb-2 md:min-h-0">
        <ConceptColumn canvasId={canvas.id} conceptLabel="Concept A" />
        <ConceptColumn canvasId={canvas.id} conceptLabel="Concept B" />
      </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>Équipe : {teamName || ''}</span>
          <span>© Mathieu Aguesse 2026</span>
          <span>Date :</span>
        </div>
      </div>
    </div>
  );
}