"use client";

import { PostModel } from "@/models";
import { AnimatePresence, motion } from "framer-motion";
import LocaleLink from "@/components/ui/LocaleLink";
import { useState } from "react";
import Breadcrumbs from "../components/Breadcrumbs";
import NovelCard from "./components/NovelCard";
import NovelDetail from "./components/NovelDetail";

interface NovelPageState {
    posts: PostModel[];
    token?: string;
}

export default function NovelPage({ posts, token }: NovelPageState) {
    const [selectedPost, setSelectedPost] = useState<PostModel | null>(null);

    return (
        <div className="flex flex-col gap-6 w-full">
            <Breadcrumbs
                title="Dashboard"
                subtitle={[{ title: "Daftar Novel Anda", href: "/user/novel" }]}
                href="/user"
            />

            <div className="w-full bg-white rounded-2xl shadow-sm border border-gray-100">

                <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
                    <div className="flex items-center justify-between w-full">
                        <div>
                            <h2 className="text-base font-semibold text-gray-900">Daftar Novel</h2>
                            <p className="text-xs text-gray-400 mt-0.5">{posts.length} novel terdaftar</p>
                        </div>
                        <LocaleLink
                            href="/user/novel/create"
                            className="flex items-center gap-2 sm:gap-2.5 px-4 sm:px-5 py-3 sm:py-3.5 rounded-2xl bg-primary-500 text-white text-sm font-semibold shadow-lg shadow-primary-500/30 hover:bg-primary-600 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200"
                        >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                            </svg>
                            <span className="inline">Buat Novel Baru</span>
                        </LocaleLink>
                    </div>
                    {selectedPost && (
                        <button
                            onClick={() => setSelectedPost(null)}
                            className="text-xs text-gray-400 hover:text-gray-600 flex items-center gap-1 transition-colors cursor-pointer"
                        >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            Tutup detail
                        </button>
                    )}
                </div>

                {posts.length > 0 ? (
                    <div className="flex min-h-0">

                        <div className={`
                            flex flex-col gap-4 p-5 overflow-y-auto
                            transition-all duration-300 ease-in-out
                            ${selectedPost
                                ? "w-full lg:w-2/5 lg:border-r border-gray-100"
                                : "w-full grid grid-cols-1 lg:grid-cols-2 gap-5 p-5"
                            }
                        `}>
                            {selectedPost ? (
                                posts.map((data) => (
                                    <NovelCard
                                        key={data.id}
                                        data={data}
                                        canSubmit={!data.has_contract && data.total_words > 5000}
                                        isSelected={selectedPost?.id === data.id}
                                        onDetailClick={() => setSelectedPost(data)}
                                        compact
                                    />
                                ))
                            ) : (
                                posts.map((data) => (
                                    <NovelCard
                                        key={data.id}
                                        data={data}
                                        canSubmit={!data.has_contract && data.total_words > 5000}
                                        isSelected={false}
                                        onDetailClick={() => setSelectedPost(data)}
                                    />
                                ))
                            )}
                        </div>

                        {selectedPost && (
                            <div className="hidden lg:flex lg:w-3/5 flex-col animate-in slide-in-from-right duration-300">
                                <NovelDetail
                                    token={token || ""}
                                    post={selectedPost}
                                    onClose={() => setSelectedPost(null)}
                                />
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="flex flex-col items-center justify-center py-20 gap-3 text-center px-6">
                        <div className="w-16 h-16 rounded-2xl bg-gray-50 flex items-center justify-center">
                            <svg className="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
                                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                            </svg>
                        </div>
                        <div>
                            <p className="text-sm font-medium text-gray-600">Belum ada novel</p>
                            <p className="text-xs text-gray-400 mt-1">Mulai tulis novel pertamamu sekarang</p>
                        </div>
                    </div>
                )}
            </div>

            <AnimatePresence>
                {selectedPost && (
                    <motion.div
                        className="lg:hidden fixed inset-0 z-9999 flex flex-col justify-end"
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        transition={{ duration: 0.2 }}
                    >
                        <motion.div
                            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
                            onClick={() => setSelectedPost(null)}
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                        />

                        <motion.div
                            className="relative z-10 bg-white rounded-t-3xl max-h-[85vh] overflow-y-auto"
                            initial={{ y: "100%" }}
                            animate={{ y: 0 }}
                            exit={{ y: "100%" }}
                            transition={{
                                type: "spring",
                                stiffness: 300,
                                damping: 30,
                            }}
                        >
                            <div className="flex justify-center pt-3 pb-1">
                                <div className="w-10 h-1 rounded-full bg-gray-200" />
                            </div>

                            <div className="sticky z-40 top-0 bg-white px-5 pt-3 pb-3 border-b border-gray-100 flex items-center justify-between">
                                <p className="text-sm font-semibold text-gray-800">Detail Novel</p>
                                <button
                                    onClick={() => setSelectedPost(null)}
                                    className="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors"
                                >
                                    <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            <NovelDetail
                                token={token || ""}
                                post={selectedPost}
                                onClose={() => setSelectedPost(null)}
                            />
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}