"use client";

import { Typography } from "../../commons/Typography";
import { Button } from "../../commons/Button";
import { CardInfo } from "./components/CardInfo";
import { useHomepage } from "./hooks/useHomepage";
import { useLanguage } from "@/src/hooks/useLanguage";
import { PieCharts } from "./components/PieCharts";
import { BarCharts } from "./components/BarCharts";
import { Filters } from "./components/Filters";
import { Milk } from "lucide-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCow } from "@fortawesome/free-solid-svg-icons";
import { faFaucetDrip } from "@fortawesome/free-solid-svg-icons";
import { DownloadSimple } from "@phosphor-icons/react";

export function HomePage() {
  const { t } = useLanguage();
  const { production, licenses, isLoading, isDownloading, filters, updateFilter, clearFilters, handleDownloadXlsx } = useHomepage();

  return (
    <div className="flex flex-col items-center justify-center w-full">
      <div className="flex flex-col gap-6 px-4 sm:px-8 py-10 w-full max-w-337.5">
        <div className="flex items-center justify-between w-full">
          <Typography variant="h2" color="#006f36ff">
            {t("home.title")}
          </Typography>
          <Button
            type="button"
            variant="secondary"
            isLoading={isDownloading}
            onClick={handleDownloadXlsx}
            className="w-auto!"
            icons={<DownloadSimple size={20} />}
          >
            {t("home.download")}
          </Button>
        </div>

        <Filters filters={filters} updateFilter={updateFilter} clearFilters={clearFilters} />

        <div className="flex flex-wrap gap-4 w-full justify-center">
          <CardInfo
            title={t("home.avg_milk")}
            avg={production?.avgMilkLitersPerDayProperty}
            icon={<Milk size={50} color="#006f36ff" />}
          />
          <CardInfo
            title={t("home.avg_cows")}
            avg={production?.avgLactatingCows}
            icon={<FontAwesomeIcon icon={faCow} color="#006f36ff" style={{ fontSize: 50 }} />}
          />
          <CardInfo
            title={t("home.avg_idh")}
            avg={production?.avgIDH}
            icon={<FontAwesomeIcon icon={faFaucetDrip} color="#006f36ff" style={{ fontSize: 50 }} />}
          />
        </div>

        <div className="flex flex-col items-center gap-8 w-full py-8">
          <PieCharts />
          <BarCharts />
        </div>
      </div>
    </div>
  );
}