import { Calendar } from '@/components/ui/calendar';
import glow from '@/assets/Sglow.svg';
import { useNavigate } from 'react-router-dom';
import React from 'react';
import { CreditCardIcon, FoldersIcon, SchoolIcon } from 'lucide-react';
import DashCard from './components/Card';
import useTitle from '@/hooks/useTitle';
import { useGetStatisticsQuery } from '@/app/backend/endpoints/accounts';
import Fallback from '@/components/Fallback';

const DashboardHome: React.FC = () => {
  const navigate = useNavigate();
  useTitle('Dashboard');
  const handleViewCourses = () => {
    navigate('/dashboard/market');
  };
  const { data, isLoading } = useGetStatisticsQuery();
  const statistics = data?.data;
  if (isLoading || !statistics) return <Fallback />;

  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-row gap-8">
        <div className="relative flex flex-col items-start bg-amber-50 rounded-[20px] p-12 gap-2 max-w-full">
          <div className="text-yellow-800 text-[31px] font-bold">
            The Right Place to Design Your Technology Courses
          </div>
          <div className="text-yellow-600 text-lg font-medium w-3/4">
            We are a curriculum marketplace where any school can buy high
            quality curriculums and implement them in ONE DAY!
          </div>
          <button
            className="mt-6 font-bold sm:h-10 md:h-12 sm:px-8 h-10 px-5 text-sm rounded-lg bg-amber-500 hover:bg-amber-600 text-white transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50"
            onClick={handleViewCourses}
          >
            View Courses
          </button>
          <img
            src={glow}
            alt="glow"
            draggable="false"
            className="absolute bottom-0 right-0 w-[200px] rounded-[20px] dragab"
          />
        </div>
        <div className="flex flex-col items-start bg-white rounded-[20px] p-4 gap-5 w-fauto border">
          <Calendar />
        </div>
      </div>
      <div className="w-full justify-start items-center">
        <div className="text-slate-700 text-[26px] font-semibold">
          Dashboard
        </div>
      </div>
      <div className="flex flex-row gap-8 w-full">
        <DashCard
          title="Total Buyers"
          icon={CreditCardIcon}
          value={statistics?.total_orders}
        />
        <DashCard
          title="Total Schools"
          icon={SchoolIcon}
          value={statistics?.schools}
        />
        <DashCard
          title="Total Courses"
          icon={FoldersIcon}
          value={statistics?.courses}
        />
      </div>
    </div>
  );
};

export default DashboardHome;