"use client";

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

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

interface ReformulationSectionProps {
    canvasId: string;
    number: number;
    reformulationFieldId: string;
    solutionFieldId: string;
}

function ReformulationSection({
    canvasId,
    number,
    reformulationFieldId,
    solutionFieldId,
}: ReformulationSectionProps) {
    return (
        <div className="border-2 border-black flex flex-col">
            <div className="p-3 flex flex-col gap-3 flex-1">
                {/* Header */}
                <div className="flex items-center gap-2 border-b-2 border-black pb-2 shrink-0">
                    <div className="bg-[#ff6900] w-7 h-7 flex items-center justify-center">
                        <span className="text-white text-[12px] font-bold">{number}</span>
                    </div>
                    <h3 className="text-[13px] uppercase tracking-wide font-semibold">
                        Reformulation {number}
                    </h3>
                </div>

                {/* Reformulation Field */}
                <div className="flex flex-col gap-1 flex-1">
                    <label className="text-[10px] font-bold text-[#4a5565] uppercase tracking-wider shrink-0">
                        💡 Reformulation
                    </label>
                    <CanvasField
                        canvasId={canvasId}
                        field={{
                            id: reformulationFieldId,
                            type: "textarea",
                            label: "",
                            placeholder: "Comment reformuler la problématique ?",
                            rows: 5,
                        }}
                        hideLabel
                        className="flex-1"
                        inputClassName="bg-[#fff7ed] border-2 border-[#fed7aa] !p-3 text-[11px] h-full resize-none !rounded-none"
                    />
                </div>

                {/* Idée de Solution Field */}
                <div className="flex flex-col gap-1 flex-1">
                    <label className="text-[10px] font-bold text-[#4a5565] uppercase tracking-wider shrink-0">
                        🚀 Idées de Solution
                    </label>
                    <CanvasField
                        canvasId={canvasId}
                        field={{
                            id: solutionFieldId,
                            type: "textarea",
                            label: "",
                            placeholder: "Quelles idées de solution ?",
                            rows: 5,
                        }}
                        hideLabel
                        className="flex-1"
                        inputClassName="bg-[#ecfdf5] border-2 border-[#a7f3d0] !p-3 text-[11px] h-full resize-none !rounded-none"
                    />
                </div>
            </div>
        </div>
    );
}

export function ReformulationProblematiqueCanvas({ canvas, className = "", teamName }: ReformulationProblematiqueCanvasProps) {
    return (
        <div className={`bg-white flex flex-col ${className}`} style={{ height: '100%' }}>
            {/* Rappel de la Problématique Section */}
            <div className="mx-4 mt-3 border-2 border-black bg-[#fffbeb] shrink-0">
                <div className="p-3">
                    <div className="flex items-center gap-2 mb-2">
                        <div className="bg-[#f59e0b] w-8 h-8 flex items-center justify-center">
                            <span className="text-white text-[16px]">📌</span>
                        </div>
                        <h2 className="text-[15px] font-bold uppercase tracking-wide text-[#92400e]">
                            Rappel de la Problématique
                        </h2>
                    </div>
                    <CanvasField
                        canvasId={canvas.id}
                        field={{
                            id: "rappel-problematique",
                            type: "textarea",
                            label: "",
                            placeholder: "Décrivez la problématique initiale que vous souhaitez reformuler...",
                            rows: 2,
                        }}
                        hideLabel
                        className="w-full"
                        inputClassName="bg-white border-2 border-[#fcd34d] !p-3 text-[12px] resize-none !rounded-none"
                    />
                </div>
            </div>

            {/* Main Content - Three Reformulation Sections using grid */}
            <div className="flex-1 px-4 py-3 grid grid-cols-3 gap-4" style={{ minHeight: 0 }}>
                <ReformulationSection
                    canvasId={canvas.id}
                    number={1}
                    reformulationFieldId="reformulation-1"
                    solutionFieldId="idees-solution-1"
                />

                <ReformulationSection
                    canvasId={canvas.id}
                    number={2}
                    reformulationFieldId="reformulation-2"
                    solutionFieldId="idees-solution-2"
                />

                <ReformulationSection
                    canvasId={canvas.id}
                    number={3}
                    reformulationFieldId="reformulation-3"
                    solutionFieldId="idees-solution-3"
                />
            </div>

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