import React, { useState, useEffect } from "react";
import { motion } from "motion/react";
import { ArrowRight, Sparkles } from "lucide-react";
import { Button, Input, Label, Textarea, Card, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/index";
import { useNavigate, useParams, useLocation } from "react-router-dom";
import { usePreference } from "../../../hooks/usePreference";
import { toast } from "react-toastify";
import Seo from "../../../components/seo/Seo";
import { PREFERENCE_ROUTE } from "../../../helper/routes";
import { AIgenerator } from "../Aigenerator";
import { getAllDesignStyleList, getAllFontsList } from "../../../helper/function";
import DynamicIcon from "../../../components/ui/icon";

const styleOptions = getAllDesignStyleList();

const fontOptions = getAllFontsList();

export function Preference() {
    const navigate = useNavigate();
    const [isGenerating, setIsGenerating] = useState(false);
    const [apiDone, setApiDone] = useState(false);
    const [projectId, setProjectId] = useState<string | null>(null);
    const { mutate } = usePreference();
    const location = useLocation();
    const { websitetypedata } = location.state

    const [preferences, setPreferences] = useState({
        websiteName: "",
        description: "",
        industryFocus: "",
        style: "modern",
        font: "poppins",
        colors: {
            primary: "#2563eb",
            secondary: "#7a18fa",
            accent: "#000000"
        }
    });
    const { id } = useParams();
    const websiteTypeId = id;
    const [isDarkMode] = useState(() => {
        const savedTheme = localStorage.getItem("theme");
        return savedTheme ? savedTheme === "dark" : true;
    });

    useEffect(() => {
        const html = document.documentElement;
        if (isDarkMode) {
            html.classList.add("dark");
        } else {
            html.classList.remove("dark");
        }
    }, [isDarkMode]);


    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setIsGenerating(true);
        setApiDone(false);
        const formattedData = {
            websiteTypeId,
            websiteName: preferences.websiteName,
            description: preferences.description,
            industry: preferences.industryFocus,
            designStyle: preferences.style,
            font: preferences.font,
            color: {
                primaryColor: preferences.colors.primary,
                secondaryColor: preferences.colors.secondary,
                accent: preferences.colors.accent
            }
        };

        mutate(formattedData, {
            onSuccess: (data) => {
                if (data?.success) {
                    const id = data?.id;
                    setProjectId(id);
                    setApiDone(true);
                } else {
                    setIsGenerating(false);
                    toast.error(data?.message || "Failed to save preferences. Please try again.");
                }
            },
            onError: (error:any) => {
                setIsGenerating(false);
                toast.error(error?.message || error?.response?.data?.success?.message || "Failed to save preferences. Please try again.");
            }
        });
    };
    // Loader complete hone par
    const handleLoaderComplete = () => {
        if (apiDone && projectId) {
            navigate(`/webpreview/${projectId}`);
        }
    };

    const handleColorChange = (key: 'primary' | 'secondary' | 'accent', value: string) => {
        setPreferences(prev => ({
            ...prev,
            colors: {
                ...prev.colors,
                [key]: value
            }
        }));
    };

    const getPlaceholderText = () => {
        return "Tell us about your website...";
    };
    return (
        <div className="min-h-screen">
            <Seo url={PREFERENCE_ROUTE} />

            {isGenerating && <AIgenerator apiDone={apiDone} onComplete={handleLoaderComplete} />}
            <div className="py-10">
                <div className="mx-auto px-4 max-w-3xl">

                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                    >
                        <div className="text-center mb-8">
                            <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-soft badge-hero-primary rounded-full mb-4">
                                {(websitetypedata && websitetypedata?.type) ?
                                <>
                                <DynamicIcon name={websitetypedata?.iconName} className="w-4 h-4" />
                                <span className="text-sm font-medium">{websitetypedata?.type}</span>
                                </>
                                :
                                <>
                                <Sparkles className="w-4 h-4" />
                                <span className="text-sm font-medium">Step 2 of 2</span>
                                </>
                                }
                            </div>
                            <h1 className="text-4xl md:text-5xl font-bold mb-4 text-black">
                                Tell us about your vision
                            </h1>
                            <p className="text-xl text-primary2">
                                Provide some details and we'll create a custom website for you
                            </p>
                        </div>

                        <Card className="p-8">
                            <form onSubmit={handleSubmit} className="space-y-6">
                                <div className="space-y-2">
                                    <Label htmlFor="websiteName" className="text-black">Website Name *</Label>
                                    <Input
                                        id="websiteName"
                                        placeholder="e.g., My Awesome Company"
                                        value={preferences.websiteName}
                                        onChange={(e) => setPreferences({ ...preferences, websiteName: e.target.value })}
                                        required
                                    />
                                </div>

                                <div className="space-y-2">
                                    <Label htmlFor="description" className="text-black">Description</Label>
                                    <Textarea
                                        id="description"
                                        placeholder={getPlaceholderText()}
                                        value={preferences.description}
                                        onChange={(e) => setPreferences({ ...preferences, description: e.target.value })}
                                        rows={6}
                                    />
                                    <p className="text-sm text-primary2">
                                        The more details you provide, the better our AI can tailor your website
                                    </p>
                                </div>

                                <div className="space-y-2">
                                    <Label htmlFor="industryFocus" className="text-black">Industry/Focus *</Label>
                                    <Input
                                        id="industryFocus"
                                        placeholder="e.g., Technology, Fashion, Consulting"
                                        value={preferences.industryFocus}
                                        onChange={(e) => setPreferences({ ...preferences, industryFocus: e.target.value })}
                                        required
                                    />
                                </div>

                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div className="space-y-2">
                                        <Label htmlFor="font" className="text-black">Font Family</Label>
                                        <Select
                                            value={preferences.font}
                                            onValueChange={(value) => setPreferences({ ...preferences, font: value })}
                                        >
                                            <SelectTrigger>
                                                <SelectValue placeholder="Select a font" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {fontOptions.map((font) => (
                                                    <SelectItem key={font.key} value={font.key}>
                                                        {font.value}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>

                                    <div className="space-y-2">
                                        <Label htmlFor="style" className="text-black">Design Style</Label>
                                        <Select
                                            value={preferences.style}
                                            onValueChange={(value) => setPreferences({ ...preferences, style: value })}
                                        >
                                            <SelectTrigger>
                                                <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {styleOptions.map((style) => (
                                                    <SelectItem key={style.value} value={style.value}>
                                                        {style.label}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>
                                </div>

                                <div className="space-y-3">
                                    <Label className="text-black">Website Colors</Label>
                                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div className="space-y-1">
                                            <Label htmlFor="primaryColor" className="text-xs text-primary2">Primary Color</Label>
                                            <div className="flex items-center gap-2 border p-2 rounded-md">
                                                <input
                                                    type="color"
                                                    id="primaryColor"
                                                    value={preferences.colors.primary}
                                                    onChange={(e) => handleColorChange('primary', e.target.value)}
                                                    className="w-8 h-8 rounded cursor-pointer border-none p-0"
                                                />
                                                <span className="text-sm font-mono">{preferences.colors.primary}</span>
                                            </div>
                                        </div>

                                        <div className="space-y-1">
                                            <Label htmlFor="secondaryColor" className="text-xs text-primary2">Secondary Color</Label>
                                            <div className="flex items-center gap-2 border p-2 rounded-md">
                                                <input
                                                    type="color"
                                                    id="secondaryColor"
                                                    value={preferences.colors.secondary}
                                                    onChange={(e) => handleColorChange('secondary', e.target.value)}
                                                    className="w-8 h-8 rounded cursor-pointer border-none p-0"
                                                />
                                                <span className="text-sm font-mono">{preferences.colors.secondary}</span>
                                            </div>
                                        </div>

                                        <div className="space-y-1">
                                            <Label htmlFor="accentColor" className="text-xs text-primary2">Text Color</Label>
                                            <div className="flex items-center gap-2 border p-2 rounded-md">
                                                <input
                                                    type="color"
                                                    id="accentColor"
                                                    value={preferences.colors.accent}
                                                    onChange={(e) => handleColorChange('accent', e.target.value)}
                                                    className="w-8 h-8 rounded cursor-pointer border-none p-0"
                                                />
                                                <span className="text-sm font-mono">{preferences.colors.accent}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="pt-4">
                                    <Button
                                        type="submit"
                                        size="lg"
                                        className="w-full gradient-primary"
                                    >
                                        Generate My Website with AI
                                        <ArrowRight className="w-4 h-4 ml-2" />
                                    </Button>
                                </div>
                            </form>
                        </Card>
                    </motion.div>
                </div>
            </div>
        </div >
    );
}