"use client";

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

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

/**
 * Final Concept Canvas Template
 * Comprehensive documentation of the refined concept
 */
export function FinalConceptCanvas({ canvas, className }: FinalConceptCanvasProps) {
  return (
    <div className={cn("h-full flex flex-col overflow-auto md:overflow-hidden", className)}>
      <div className="flex-1 p-4 md:p-8">
        <div className="flex flex-col md:grid md:grid-cols-3 gap-4 md:gap-6 md:h-full">
          {/* Column 1: Identity */}
          <div className="flex flex-col gap-3 md:gap-4">
            {/* Visual */}
            <div className="aspect-video bg-gradient-to-br from-blue-50 to-purple-50 border-2 border-dashed border-blue-300 rounded-xl flex flex-col items-center justify-center cursor-pointer hover:border-blue-500 transition-colors">
              <svg className="w-12 h-12 text-blue-400 mb-2" 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-blue-600 font-medium">Visuel du Concept</span>
            </div>

            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "name",
                type: "text",
                label: "Nom du Concept",
                placeholder: "Nom final du concept",
              }}
            />

            <CanvasField
              canvasId={canvas.id}
              field={{
                id: "tagline",
                type: "text",
                label: "Tagline",
                placeholder: "La phrase qui capture l'essence",
              }}
            />

            <div className="bg-purple-50 border border-purple-200 rounded-xl p-4 flex-1">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "differentiators",
                  type: "list",
                  label: "⭐ Différenciateurs",
                  placeholder: "• Ce qui rend unique\n• Avantage concurrentiel",
                  rows: 4,
                }}
              />
            </div>
          </div>

          {/* Column 2: Description */}
          <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 Détaillée",
                  placeholder: "Description complète du concept, son fonctionnement, ses caractéristiques principales...",
                  rows: 8,
                }}
              />
            </div>

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

          {/* Column 3: Impact & Users */}
          <div className="flex flex-col gap-4">
            <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 sont les utilisateurs principaux? Quels sont leurs besoins?",
                  rows: 4,
                }}
              />
            </div>

            <div className="bg-cyan-50 border border-cyan-200 rounded-xl p-4 flex-1">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "impact",
                  type: "textarea",
                  label: "📈 Impact Attendu",
                  placeholder: "Quel impact ce concept aura-t-il? Comment mesurera-t-on le succès?",
                  rows: 5,
                }}
              />
            </div>

            <div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
              <CanvasField
                canvasId={canvas.id}
                field={{
                  id: "next-milestones",
                  type: "list",
                  label: "🚀 Prochaines Étapes",
                  placeholder: "• Milestone 1\n• Milestone 2\n• Milestone 3",
                  rows: 4,
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}