"use client";

import { CanvasTemplate } from "@/lib/canvas-data";
import { CanvasField } from "../CanvasField";
import { DesktopOnlyGuard } from "@/components/ui";

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

export function EmpathyMapCanvas({ canvas, className = "", teamName }: EmpathyMapCanvasProps) {
  return (
    <DesktopOnlyGuard>
      <div className={`bg-white flex flex-col h-full ${className}`}>
        {/* Orange Warning Banner */}
        <div className="mx-8 mt-4 bg-[#ffedd4] border-2 border-[#ff6900] py-2 px-3 text-center shrink-0">
          <span className="text-[#9f2d00] text-[14px] font-bold uppercase tracking-wider">
            ⚠️ 3 À 4 COPIES NÉCESSAIRES — Une pour chaque concept
          </span>
        </div>
        {/* Main Content - Empathy Map Layout */}
        <div className="flex-1 px-8 py-4 flex flex-col min-h-0 overflow-hidden">
          <div className="flex-1 relative min-h-0">
            {/* PENSE - Top */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[400px]">
              <div className="bg-[#1e3a5f] text-white px-4 py-1 rounded-full text-center text-[12px] font-bold uppercase mx-auto w-fit mb-2">
                PENSE
              </div>
              <div className="border-2 border-[#d1d5dc] rounded-lg p-3 bg-white">
                <p className="text-[12px] text-[#4a5565] text-center mb-1">Pensées, préoccupations, ce qui occupe son esprit</p>
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "thinks",
                    type: "textarea",
                    label: "",
                    placeholder: 'Ex: "Je veux une banque simple" • "Mes parents ne comprennent pas mes besoins" (CASA)',
                    rows: 2,
                  }}
                  hideLabel
                  className=""
                  inputClassName="bg-transparent border-0 !p-0 text-[12px] text-center resize-none !rounded-none"
                />
              </div>
            </div>

            {/* RESSENT - Left */}
            <div className="absolute top-1/2 -translate-y-1/2 left-0 w-[220px]">
              <div className="bg-[#1e3a5f] text-white px-4 py-1 rounded-full text-center text-[12px] font-bold uppercase mx-auto w-fit mb-2">
                RESSENT
              </div>
              <div className="border-2 border-[#d1d5dc] rounded-lg p-3 bg-white">
                <p className="text-[12px] text-[#4a5565] text-center mb-1">État émotionnel, sentiments, humeur</p>
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "feels",
                    type: "textarea",
                    label: "",
                    placeholder: "Ex: Frustration face à la complexité • Envie d'autonomie financière • Méfiance envers les institutions",
                    rows: 3,
                  }}
                  hideLabel
                  className=""
                  inputClassName="bg-transparent border-0 !p-0 text-[12px] text-center resize-none !rounded-none"
                />
              </div>
            </div>

            {/* DIT - Right */}
            <div className="absolute top-1/2 -translate-y-1/2 right-0 w-[220px]">
              <div className="bg-[#1e3a5f] text-white px-4 py-1 rounded-full text-center text-[12px] font-bold uppercase mx-auto w-fit mb-2">
                DIT
              </div>
              <div className="border-2 border-[#d1d5dc] rounded-lg p-3 bg-white">
                <p className="text-[12px] text-[#4a5565] text-center mb-1">Ce qu'il exprime verbalement, citations</p>
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "says",
                    type: "textarea",
                    label: "",
                    placeholder: 'Ex: "J\'aimerais une appli comme Lydia mais avec des avantages" • "Les mutuelles c\'est pour les vieux"',
                    rows: 3,
                  }}
                  hideLabel
                  className=""
                  inputClassName="bg-transparent border-0 !p-0 text-[12px] text-center resize-none !rounded-none"
                />
              </div>
            </div>

            {/* Center Circle */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
              <div className="w-[180px] h-[180px] rounded-full border-2 border-dashed border-[#d1d5dc] flex flex-col items-center justify-center bg-white">
                <div className="w-12 h-12 bg-[#1e3a5f] rounded-full mb-2"></div>
                <span className="text-[14px] font-bold uppercase">UTILISATEUR</span>
                <span className="text-[11px] text-[#6a7282]">Nom / Profil</span>
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "user-profile",
                    type: "text",
                    label: "",
                    placeholder: "Ex: Léa, 19 ans, Étudiante",
                  }}
                  hideLabel
                  className="mt-1"
                  inputClassName="bg-transparent border-0 !p-0 text-[10px] text-center !rounded-none w-[140px]"
                />
              </div>
            </div>

            {/* FAIT - Bottom */}
            <div className="absolute bottom-[80px] left-1/2 -translate-x-1/2 w-[400px]">
              <div className="border-2 border-[#d1d5dc] rounded-lg p-3 bg-white">
                <p className="text-[12px] text-[#4a5565] text-center mb-1">Actions, comportements observables</p>
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "does",
                    type: "textarea",
                    label: "",
                    placeholder: "Ex: Compare 3-6 banques en ligne • Demande conseil sur Reddit • Teste les applis avant de s'engager",
                    rows: 2,
                  }}
                  hideLabel
                  className=""
                  inputClassName="bg-transparent border-0 !p-0 text-[12px] text-center resize-none !rounded-none"
                />
              </div>
              <div className="bg-[#1e3a5f] text-white px-4 py-1 rounded-full text-center text-[12px] font-bold uppercase mx-auto w-fit mt-2">
                FAIT
              </div>
            </div>

            {/* FRUSTRATIONS / PAINS - Bottom Left */}
            <div className="absolute bottom-0 left-0 w-[200px]">
              <div className="border-2 border-[#d1d5dc] rounded-lg p-3 bg-white">
                <div className="flex items-center gap-2 mb-1">
                  <div className="w-4 h-4 rounded-full bg-red-500"></div>
                  <span className="text-[12px] font-bold uppercase">FRUSTRATIONS / PAINS</span>
                </div>
                <p className="text-[11px] text-[#4a5565] mb-1">Problèmes, obstacles, difficultés</p>
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "frustrations",
                    type: "textarea",
                    label: "",
                    placeholder: "Ex: Frais cachés • Jargon incompréhensible • Engagement long",
                    rows: 2,
                  }}
                  hideLabel
                  className=""
                  inputClassName="bg-transparent border-0 !p-0 text-[10px] resize-none !rounded-none"
                />
              </div>
            </div>

            {/* GAINS / ASPIRATIONS - Bottom Right */}
            <div className="absolute bottom-0 right-0 w-[200px]">
              <div className="border-2 border-[#d1d5dc] rounded-lg p-3 bg-white">
                <div className="flex items-center gap-2 mb-1">
                  <div className="w-4 h-4 rounded-full bg-green-500"></div>
                  <span className="text-[12px] font-bold uppercase">GAINS / ASPIRATIONS</span>
                </div>
                <p className="text-[11px] text-[#4a5565] mb-1">Bénéfices recherchés, objectifs</p>
                <CanvasField
                  canvasId={canvas.id}
                  field={{
                    id: "gains",
                    type: "textarea",
                    label: "",
                    placeholder: "Ex: Transparence totale • Gérer son argent facilement • Se sentir valorisé",
                    rows: 2,
                  }}
                  hideLabel
                  className=""
                  inputClassName="bg-transparent border-0 !p-0 text-[10px] resize-none !rounded-none"
                />
              </div>
            </div>
          </div>

          {/* Yellow Info Banner */}
          <div className="bg-[#fef3c7] border-2 border-[#f59e0b] py-2 px-4 text-center shrink-0 mt-4">
            <p className="text-[12px] text-[#92400e]">
              ⚠️ Se concentrer sur des observations réelles et des hypothèses à tester
            </p>
          </div>
        </div>

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