"use client";
import {
  DashboardBookmarkIcon,
  DashboardBriefcaseIcon,
  DashboardConnectIcon,
  DashboardMailboxIcon,
  DashboardRightDownPointIcon,
  DashboardSpeecIcon,
  DashboardTopLeftPointIcon,
  DashboardUserIcon,
} from "@/components/icons/dashboard-icon";
import { Submenu1Icon } from "@/components/icons/sidebar-icon";
import { Button, Select, SelectItem, SelectSection } from "@nextui-org/react";
import ApexChartColumn from "./chart/column-chart";
import ApexChartDonut from "./chart/donut-chart";
import ApexChartLineArea from "./chart/line-area-chart";

export default function DashboardContainer() {
  return (
    <div className="p-8 flex justify-center">
      <div className="w-full flex flex-col gap-6">
        <div className="w-full flex flex-col md:flex-row gap-6 justify-center">
          <div className="w-full md:w-[160px] h-[160px] bg-[#ecf2ff] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardUserIcon className="w-[50px]" />
            </div>
            <div className="text-[#6484fd] font-semibold">Employees</div>
            <div className="text-[#6484fd] font-semibold text-lg">96</div>
          </div>
          <div className="w-full md:w-[160px] h-[160px] bg-[#fef5e5] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardBriefcaseIcon className="w-[50px]" />
            </div>
            <div className="text-[#feaf2d] font-semibold">Clients</div>
            <div className="text-[#feaf2d] font-semibold text-lg">3650</div>
          </div>
          <div className="w-full md:w-[160px] h-[160px] bg-[#e8f7ff] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardMailboxIcon className="w-[50px]" />
            </div>
            <div className="text-[#57c0fd] font-semibold">Projects</div>
            <div className="text-[#57c0fd] font-semibold text-lg">356</div>
          </div>
          <div className="w-full md:w-[160px] h-[160px] bg-[#fdede8] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardBookmarkIcon className="w-[50px]" />
            </div>
            <div className="text-[#f98e75] font-semibold">Events</div>
            <div className="text-[#f98e75] font-semibold text-lg">696</div>
          </div>
          <div className="w-full md:w-[160px] h-[160px] bg-[#e6fffa] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardSpeecIcon className="w-[50px]" />
            </div>
            <div className="text-[#29e2be] font-semibold">Payroll</div>
            <div className="text-[#29e2be] font-semibold text-lg">$96k</div>
          </div>
          <div className="w-full md:w-[160px] h-[160px] bg-[#ebf3fe] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardConnectIcon className="w-[50px]" />
            </div>
            <div className="text-[#5797fd] font-semibold">Reports</div>
            <div className="text-[#5797fd] font-semibold text-lg">56</div>
          </div>
        </div>
        <div className="w-full flex flex-row gap-6 justify-center">
          <div className="border-1 shadow-sm w-full rounded-lg md:w-[712px] p-6 flex flex-col">
            <div className="flex justify-between mb-3">
              <div className="font-semibold flex flex-col">
                Revenue Update
                <span className="font-normal text-xs text-gray-600">
                  Overview of Profit
                </span>
              </div>
              <div className="w-auto md:w-[140px]">
                <Select
                  label=""
                  labelPlacement="outside"
                  placeholder=""
                  className="w-full"
                  variant="bordered"
                  classNames={{
                    mainWrapper: "rounded",
                    listboxWrapper:
                      "bg-white w-full !text-indigo-500 text-center font-bold",
                    popoverContent: "bg-white !text-indigo-500",
                    trigger:
                      "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
                  }}
                  listboxProps={{
                    itemClasses: {
                      base: [
                        "!text-left",
                        "!bg-white",
                        "text-indigo-500 ",
                        "data-[selectable=true]:!text-indigo-500",
                        "data-[pressed=true]:text-indigo-500",
                        "data-[hover=true]:!text-indigo-300",
                      ],
                      wrapper: ["!bg-white border-none"],
                    },
                  }}
                  defaultSelectedKeys={["march"]}
                  // onChange={onChangeFilterStatus}
                  renderValue={(items) => {
                    return items.map((item) => (
                      <span
                        key={item.props?.value}
                        className="text-black text-xs"
                      >
                        {item.textValue}
                      </span>
                    ));
                  }}
                >
                  <SelectSection>
                    <SelectItem key="march">March 2023</SelectItem>
                    <SelectItem key="april">April 2023</SelectItem>
                    <SelectItem key="may">May 2023</SelectItem>
                  </SelectSection>
                </Select>
              </div>
            </div>
            <div className="flex flex-row w-full">
              <div className="w-3/4">
                <ApexChartColumn />
              </div>
              <div className="w-1/4 flex flex-col px-2 justify-between">
                <div className="flex flex-row items-center gap-2">
                  <div className="bg-[#e8f7ff] p-2 rounded-md">
                    <Submenu1Icon className="h-full text-[#6484fd]" />
                  </div>
                  <div className="flex flex-col">
                    <p className="font-semibold text-xl">$63,489.50</p>
                    <p className="text-xs">Total Earnings</p>
                  </div>
                </div>
                <div className="flex flex-row gap-3 items-center">
                  <div className="w-2 h-2 bg-[#6484fd] rounded-full" />
                  <div className="flex flex-col">
                    <p className="text-xs">Earning this month</p>
                    <p className="font-semibold text-md">$48,820</p>
                  </div>
                </div>
                <div className="flex flex-row gap-3 items-center">
                  <div className="w-2 h-2 bg-[#57c0fd] rounded-full" />
                  <div className="flex flex-col">
                    <p className="text-xs">Expense this month</p>
                    <p className="font-semibold text-md">$26,498</p>
                  </div>
                </div>
                <Button
                  className="w-full h-[35px] rounded-md"
                  color="primary"
                  variant="solid"
                >
                  View Full Report
                </Button>
              </div>
            </div>
          </div>
          <div className="flex flex-col w-[344px] gap-6">
            <div className="h-1/2 border-1 shadow-sm w-full rounded-lg p-6 flex flex-row gap-2">
              <div className="w-1/2 flex flex-col justify-between">
                <p className="font-semibold">Yearly Breakup</p>
                <div className="lflex flex-col">
                  <p className="font-semibold text-xl ">$36,358</p>
                  <div className="flex flex-row text-xs item-center">
                    <div className="rounded-full w-6 h-6 bg-[#e6fffa] p-[2px] flex items-center justify-center">
                      <DashboardTopLeftPointIcon className="text-[#29e2be]" />
                    </div>
                    <p className="pt-[3px]"> +9% last year</p>
                  </div>
                </div>
                <p className="font-semibold flex flex-row gap-3">
                  <div className="flex flex-row text-tiny items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-[#5c6ac4]" />
                    2020
                  </div>
                  <div className="flex flex-row text-tiny items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-[#d4d4d8]" />
                    2020
                  </div>
                </p>
              </div>
              <div className="w-1/2 h-full flex items-center">
                <ApexChartDonut />
              </div>
            </div>
            <div className="h-1/2 border-1 shadow-sm w-full rounded-lg flex flex-col justify-between">
              <div className="p-6 flex flex-col">
                <div className="flex justify-between items-center font-semibold">
                  Monthly Earning
                  <a className="cursor-pointer w-10 h-10 bg-blue-300 flex justify-center items-center rounded-full text-white text-xl">
                    $
                  </a>
                </div>
                <div className="lflex flex-col">
                  <p className="font-semibold text-xl ">$6,820</p>
                  <div className="flex flex-row text-xs item-center">
                    <div className="rounded-full w-6 h-6 bg-[#fdede8] p-[2px] flex items-center justify-center">
                      <DashboardRightDownPointIcon className="text-[#f98e75]" />
                    </div>
                    <p className="pt-[3px]"> -6% last year</p>
                  </div>
                </div>
              </div>
              <div className="w-auto object-cover">
                <ApexChartLineArea />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
