"use client";

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

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

/**
 * Concept Sketch Canvas Template
 * For documenting and refining concept ideas
 */
export function ConceptSketchCanvas({ canvas, className }: ConceptSketchCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      <div className="flex-1 flex flex-col md:grid md:grid-cols-3 gap-4 md:gap-6 p-4 md:p-8">
        {/* Left Column: Visual & Name */}
        <div className="flex flex-col gap-3 md:gap-4">
          {/* Concept Visual Area */}
          <div className="aspect-video bg-gray-100 border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center cursor-pointer hover:border-week2 hover:bg-gray-50 transition-colors">
            <svg className="w-16 h-16 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <span className="text-sm text-gray-500">Esquisse / Maquette</span>
            <span className="text-xs text-gray-400 mt-1">Dessinez ou ajoutez une image</span>
          </div>

          <CanvasField
            canvasId={canvas.id}
            field={{
              id: "concept-name",
              type: "text",
              label: "Nom du Concept",
              placeholder: "Un nom mémorable et évocateur",
            }}
          />

          <CanvasField
            canvasId={canvas.id}
            field={{
              id: "tagline",
              type: "text",
              label: "Tagline",
              placeholder: "Une phrase qui résume le concept",
            }}
          />
        </div>

        {/* Middle Column: Description & Value */}
        <div className="flex flex-col gap-4">
          <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 flex-1">
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "description",
                type: "textarea",
                label: "📝 Description",
                placeholder: "Décrivez le concept en détail. Qu'est-ce que c'est? Comment ça fonctionne?",
                rows: 6,
              }}
            />
          </div>

          <div className="bg-green-50 border border-green-200 rounded-xl p-4 flex-1">
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "value-proposition",
                type: "textarea",
                label: "💎 Proposition de Valeur",
                placeholder: "Quelle valeur ce concept apporte-t-il? Pourquoi les utilisateurs l'adopteraient-ils?",
                rows: 5,
              }}
            />
          </div>
        </div>

        {/* Right Column: Features & Questions */}
        <div className="flex flex-col gap-4">
          <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "key-features",
                type: "list",
                label: "⭐ Fonctionnalités Clés",
                placeholder: "• Fonctionnalité 1\n• Fonctionnalité 2\n• Fonctionnalité 3",
                rows: 5,
              }}
            />
          </div>

          <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "target-users",
                type: "textarea",
                label: "👥 Utilisateurs Cibles",
                placeholder: "Qui bénéficierait le plus de ce concept?",
                rows: 3,
              }}
            />
          </div>

          <div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "open-questions",
                type: "list",
                label: "❓ Questions Ouvertes",
                placeholder: "• Question à explorer\n• Point à valider",
                rows: 4,
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}