import { Eye, ImageIcon, VideoIcon } from "lucide-react";
import { WYSIWYG_STYLES } from "@/components/generic/Blocks/TextBlock";

export function LessonHeader({ lesson }) {
    if (!lesson) return null;
    return (
        <div className="space-y-4 pb-2">
            <div>
                <h1 style={{ fontSize: "1.875rem", fontWeight: 700, lineHeight: 1.2, margin: "0 0 0.4rem 0" }}>
                    {lesson.title}
                </h1>
                {lesson.description && (
                    <p style={{ margin: "0.2rem 0", lineHeight: 1.75, textAlign: "justify" }}
                        className="text-muted-foreground">
                        {lesson.description}
                    </p>
                )}
            </div>

            {lesson.objectives?.length > 0 && (
                <div className="rounded-lg border p-4 space-y-3">
                    <div className="flex items-center gap-2">
                        <div className="h-8 w-8 rounded-md bg-green-100 flex items-center justify-center shrink-0">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-4 w-4 text-green-600"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth={2}
                                strokeLinecap="round"
                                strokeLinejoin="round"
                            >
                                <circle cx="12" cy="12" r="10" />
                                <circle cx="12" cy="12" r="6" />
                                <circle cx="12" cy="12" r="2" />
                            </svg>
                        </div>
                        <p className="text-sm font-semibold">Objective</p>
                    </div>
                    <ul className="space-y-1.5 list-disc list-inside">
                        {lesson.objectives.map((o) => (
                            <li key={o.objective_id} className="text-sm text-muted-foreground">
                                {o.text}
                            </li>
                        ))}
                    </ul>
                </div>
            )}
        </div>
    );
}

export function PreviewImage({ url, alt }) {
    if (!url) {
        return (
            <div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
                <ImageIcon className="h-4 w-4" />
                No image
            </div>
        );
    }
    return (
        <img src={url} alt={alt ?? ""} className="w-full rounded-md object-cover aspect-video" />
    );
}

export function PreviewVideo({ url, thumb }) {
    if (!url) {
        return (
            <div className="flex items-center justify-center aspect-video rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
                <VideoIcon className="h-4 w-4" />
                No video
            </div>
        );
    }
    return (
        <div className="relative rounded-md overflow-hidden aspect-video bg-muted">
            {thumb ? (
                <img src={thumb} alt="Video thumbnail" className="w-full h-full object-cover" />
            ) : (
                <div className="w-full h-full flex items-center justify-center">
                    <VideoIcon className="h-10 w-10 text-muted-foreground/40" />
                </div>
            )}
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                <div className="h-10 w-10 rounded-full bg-black/50 flex items-center justify-center">
                    <VideoIcon className="h-5 w-5 text-white" />
                </div>
            </div>
            <div className="absolute bottom-0 inset-x-0 bg-black/60 px-2 py-1">
                <p className="text-white text-[10px] truncate">{url}</p>
            </div>
        </div>
    );
}

export function PreviewBlock({ block }) {
    const { type, content } = block;

    if (type === "text") {
        if (!content.body) {
            return <div className="text-xs text-muted-foreground italic py-2">Empty text block</div>;
        }
        return (
            <div
                className="wysiwyg-preview text-sm"
                dangerouslySetInnerHTML={{ __html: content.body }}
            />
        );
    }

    if (type === "image") {
        if (!content.url) {
            return (
                <div className="flex items-center justify-center h-24 rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
                    <ImageIcon className="h-4 w-4" />
                    No image selected
                </div>
            );
        }
        return (
            <figure>
                <img src={content.url} alt={content.alt ?? ""} className="w-full rounded-md object-cover" />
            </figure>
        );
    }

    if (type === "text-image") {
        const imgLeft = content.image_position === "left";
        return (
            <div className="grid grid-cols-2 gap-4 items-start">
                {imgLeft && <PreviewImage url={content.url} alt={content.alt} />}
                <div
                    className="wysiwyg-preview text-sm"
                    dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
                />
                {!imgLeft && <PreviewImage url={content.url} alt={content.alt} />}
            </div>
        );
    }

    if (type === "video") {
        if (!content.url) {
            return (
                <div className="flex items-center justify-center h-24 rounded-lg border border-dashed text-xs text-muted-foreground bg-muted/20 gap-1.5">
                    <VideoIcon className="h-4 w-4" />
                    No video selected
                </div>
            );
        }
        return <PreviewVideo url={content.url} thumb={content.thumbnail_url} />;
    }

    if (type === "text-video") {
        const vidLeft = content.video_position === "left";
        return (
            <div className="grid grid-cols-2 gap-4 items-start">
                {vidLeft && <PreviewVideo url={content.url} thumb={content.thumbnail_url} />}
                <div
                    className="wysiwyg-preview text-sm"
                    dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
                />
                {!vidLeft && <PreviewVideo url={content.url} thumb={content.thumbnail_url} />}
            </div>
        );
    }

    return null;
}

export function PreviewContent({ lesson, blocks, empty = "No content yet." }) {
    return (
        <>
            <LessonHeader lesson={lesson} />
            {blocks.length === 0 ? (
                <div className="flex flex-col items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
                    <Eye className="h-8 w-8 opacity-20" />
                    <p>{empty}</p>
                </div>
            ) : (
                blocks.map((block) => (
                    <div key={block.id}>
                        <PreviewBlock block={block} />
                    </div>
                ))
            )}
        </>
    );
}

export function PreviewChrome({ title, children }) {
    return (
        <div className="rounded-xl border bg-card shadow-sm overflow-hidden">
            <style>{WYSIWYG_STYLES}</style>
            <div className="flex items-center gap-1.5 px-3 py-2 bg-muted/60 border-b">
                <span className="h-2.5 w-2.5 rounded-full bg-red-400" />
                <span className="h-2.5 w-2.5 rounded-full bg-yellow-400" />
                <span className="h-2.5 w-2.5 rounded-full bg-green-400" />
                <div className="flex-1 mx-3 h-5 rounded bg-background/60 border text-[10px] flex items-center px-2 text-muted-foreground/60 truncate">
                    {title ?? "Lesson Preview"}
                </div>
                <Eye className="h-3.5 w-3.5 text-muted-foreground/60" />
            </div>
            {children}
        </div>
    );
}