"use client";

import { MarkdownRenderer } from "@/app/tutos/[slug]/markdown-renderer";
import type { Category, Tutorial } from "@/lib/tutorials";
import {
    AlignTextLeftOutlined,
    Books2Outlined,
    CheckCircle1Outlined,
    Code1Outlined,
    EyeOutlined,
    Folder1Outlined,
    KeyboardOutlined,
    Layers1Outlined,
    Pencil1Outlined,
    StopwatchOutlined,
} from "@lineiconshq/free-icons";
import { Lineicons } from "@lineiconshq/react-lineicons";
import { useCallback, useEffect, useRef, useState } from "react";

type TutorialFormProps = {
    categories: Category[];
    action: (formData: FormData) => Promise<void>;
    submitLabel: string;
    initialData?: Partial<Tutorial>;
};

// Wrapper pour simplifier l'utilisation des icônes LineIcons
function Icon({
    icon,
    size = 16,
    className = "",
}: {
    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
    size?: number;
    className?: string;
}) {
    return <Lineicons icon={icon} size={size} className={className} />;
}

// Composant pour les labels avec icône
function FormLabel({
    icon,
    children,
    required,
}: {
    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
    children: React.ReactNode;
    required?: boolean;
}) {
    return (
        <label className="flex items-center gap-2 text-sm font-mono text-slate-400 mb-2">
            <Icon icon={icon} size={16} className="text-cyan-500/70" />
            <span>{children}</span>
            {required && <span className="text-cyan-500">*</span>}
        </label>
    );
}

// Composant input stylisé
function FormInput({
    className = "",
    ...props
}: React.InputHTMLAttributes<HTMLInputElement>) {
    return (
        <input
            {...props}
            className={`w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-2.5 text-sm 
                       text-slate-100 placeholder:text-slate-600
                       focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
                       hover:border-slate-600 transition-all duration-200
                       backdrop-blur-sm ${className}`}
        />
    );
}

// Composant select stylisé
function FormSelect({
    children,
    className = "",
    ...props
}: React.SelectHTMLAttributes<HTMLSelectElement>) {
    return (
        <select
            {...props}
            className={`w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-2.5 text-sm 
                       text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
                       hover:border-slate-600 transition-all duration-200
                       backdrop-blur-sm cursor-pointer ${className}`}
        >
            {children}
        </select>
    );
}

// Composant textarea stylisé
function FormTextarea({
    className = "",
    ...props
}: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
    return (
        <textarea
            {...props}
            className={`w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-3 text-sm 
                       text-slate-100 placeholder:text-slate-600
                       focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
                       hover:border-slate-600 transition-all duration-200
                       backdrop-blur-sm resize-y ${className}`}
        />
    );
}

// Composant carte section
function FormSection({
    title,
    icon,
    children,
    className = "",
    noPadding = false,
}: {
    title: string;
    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
    children: React.ReactNode;
    className?: string;
    noPadding?: boolean;
}) {
    return (
        <div
            className={`relative bg-gradient-to-br from-slate-900/90 to-slate-900/70 
                        border border-slate-700/40 rounded-xl overflow-hidden
                        backdrop-blur-md shadow-xl shadow-black/20 ${className}`}
        >
            {/* Effet de brillance en haut */}
            <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />

            {/* Header */}
            <div className="flex items-center gap-3 px-6 py-4 border-b border-slate-700/40 bg-slate-800/30">
                <div className="p-2 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
                    <Icon icon={icon} size={16} className="text-cyan-400" />
                </div>
                <h2 className="text-base font-semibold text-slate-100 tracking-wide">
                    {title}
                </h2>
            </div>

            {/* Content */}
            {noPadding ? children : <div className="p-6">{children}</div>}
        </div>
    );
}

export function TutorialForm({
    categories,
    action,
    submitLabel,
    initialData,
}: TutorialFormProps) {
    const [content, setContent] = useState(initialData?.content || "");
    const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit");
    const [charCount, setCharCount] = useState(content.length);
    const textareaRef = useRef<HTMLTextAreaElement>(null);

    // Mise à jour du compteur de caractères
    useEffect(() => {
        setCharCount(content.length);
    }, [content]);

    // Estimation du temps de lecture
    const estimatedReadTime = useCallback(() => {
        const words = content.trim().split(/\s+/).length;
        const minutes = Math.ceil(words / 200);
        return `~${minutes} min`;
    }, [content]);

    // Raccourcis clavier pour le markdown
    const handleKeyDown = useCallback(
        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
            if (e.ctrlKey || e.metaKey) {
                const textarea = textareaRef.current;
                if (!textarea) return;

                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;
                const selected = content.substring(start, end);

                let newContent = content;
                let newStart = start;
                let newEnd = end;

                switch (e.key) {
                    case "b": // Bold
                        e.preventDefault();
                        newContent =
                            content.substring(0, start) +
                            `**${selected}**` +
                            content.substring(end);
                        newStart = start + 2;
                        newEnd = end + 2;
                        break;
                    case "i": // Italic
                        e.preventDefault();
                        newContent =
                            content.substring(0, start) +
                            `*${selected}*` +
                            content.substring(end);
                        newStart = start + 1;
                        newEnd = end + 1;
                        break;
                    case "k": // Code
                        e.preventDefault();
                        newContent =
                            content.substring(0, start) +
                            `\`${selected}\`` +
                            content.substring(end);
                        newStart = start + 1;
                        newEnd = end + 1;
                        break;
                    default:
                        return;
                }

                setContent(newContent);
                // Restaurer la sélection après le re-render
                requestAnimationFrame(() => {
                    textarea.setSelectionRange(newStart, newEnd);
                });
            }
        },
        [content]
    );

    return (
        <form action={action} className="space-y-8">
            {/* Hidden input pour toujours envoyer le content */}
            <input type="hidden" name="content" value={content} />

            {/* Métadonnées */}
            <FormSection
                title="Informations du tutoriel"
                icon={Folder1Outlined}
            >
                <div className="grid gap-6 md:grid-cols-2">
                    <div>
                        <FormLabel icon={AlignTextLeftOutlined} required>
                            Titre
                        </FormLabel>
                        <FormInput
                            name="title"
                            type="text"
                            required
                            defaultValue={initialData?.title}
                            placeholder="Mon super tutoriel"
                        />
                    </div>

                    <div>
                        <FormLabel icon={Books2Outlined} required>
                            Catégorie
                        </FormLabel>
                        <FormSelect
                            name="categoryId"
                            required
                            defaultValue={initialData?.categoryId}
                        >
                            <option value="">
                                Sélectionner une catégorie...
                            </option>
                            {categories.map((cat) => (
                                <option key={cat.id} value={cat.id}>
                                    {cat.name}
                                </option>
                            ))}
                        </FormSelect>
                    </div>

                    <div>
                        <FormLabel icon={Layers1Outlined}>Difficulté</FormLabel>
                        <FormSelect
                            name="difficulty"
                            defaultValue={
                                initialData?.difficulty || "Intermédiaire"
                            }
                        >
                            <option value="Débutant">🌱 Débutant</option>
                            <option value="Intermédiaire">
                                🌿 Intermédiaire
                            </option>
                            <option value="Avancé">🌳 Avancé</option>
                        </FormSelect>
                    </div>

                    <div>
                        <FormLabel icon={StopwatchOutlined}>
                            Temps de lecture
                        </FormLabel>
                        <div className="relative">
                            <FormInput
                                name="readTime"
                                type="text"
                                defaultValue={initialData?.readTime}
                                placeholder="5 min"
                            />
                            {content.length > 0 && (
                                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500 font-mono">
                                    Estimé: {estimatedReadTime()}
                                </span>
                            )}
                        </div>
                    </div>
                </div>

                <div className="mt-6">
                    <FormLabel icon={AlignTextLeftOutlined}>Extrait</FormLabel>
                    <FormTextarea
                        name="excerpt"
                        rows={2}
                        defaultValue={initialData?.excerpt}
                        placeholder="Courte description qui s'affichera sur la page d'accueil..."
                    />
                    <p className="mt-2 text-xs text-slate-500 font-mono">
                        Laissez vide pour générer automatiquement depuis le
                        contenu
                    </p>
                </div>
            </FormSection>

            {/* Éditeur Markdown */}
            <FormSection title="Contenu" icon={Code1Outlined} noPadding>
                {/* Tabs */}
                <div className="flex items-center justify-between border-b border-slate-700/40 bg-slate-800/20">
                    <div className="flex">
                        <button
                            type="button"
                            onClick={() => setActiveTab("edit")}
                            className={`group flex items-center gap-2 px-6 py-3.5 text-sm font-mono transition-all duration-200 relative ${
                                activeTab === "edit"
                                    ? "text-cyan-400"
                                    : "text-slate-400 hover:text-slate-300"
                            }`}
                        >
                            <span
                                className={`transition-transform duration-200 ${
                                    activeTab === "edit"
                                        ? "scale-110"
                                        : "group-hover:scale-105"
                                }`}
                            >
                                <Icon icon={Pencil1Outlined} size={16} />
                            </span>
                            <span>Éditer</span>
                            {activeTab === "edit" && (
                                <span className="absolute bottom-0 inset-x-0 h-0.5 bg-gradient-to-r from-cyan-500 to-cyan-400" />
                            )}
                        </button>
                        <button
                            type="button"
                            onClick={() => setActiveTab("preview")}
                            className={`group flex items-center gap-2 px-6 py-3.5 text-sm font-mono transition-all duration-200 relative ${
                                activeTab === "preview"
                                    ? "text-cyan-400"
                                    : "text-slate-400 hover:text-slate-300"
                            }`}
                        >
                            <span
                                className={`transition-transform duration-200 ${
                                    activeTab === "preview"
                                        ? "scale-110"
                                        : "group-hover:scale-105"
                                }`}
                            >
                                <Icon icon={EyeOutlined} size={16} />
                            </span>
                            <span>Aperçu</span>
                            {activeTab === "preview" && (
                                <span className="absolute bottom-0 inset-x-0 h-0.5 bg-gradient-to-r from-cyan-500 to-cyan-400" />
                            )}
                        </button>
                    </div>

                    {/* Statistiques */}
                    <div className="flex items-center gap-4 pr-6 text-xs font-mono text-slate-500">
                        <span>{charCount.toLocaleString()} caractères</span>
                        <span className="text-slate-700">|</span>
                        <span>
                            {content.trim().split(/\s+/).filter(Boolean).length}{" "}
                            mots
                        </span>
                    </div>
                </div>

                {/* Content */}
                <div className="p-6">
                    {activeTab === "edit" ? (
                        <div className="space-y-3">
                            {/* Barre d'outils markdown */}
                            <div className="flex items-center gap-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700/30">
                                <Icon
                                    icon={KeyboardOutlined}
                                    size={14}
                                    className="text-slate-500"
                                />
                                <span className="text-xs text-slate-500 font-mono mr-2">
                                    Raccourcis:
                                </span>
                                <div className="flex items-center gap-1">
                                    <kbd className="px-2 py-1 text-xs font-mono bg-slate-700/50 text-slate-300 rounded border border-slate-600/50">
                                        Ctrl+B
                                    </kbd>
                                    <span className="text-slate-600 text-xs">
                                        Gras
                                    </span>
                                </div>
                                <div className="flex items-center gap-1 ml-3">
                                    <kbd className="px-2 py-1 text-xs font-mono bg-slate-700/50 text-slate-300 rounded border border-slate-600/50">
                                        Ctrl+I
                                    </kbd>
                                    <span className="text-slate-600 text-xs">
                                        Italique
                                    </span>
                                </div>
                                <div className="flex items-center gap-1 ml-3">
                                    <kbd className="px-2 py-1 text-xs font-mono bg-slate-700/50 text-slate-300 rounded border border-slate-600/50">
                                        Ctrl+K
                                    </kbd>
                                    <span className="text-slate-600 text-xs">
                                        Code
                                    </span>
                                </div>
                            </div>

                            <textarea
                                ref={textareaRef}
                                rows={20}
                                required
                                value={content}
                                onChange={(e) => setContent(e.target.value)}
                                onKeyDown={handleKeyDown}
                                className="w-full rounded-lg bg-slate-950/80 border border-slate-700/50 px-4 py-3 text-sm 
                                           font-mono text-slate-100 placeholder:text-slate-600
                                           focus:outline-none focus:ring-2 focus:ring-cyan-500/30 focus:border-cyan-500/50
                                           hover:border-slate-600 transition-all duration-200
                                           resize-y min-h-[450px] leading-relaxed"
                                placeholder={`# Mon tutoriel

## Introduction

Voici un exemple de contenu en **Markdown**.

## Étapes

1. Première étape
2. Deuxième étape
3. Troisième étape

## Code

\`\`\`typescript
const hello = "world";
console.log(hello);
\`\`\`

## Conclusion

C'est tout pour ce tutoriel !`}
                            />

                            <div className="flex items-center justify-between text-xs text-slate-500 font-mono">
                                <p>
                                    Supporte le Markdown : titres (#), gras
                                    (**), italique (*), code (`), listes,
                                    citations (&gt;), liens, images...
                                </p>
                            </div>
                        </div>
                    ) : (
                        <div className="min-h-[450px] rounded-lg bg-slate-950/50 border border-slate-700/30 p-6 overflow-auto">
                            {content.trim() ? (
                                <MarkdownRenderer content={content} />
                            ) : (
                                <div className="flex flex-col items-center justify-center h-full py-20 text-center">
                                    <div className="p-4 rounded-full bg-slate-800/50 mb-4">
                                        <Icon
                                            icon={EyeOutlined}
                                            size={32}
                                            className="text-slate-600"
                                        />
                                    </div>
                                    <p className="text-slate-500 font-mono text-sm">
                                        Commencez à écrire pour voir l'aperçu...
                                    </p>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </FormSection>

            {/* Actions */}
            <div className="flex items-center justify-between pt-4">
                <button
                    type="submit"
                    className="group relative flex items-center gap-3 px-8 py-3.5 rounded-xl font-mono text-sm
                               bg-gradient-to-r from-cyan-500/20 to-cyan-600/20 
                               text-cyan-400 border border-cyan-500/40
                               hover:border-cyan-400/70 hover:text-cyan-300 
                               hover:from-cyan-500/30 hover:to-cyan-600/30
                               hover:shadow-lg hover:shadow-cyan-500/20
                               active:scale-[0.98]
                               disabled:opacity-50 disabled:cursor-not-allowed
                               transition-all duration-300"
                >
                    {/* Effet de brillance */}
                    <span className="absolute inset-0 rounded-xl overflow-hidden">
                        <span className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
                    </span>

                    <span className="relative z-10">
                        <Icon icon={CheckCircle1Outlined} size={20} />
                    </span>
                    <span className="relative z-10">{submitLabel}</span>
                </button>
            </div>
        </form>
    );
}