import { useState } from "react";
import { useFetcher } from "react-router";
import styles from "./dashboardnew.module.css";
import { MdOutlineChat, MdOutlineAutoGraph } from "react-icons/md";
import { HiOutlineUserGroup } from "react-icons/hi";
import { BsLightningCharge, BsArrowRepeat } from "react-icons/bs";
import { AiOutlineDollar } from "react-icons/ai";
import { FiCalendar } from "react-icons/fi";
import chatbot from "../../../assets/images/chat_boat.png"
import chatpopup from "../../../assets/images/chat_popup.png"
import db from "../../../assets/images/Db.png"
import { useGlobalContext } from "app/components/providers/global-context";

export default function DashboardNew({
    session
}: {
    session?: { shop: string };
}) {
    const { user } = useGlobalContext();
    const fetcher = useFetcher();
    const [isEnabled, setIsEnabled] = useState(false);
    const isLoading = fetcher.state !== "idle";

    const openThemeEditor = () => {
        if (!session?.shop) return;
        window.open(
            `https://${session.shop}/admin/themes/current/editor?context=apps`,
            "_blank"
        );
    };

    const metrics = [
        { title: "Total Chats", value: "32", icon: <MdOutlineChat size={20} /> },
        { title: "Active Chats", value: "13", icon: <MdOutlineChat style={{ color: "#31b76a" }} size={20} /> },
        { title: "Completed Chats", value: "19", icon: <MdOutlineChat size={20} /> },
        { title: "AI Resolution Rate", value: "94%", icon: <BsLightningCharge size={20} /> },
        { title: "Human Takeovers", value: "7", icon: <HiOutlineUserGroup size={20} /> },
        { title: "Revenue Assisted", value: "$453", icon: <AiOutlineDollar size={20} /> },
    ];

    const setupCards = [
        {
            title: "Set Up Chatbot",
            description: "Control how Qixs appears and greets customers.",
            icon: chatbot,
        },
        {
            title: "Add Training Data",
            description: "Train Qixs with your store knowledge and content.",
            icon: db,
        },
        {
            title: "Set Up FAQs",
            description: "Add common questions customers ask.",
            icon: chatpopup,
        },
    ];

    return (
        <div className={styles.container}>
            <div className={styles.greetingCard}>
                <h1 className={styles.greetingTitle}>Hi {user?.name || "there"},</h1>
                <p className={styles.greetingSubtitle}>Your AI support agent is getting ready.</p>

                <div className={styles.embedBanner}>
                    <div className={styles.embedInfo}>
                        <div className={styles.embedIcon}>
                            <MdOutlineAutoGraph size={20} />
                        </div>
                        <div>
                            <span style={{ fontWeight: "600" }}>Embed app to your theme</span>
                        </div>
                        <div className={styles.embedToggle}>
                            <span className={`${styles.toggleLabel} ${isEnabled ? styles.toggleLabelOn : ""}`}>
                                {isEnabled ? "On" : "Off"}
                            </span>
                        </div>
                    </div>
                    <button
                        className={styles.turnOnButton}
                        onClick={openThemeEditor}
                        disabled={isLoading}
                    >
                        {isEnabled ? "Configure" : "Turn On"}
                    </button>
                </div>
            </div>

            <div className={styles.overviewSection}>
                <div className={styles.sectionHeader}>
                    <h2 className={styles.sectionTitle}>Overview</h2>
                    <div className={styles.controls}>
                        <button className={styles.controlButton}>
                            <FiCalendar size={14} />
                            Last 7 days
                        </button>
                        <button className={styles.controlButton}>
                            <BsArrowRepeat size={14} />
                        </button>
                    </div>
                </div>

                <div className={styles.metricsGrid}>
                    {metrics.map((metric, idx) => (
                        <div key={idx} className={styles.metricCard}>
                            <div className={styles.metricHeader}>
                                <span>{metric.title}</span>
                                {metric.icon}
                            </div>
                            <div className={styles.metricValue}>{metric.value}</div>
                        </div>
                    ))}
                </div>
            </div>

            <div className={styles.setupSection}>
                <h2 className={styles.sectionTitle} style={{ marginBottom: "16px" }}>Set up your AI assistant</h2>
                <div className={styles.setupGrid}>
                    {setupCards.map((card, idx) => (
                        <div key={idx} className={styles.setupCard}>
                            <div 
                            // className={styles.setupImage}
                            >
                                <img src={card.icon} alt={card.title} width={120} height={120} />
                            </div>
                            <h3 className={styles.setupTitle}>{card.title}</h3>
                            <p className={styles.setupDescription}>{card.description}</p>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}