import { useState, useMemo } from "react";
import { motion } from "motion/react";
import { Card, Header, Footer } from "../../../components/index";
import { useNavigate } from "react-router-dom";
import { useWebsitetype } from "../../../hooks/useWebsitetype";
import DynamicIcon from "../../../components/ui/icon";
import { ArrowRight } from "lucide-react";
import Seo from "../../../components/seo/Seo";
import { WEBSITE_TYPE_ROUTE } from "../../../helper/routes";
import { Search } from "lucide-react";
import { Input } from "../../../components/ui/input";
import { getCardColor, normalizeCategory } from "../../../helper/function";

export function WebsiteTypePage() {
    const navigate = useNavigate();
    const { data } = useWebsitetype();
    const [searchQuery, setSearchQuery] = useState("");

    const handleSelect = (id: string, item:any) => {
        navigate(`/preferance/${id}`,{ state: { websitetypedata: item } });
    };
    const websitetypedata = useMemo(() => {
        const query = normalizeCategory(searchQuery);
        return data?.filter((item: any) => {
            const type = normalizeCategory(item.type);
            const desc = normalizeCategory(item.shortDescription);

            return type.includes(query) || desc.includes(query);
        });
    }, [data, searchQuery]);

    return (
        <div className="min-h-screen">
            <Seo url={WEBSITE_TYPE_ROUTE} />
            <Header />
            <div className="py-30">
                <div className="container mx-auto px-4 max-w-6xl">

                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="text-center mb-12"
                    >
                        <h1 className="text-4xl md:text-5xl font-bold mb-4 text-black">
                            What type of website do you want to create?
                        </h1>
                        <p className="text-xl text-primary2">
                            Choose a template type and let our AI customize it for you
                        </p>
                    </motion.div>
                    <div className="max-w-xl mx-auto px-4 mb-12">
                        <div className="relative mt-8">
                            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5  text-gray-400" />
                            <Input
                                placeholder={"Search website type..."}
                                value={searchQuery}
                                onChange={(e) => setSearchQuery?.(e.target.value)}
                                className="pl-12 h-12 text-black"
                            />
                        </div>
                    </div>
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {websitetypedata?.map((item: any, index: number) => {
                            const colorClass = getCardColor(item.type);

                            return (
                                <motion.div
                                    key={item._id}
                                    initial={{ opacity: 0, y: 20 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ delay: index * 0.1 }}
                                >
                                    <Card
                                        className="p-6 cursor-pointer hover:shadow-xl transition-all duration-300 border-2 hover:border-blue-800 group flex flex-col h-full"
                                        onClick={() => handleSelect(item._id,item)}
                                    >
                                        <div className={`w-16 h-16 bg-linear-to-br ${colorClass} rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                                            <DynamicIcon name={item.iconName} className="text-white" />
                                        </div>
                                        <h3 className="font-bold text-xl mb-2 text-black">{item.type}</h3>
                                        <p className="text-primary2 mb-4">{item.shortDescription}</p>
                                        <div className="mt-auto flex items-center text-primary font-medium group-hover:gap-3 gap-2 transition-all">
                                            <span>Select</span>
                                            <ArrowRight className="w-4 h-4" />
                                        </div>
                                    </Card>
                                </motion.div>
                            );
                        })}
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}