import { useState } from "react";
import Header from "./header";
import OverviewControls from "./overview-controls";
import styles from "./dashboard.module.css";
import Card from "../../../components/ui/card";
import { AccordionItem } from "../../../components/ui/accordion";
import { StatusCard } from "../../../components/cards/status-card";

import { MdOutlineMarkChatUnread } from "react-icons/md";
import Button from "../../../components/ui/button";
import { IoAdd } from "react-icons/io5";
import { LuTestTubeDiagonal } from "react-icons/lu";
import { useNavigate } from "react-router";
import { useGlobalContext } from "../../../components/providers/global-context";
import { useGetDashboardStats, useInstallUrl, useSyncStore } from "app/utils/api";

interface AccordionData {
  id: string;
  title: string;
  content: React.ReactNode;
  status: "completed" | "pending" | "inactive";
}

export default function Dashboard({ session }: { session?: { shop: string } }) {
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(["1"]));
  const [interval, setInterval] = useState("TODAY");
  const naviagte = useNavigate();
  const { user } = useGlobalContext();
  const {
    data: stats,
    refetch,
    isLoading: isStatsLoadig,
    isFetching: isStatsFetching,
  } = useGetDashboardStats({ type: interval });
  const syncStoreMutation = useSyncStore();

  useInstallUrl()

  const toggleItem = (id: string) => {
    setExpandedItems((prev) => {
      const newSet = new Set(prev);
      newSet.has(id) ? newSet.delete(id) : newSet.add(id);
      return newSet;
    });
  };

  const syncStore = async () => {
    const body = {
      accessToken: "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",
      domain: "qixs-products.myshopify.com",
      storeId: "68e8f8953950aa730c0d2dfa",
    };

    await syncStoreMutation.mutateAsync(body);
  };


  const accordionData: AccordionData[] = [
    {
      id: "1",
      title: "Add training data",
      status: "completed",
      content: (
        <div>
          <p style={{ marginBottom: "12px" }}>
            Sync products and pages from Shopify or add other data sources to improve AI response
            accuracy.
          </p>
          <div style={{ display: "flex", gap: "12px", marginTop: "16px" }}>
            <Button
              onClick={() => naviagte("/app/aiassistant")}
              btnSize="small"
              btnVariant="primary"
              icon={<IoAdd />}
            >
             Add Sources
            </Button>
          </div>
        </div>
      ),
    },
    {
      id: "2",
      title: "Add FAQ",
      status: "inactive",
      content: (
        <>
          <p style={{ marginBottom: "12px" }}>
            Add frequently asked questions (FAQs) to help train your AI assistant with common
            customer queries.
          </p>
          <Button
            onClick={() => naviagte("/app/FAQ")}
            btnSize="small"
            btnVariant="primary"
            icon={<IoAdd />}
          >
            Add FAQ
          </Button>
        </>
      ),
    },
    {
      id: "3",
      title: "Test AI responses",
      status: "inactive",
      content: (
        <>
          <p style={{ marginBottom: "12px" }}>
            Try out your AI assistant with sample questions to ensure it provides accurate and
            helpful responses.
          </p>
          <Button onClick={()=>naviagte("/app/test-chat")} btnSize="small" btnVariant="primary" icon={<LuTestTubeDiagonal />}>
            Test
          </Button>
        </>
      ),
    },
  ];

  console.log("isStatsLoadig", isStatsLoadig, "isStatsFetching", isStatsFetching);

  return (
    <>
      <Card>
        <div className={styles.wrapper}>
          <Header username={user?.name} session={session || { shop: "" }} />
          <OverviewControls refetch={refetch} interval={interval} setInterval={setInterval} />
          <div className={styles.metricsGrid}>
            {/* <StatusCard
              value={stats?.data?.active_tele_call?.toString() || "0"}
              title="Active Tele Calls"
              tone="success"
              icon={<BsTelephone size={32} />}
              isLoading={isStatsLoadig || isStatsFetching}
            />
            <StatusCard
              value={stats?.data?.active_call?.toString() || "0"}
              title="Active Voice Calls"
              tone="warning"
              icon={<RiUserVoiceLine size={32} />}
              isLoading={isStatsLoadig || isStatsFetching}
            /> */}
            <StatusCard
              value={stats?.data?.active_chat?.toString() || "0"}
              title="Active Chats"
              tone="info"
              icon={<MdOutlineMarkChatUnread size={32} />}
              isLoading={isStatsLoadig || isStatsFetching}
            />
            {/* <StatusCard
              value={stats?.data?.total_tele_call?.toString() || "0"}
              title="Total Tele Calls"
              tone="info"
              icon={<BsTelephone size={32} />}
              isLoading={isStatsLoadig || isStatsFetching}
            />
            <StatusCard
              value={stats?.data?.total_call?.toString() || "0"}
              title="Total Voice Calls"
              tone="info"
              icon={<RiUserVoiceLine size={32} />}
              isLoading={isStatsLoadig || isStatsFetching}
            /> */}
            <StatusCard
              value={stats?.data?.total_chat?.toString() || "0"}
              title="Total Chats"
              tone="info"
              icon={<MdOutlineMarkChatUnread size={32} />}
              isLoading={isStatsLoadig || isStatsFetching}
            />
              <StatusCard
              value={stats?.data?.total_chat - stats?.data?.active_chat  || "0"}
              title="Completed Chats"
              tone="info"
              icon={<MdOutlineMarkChatUnread size={32} />}
              isLoading={isStatsLoadig || isStatsFetching}
            />
          </div>
        </div>
      </Card>

      <div style={{ height: "24px" }}></div>

      <Card>
        <h2 className={styles.title}>Set up live chat</h2>
        <p className={styles.subtitle}>Use this guide to start setup app on your store</p>

        {accordionData.map((item) => (
          <AccordionItem
            key={item.id}
            title={item.title}
            content={item.content}
            status={item.status}
            isExpanded={expandedItems.has(item.id)}
            onToggle={() => toggleItem(item.id)}
          />
        ))}
      </Card>
    </>
  );
}