"use client";

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

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

const stages = [
  { id: "stage-1", label: "ÉTAPE 1", example: "Ex: Découverte" },
  { id: "stage-2", label: "ÉTAPE 2", example: "Ex: Inscription" },
  { id: "stage-3", label: "ÉTAPE 3", example: "Ex: 1ère utilisation" },
  { id: "stage-4", label: "ÉTAPE 4", example: "Ex: Usage régulier" },
  { id: "stage-5", label: "ÉTAPE 5", example: "Ex: Ambassadeur" },
];

const rows = [
  { id: "touchpoints", label: "TOUCHPOINTS", examples: ["Ex: Pub Instagram", "Ex: Landing page + SMS", "Ex: App mobile + Email", "Ex: App + Notif push", "Ex: Réseau social + Email"] },
  { id: "actions", label: "ACTIONS UTILISATEUR", examples: ["Ex: Clique sur l'annonce", "Ex: Remplit formulaire + Valide", "Ex: Explore l'interface + Fait 1er achat", "Ex: Se connecte + Participe au challenge", "Ex: Partage sur réseaux + Invite ami"] },
  { id: "frontstage", label: "FRONTSTAGE", examples: ["Ex: Campagne Meta Ads visible", "Ex: Email de bienvenue + Guide d'onboarding", "Ex: Interface gamifiée + Confirmation achat", "Ex: Challenges quotidiens + Badges visibles", "Ex: Programme parrainage + Récompenses"] },
];

const backstageRows = [
  { id: "backstage", label: "BACKSTAGE", examples: ["Ex: Paramétrage ciblage + Budget pub", "Ex: Validation compte + KYC simplifié", "Ex: Traitement paiement + Mise à jour profil", "Ex: Calcul points + Modération contenu", "Ex: Envoi codes parrainage + Tracking"] },
  { id: "systems", label: "SYSTÈMES SUPPORT", examples: ["Ex: Meta Business + Analytics", "Ex: CRM + Base de données + MailChimp", "Ex: Stripe + Firebase + Cloud storage", "Ex: Algo de gamification + Dashboard admin", "Ex: API partenaire + BI tools"] },
];

export function UserJourneyMapCanvas({ canvas, className = "", teamName, pageIndex = 1, isMultiPage = false }: UserJourneyMapCanvasProps & { pageIndex?: number; isMultiPage?: boolean }) {
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : "";

  return (
    <DesktopOnlyGuard>
      <div className={`bg-white flex flex-col h-full ${className}`}>
        {/* Main Content - Journey Map Grid */}
        <div className="flex-1 px-8 py-4 flex flex-col min-h-0 overflow-hidden">
          {/* Concept Subject Section */}
          <div className="mb-4 bg-[#f9fafb] border-2 border-[#d1d5dc] p-3 shrink-0">
            <label className="text-[11px] font-bold text-[#4a5565] uppercase block mb-1">
              Concept analysé :
            </label>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: `${fieldPrefix}journey-subject`,
                type: "text",
                label: "",
                placeholder: "Ex: Parcours d'achat pour le concept de consigne...",
              }}
              hideLabel
              className=""
              inputClassName="bg-transparent border-0 !p-0 text-[12px] h-auto !rounded-none font-medium"
            />
          </div>

          {/* Stage Headers */}
          <div className="grid grid-cols-5 gap-2 shrink-0 mb-2">
            {stages.map((stage) => (
              <div key={stage.id} className="bg-[#1e3a5f] text-white p-2 text-center">
                <span className="text-[11px] font-bold uppercase block">{stage.label}</span>
                <span className="text-[9px] text-white/80">{stage.example}</span>
              </div>
            ))}
          </div>

          {/* Upper Rows (Touchpoints, Actions, Frontstage) */}
          <div className="flex-1 flex flex-col gap-1 min-h-0">
            {rows.map((row) => (
              <div key={row.id} className="grid grid-cols-5 gap-2 flex-1 min-h-0">
                {stages.map((stage, idx) => (
                  <div key={`${row.id}-${stage.id}`} className="border border-[#d1d5dc] p-2 flex flex-col min-h-0">
                    <span className="text-[9px] font-bold text-[#4a5565] uppercase shrink-0">{row.label}</span>
                    <CanvasField
                      canvasId={canvas.id}
                      field={{
                        id: `${fieldPrefix}${row.id}-${stage.id}`,
                        type: "textarea",
                        label: "",
                        placeholder: row.examples[idx],
                        rows: 2,
                      }}
                      hideLabel
                      className="flex-1 min-h-0"
                      inputClassName="bg-transparent border-0 !p-0 text-[9px] h-full resize-none !rounded-none italic text-[#99a1af]"
                    />
                  </div>
                ))}
              </div>
            ))}

            {/* Ligne Interne Separator */}
            <div className="flex items-center gap-2 py-1 shrink-0">
              <div className="h-px bg-[#d1d5dc] flex-1"></div>
              <span className="text-[9px] text-[#6a7282] uppercase">Ligne Interne</span>
              <div className="h-px bg-[#d1d5dc] flex-1"></div>
            </div>

            {/* Lower Rows (Backstage, Systems) */}
            {backstageRows.map((row) => (
              <div key={row.id} className="grid grid-cols-5 gap-2 flex-1 min-h-0">
                {stages.map((stage, idx) => (
                  <div key={`${row.id}-${stage.id}`} className="border border-[#d1d5dc] p-2 flex flex-col min-h-0">
                    <span className="text-[9px] font-bold text-[#4a5565] uppercase shrink-0">{row.label}</span>
                    <CanvasField
                      canvasId={canvas.id}
                      field={{
                        id: `${fieldPrefix}${row.id}-${stage.id}`,
                        type: "textarea",
                        label: "",
                        placeholder: row.examples[idx],
                        rows: 2,
                      }}
                      hideLabel
                      className="flex-1 min-h-0"
                      inputClassName="bg-transparent border-0 !p-0 text-[9px] h-full resize-none !rounded-none italic text-[#99a1af]"
                    />
                  </div>
                ))}
              </div>
            ))}
          </div>

          {/* Info Banner */}
          <div className="bg-[#f9fafb] border-2 border-[#d1d5dc] py-2 px-4 text-center shrink-0 mt-4">
            <p className="text-[11px] text-[#6a7282] italic">
              Vue intégrée : ce que l'utilisateur voit (au-dessus) + ce que l'organisation fait (en-dessous)
            </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]">
            {isMultiPage && pageIndex > 1 ? `Page ${pageIndex}` : "Date :"}
          </span>
        </div>
      </div>
    </DesktopOnlyGuard>
  );
}