"use client";

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

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

interface SectionProps {
  title: string;
  questions: string[];
  canvasId: string;
  fieldId: string;
  isCenter?: boolean;
  className?: string;
}

function Section({ title, questions, canvasId, fieldId, isCenter, className }: SectionProps) {
  return (
    <div
      className={cn(
        "flex flex-col",
        isCenter
          ? "bg-white border-[6px] border-black px-5 py-4"
          : "bg-[#f3f4f6] border-[3px] border-black px-4 py-3",
        className
      )}
    >
      {/* Title */}
      <h2
        className={cn(
          "uppercase tracking-[0.05px] mb-2",
          isCenter
            ? "text-[18px] font-bold text-[#0a0a0a] leading-[24px] text-center"
            : "text-[15px] font-normal text-[#0a0a0a] leading-[22px]"
        )}
      >
        {title}
      </h2>

      {/* Questions */}
      <div className={cn("flex flex-col gap-0.5 mb-2", isCenter && "items-center")}>
        {questions.map((question, idx) => (
          <p
            key={idx}
            className={cn(
              "text-[11px] text-[#0a0a0a] leading-[14px]",
              isCenter && "text-center"
            )}
          >
            • {question}
          </p>
        ))}
      </div>

      {/* Notes separator and field */}
      <div className="border-t-2 border-[#99a1af] pt-2 mt-auto flex-1 flex flex-col">
        <p className={cn(
          "text-[11px] text-[#6a7282] leading-[14px] mb-1",
          isCenter && "text-center"
        )}>
          NOTES :
        </p>
        <CanvasField
          canvasId={canvasId}
          field={{
            id: fieldId,
            type: "textarea",
            label: "",
            placeholder: "",
            rows: 3,
          }}
          className="flex-1 min-h-[40px]"
        />
      </div>
    </div>
  );
}

// Arrow pointing down
function DownArrow({ className }: { className?: string }) {
  return (
    <div className={cn("flex flex-col items-center", className)}>
      <div className="w-1 bg-black flex-1" style={{ minHeight: "16px" }} />
      <div
        className="w-0 h-0"
        style={{
          borderLeft: "8px solid transparent",
          borderRight: "8px solid transparent",
          borderTop: "12px solid black",
        }}
      />
    </div>
  );
}

/**
 * Value Chain Canvas Template
 * Vertical flow layout for mapping value chain with suppliers, partners, core activities, and clients
 */
export function ValueChainCanvas({ canvas, className, teamName }: ValueChainCanvasProps) {
  return (
    <DesktopOnlyGuard>
      <div className={cn("h-full flex flex-col", className)}>
        {/* Subtitle description */}
        <div className="px-3 pt-2 pb-1.5 border-b-4 border-black flex-shrink-0">
          <p className="text-[11px] text-[#4a5565] leading-[14px] tracking-[-0.1px]">
            Cartographiez le système de valeur de votre organisation
          </p>
        </div>

        {/* Main content area */}
        <div className="flex-1 p-3 flex flex-col min-h-0 overflow-hidden">
          {/* Top Row: Fournisseurs & Prestataires */}
          <div className="flex gap-4 mb-0" style={{ height: "26%" }}>
            {/* Fournisseurs */}
            <Section
              title="Fournisseurs"
              questions={[
                "Qui fournit les ressources essentielles ?",
                "Quelles matières premières ou données ?",
              ]}
              canvasId={canvas.id}
              fieldId="fournisseurs"
              className="flex-1"
            />

            {/* Prestataires & Partenaires */}
            <Section
              title="Prestataires & Partenaires"
              questions={[
                "Qui complète votre offre ?",
                "Quels services externalisés ?",
              ]}
              canvasId={canvas.id}
              fieldId="prestataires-partenaires"
              className="flex-1"
            />
          </div>

          {/* Arrows from top boxes to center */}
          <div className="flex justify-around h-8 flex-shrink-0">
            <DownArrow className="ml-[25%] -translate-x-1/2" />
            <DownArrow className="mr-[25%] translate-x-1/2" />
          </div>

          {/* Center: Activités Clés Maîtrisées */}
          <div className="flex justify-center mb-0" style={{ height: "30%" }}>
            <Section
              title="Activités Clés Maîtrisées"
              questions={[
                "Quelles activités créent de la valeur ?",
                "Quel savoir-faire unique ?",
                "Quels processus internes critiques ?",
              ]}
              canvasId={canvas.id}
              fieldId="activites-cles"
              isCenter={true}
              className="w-[65%]"
            />
          </div>

          {/* Arrow from center to clients */}
          <div className="flex justify-center h-6 flex-shrink-0">
            <DownArrow />
          </div>

          {/* Bottom: Clients */}
          <div className="flex justify-center" style={{ height: "22%" }}>
            <Section
              title="Clients"
              questions={[
                "À qui livrez-vous de la valeur ?",
                "Quels segments de clientèle ?",
              ]}
              canvasId={canvas.id}
              fieldId="clients"
              className="w-[65%]"
            />
          </div>
        </div>

        {/* Canvas-specific Footer */}
        <div className="border-t-2 border-[#d1d5dc] px-3 py-2 flex-shrink-0">
          <div className="flex justify-between items-center text-[11px] text-[#6a7282] leading-[14px]">
            <div className="flex items-center gap-1">
              <span>Équipe : {teamName || ''}</span>
            </div>
            <span>© Mathieu Aguesse 2026</span>
            <div className="flex items-center gap-1">
              <span>Date :</span>
              <span className="border-b border-gray-300 min-w-[50px] inline-block">&nbsp;</span>
            </div>
          </div>
        </div>
      </div>
    </DesktopOnlyGuard>
  );
}