"use client";

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

interface TensionsCanvasProps {
  canvas: CanvasTemplate;
  className?: string;
}

/**
 * Tensions & Paradoxes Canvas Template
 * Un outil de réflexion collaborative pour découvrir les contradictions
 * 
 * 4 quadrants based on Figma:
 * 1. Les choix impossibles
 * 2. Ce qu'on dit vs ce qu'on fait
 * 3. Les croyances limitantes
 * 4. Et si c'était possible ?
 */
export function TensionsCanvas({ canvas, className }: TensionsCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-y-auto", className)}>
      {/* Instructions */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 md:p-4 mx-3 md:mx-6 mt-4 md:mt-6">
        <h3 className="text-xs md:text-sm font-semibold text-blue-800 mb-2">
          💡 Comment utiliser ce canevas :
        </h3>
        <div className="flex flex-col md:grid md:grid-cols-2 gap-3 md:gap-4 text-xs text-blue-700">
          <div>
            <p className="font-medium">Pour les étudiants :</p>
            <p>Posez les questions et écoutez activement. Creusez les réponses avec des "pourquoi".</p>
          </div>
          <div>
            <p className="font-medium">Pour le partenaire entreprise :</p>
            <p>Partagez des exemples concrets et récents. Les tensions sont des trésors d&apos;innovation !</p>
          </div>
        </div>
      </div>

      <div className="flex-1 p-3 md:p-6">
        {/* Quadrant Grid - stacks on mobile */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
          {/* Quadrant 1 - Les choix impossibles */}
          <QuadrantSection
            canvasId={canvas.id}
            number={1}
            title="Les choix impossibles"
            fieldId="impossible-choices"
            color="blue"
            questions={[
              '"Décrivez une situation où vous devez choisir entre deux choses importantes"',
              '"Donnez un exemple récent où il a fallu sacrifier une priorité pour une autre"',
              '"Qu\'est-ce qui entre en conflit au quotidien ?"',
            ]}
            examples={[
              "Innovation vs. respect des processus établis",
              "Satisfaction client vs. rentabilité",
              "Vitesse de livraison vs. qualité du produit",
              "Autonomie des équipes vs. contrôle centralisé",
            ]}
          />

          {/* Quadrant 2 - Ce qu'on dit vs ce qu'on fait */}
          <QuadrantSection
            canvasId={canvas.id}
            number={2}
            title="Ce qu'on dit vs ce qu'on fait"
            fieldId="say-vs-do"
            color="green"
            questions={[
              '"Quelles valeurs affiche l\'entreprise, et comment se manifestent-elles vraiment ?"',
              '"Y a-t-il un écart entre ce qui est dit en réunion et ce qui se passe vraiment ?"',
              '"Qu\'est-ce qu\'on encourage officiellement mais qui est sanctionné en pratique ?"',
            ]}
            examples={[
              '"Droit à l\'erreur" mais échecs sanctionnés',
              'Valoriser l\'équilibre vie-pro mais emails le soir',
              'Prôner la collaboration mais évaluer individuellement',
              'Dire "le client d\'abord" mais prioriser les KPIs internes',
            ]}
          />

          {/* Quadrant 3 - Les croyances limitantes */}
          <QuadrantSection
            canvasId={canvas.id}
            number={3}
            title="Les croyances limitantes"
            fieldId="limiting-beliefs"
            color="amber"
            questions={[
              '"Qu\'est-ce qu\'on ne peut pas faire \'parce que c\'est comme ça\' ?"',
              '"Quelles règles implicites limitent vos actions ?"',
              '"Si vous aviez une baguette magique, quelle contrainte feriez-vous disparaître ?"',
              '"Qu\'est-ce qui vous semblait impossible mais que d\'autres font déjà ?"',
            ]}
            examples={[
              '"Nos clients ne paieront jamais plus cher"',
              '"On a toujours fait comme ça"',
              '"Notre secteur est différent, ça ne marchera pas ici"',
              '"Les collaborateurs ont besoin d\'être contrôlés"',
            ]}
          />

          {/* Quadrant 4 - Et si c'était possible ? */}
          <QuadrantSection
            canvasId={canvas.id}
            number={4}
            title="Et si c'était possible ?"
            fieldId="what-if-possible"
            color="purple"
            questions={[
              '"Si ces tensions disparaissaient, qu\'est-ce qui changerait ?"',
              '"Quelle opportunité se cache derrière ce paradoxe ?"',
              '"Comment pourrait-on transformer cette contrainte en avantage ?"',
              '"Qui dans votre secteur a résolu ce type de contradiction ?"',
            ]}
            examples={[
              "Identifier les hypothèses non-testées",
              "Chercher des exemples inspirants ailleurs",
              "Imaginer des solutions radicalement différentes",
              "Explorer ce qui empêche vraiment le changement",
            ]}
            examplesTitle="Pistes de réflexion :"
          />
        </div>
      </div>
    </div>
  );
}

interface QuadrantSectionProps {
  canvasId: string;
  number: number;
  title: string;
  fieldId: string;
  color: "blue" | "green" | "amber" | "purple";
  questions: string[];
  examples: string[];
  examplesTitle?: string;
}

const colorClasses = {
  blue: {
    bg: "bg-blue-50",
    border: "border-blue-200",
    badge: "bg-blue-500",
    title: "text-blue-800",
    text: "text-blue-700",
  },
  green: {
    bg: "bg-green-50",
    border: "border-green-200",
    badge: "bg-green-500",
    title: "text-green-800",
    text: "text-green-700",
  },
  amber: {
    bg: "bg-amber-50",
    border: "border-amber-200",
    badge: "bg-amber-500",
    title: "text-amber-800",
    text: "text-amber-700",
  },
  purple: {
    bg: "bg-purple-50",
    border: "border-purple-200",
    badge: "bg-purple-500",
    title: "text-purple-800",
    text: "text-purple-700",
  },
};

function QuadrantSection({
  canvasId,
  number,
  title,
  fieldId,
  color,
  questions,
  examples,
  examplesTitle = "Exemples concrets :",
}: QuadrantSectionProps) {
  const colors = colorClasses[color];

  return (
    <div className={cn("rounded-xl p-5 border", colors.bg, colors.border)}>
      {/* Header */}
      <div className="flex items-center gap-3 mb-4">
        <div className={cn("w-8 h-8 text-white rounded-full flex items-center justify-center text-sm font-bold", colors.badge)}>
          {number}
        </div>
        <h3 className={cn("text-base font-semibold", colors.title)}>
          {title}
        </h3>
      </div>

      {/* Questions */}
      <div className="bg-white/60 rounded-lg p-3 mb-3">
        <p className={cn("text-xs font-medium mb-2", colors.text)}>
          Questions à poser :
        </p>
        <ul className="text-xs text-gray-600 space-y-1">
          {questions.map((q, i) => (
            <li key={i}>• {q}</li>
          ))}
        </ul>
      </div>

      {/* Examples */}
      <div className="bg-white/60 rounded-lg p-3 mb-3">
        <p className={cn("text-xs font-medium mb-2", colors.text)}>
          💡 {examplesTitle}
        </p>
        <ul className="text-xs text-gray-600 space-y-1">
          {examples.map((ex, i) => (
            <li key={i}>• {ex}</li>
          ))}
        </ul>
      </div>

      {/* Input Field */}
      <div className="mt-3">
        <p className="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">
          VOS DÉCOUVERTES :
        </p>
        <CanvasField
          canvasId={canvasId}
          field={{
            id: fieldId,
            type: "textarea",
            label: "",
            placeholder: "Notez vos découvertes ici...",
            rows: 4,
          }}
          className="!col-span-1"
        />
      </div>
    </div>
  );
}