import { useQuery } from "@/api/useQuery";
import { cn } from "@/util/cn";
import TableBody from "@greatness/components/src/table/TableBody";
import TableHeader from "@greatness/components/src/table/TableHead";
import TableRow from "@greatness/components/src/table/TableRow";
import TableWrapper from "@greatness/components/src/table/TableWrapper";
import { useState } from "react";

interface Supplement {
  id: string;
  name: string;
  description: string;
}

interface Nutrient {
  id: string;
  name: string;
  description: string;
}

interface DailyNutrientsOverview {
  supplementBreakdown: Supplement[];
  nutrientTotals: Nutrient[];
}

interface INutrientTotal {
  nutrientId: string;
  nutrientName: string;
  description: string;
  totalAmount: string;
  unit: string;
  categories: string[] | null;
}

interface IDailyNutrientSummary {
  nutrientTotals: INutrientTotal[];
  byCategory: Record<string, INutrientTotal[]>;
  supplementBreakdown: Supplement[];
  summary: {
    totalNutrients: number;
    totalSupplements: number;
    categoriesCount: number;
  };
}

interface ICategory {
  id: string;
  name: string;
}

export default function DailyNutrientsOverview() {
  const { data, isLoading, error } = useQuery<IDailyNutrientSummary>({
    queryKey: "/daily-overview/overview",
  });

  const { data: categories } = useQuery<ICategory[]>({
    queryKey: "/category/get-all",
  });

  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);

  if (isLoading || !data) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }


  return (
    <div className="flex flex-col gap-xl">
      <h1>Supplements</h1>
      {/* <TableWrapper>
        <TableHeader>
          <TableRow>
            <div>Name</div>
            <div>Description</div>
            <div>Total Amount</div>
            <div>Unit</div>
            <div>Categories</div>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data?.nutrientTotals.map((nutrient) => (
            <TableRow key={nutrient.nutrientId}>
              <div>{nutrient.nutrientName}</div>
              <div>{nutrient.description}</div>
              <div>{nutrient.totalAmount}</div>
              <div>{nutrient.unit}</div>
              <div>{nutrient.unit}</div>
              <div>{nutrient.categories?.join(", ") || "-"}</div>
            </TableRow>
          ))}
        </TableBody>
      </TableWrapper> */}

      <div className="flex flex-col gap-s">
        <span>Total Nutrients: {data.summary.totalNutrients}</span>
        <span>Total Supplements: {data.summary.totalSupplements}</span>
        <span>Categories Count: {data.summary.categoriesCount}</span>
      </div>

      <div className="flex flex-row gap-xl">
        <div className="flex flex-col gap-xl">
          <h3>Categories</h3>
          <div className="flex flex-col gap-s">
            {categories?.map((category) => {
              const isSelected = selectedCategories.includes(category.id);
              return (
                <button
                  key={category.id}
                  className={cn("border-radius-m px-l py-s", { ["font-bold"]: isSelected })}
                  onClick={() => {
                    if (isSelected) {
                      setSelectedCategories(selectedCategories.filter((c) => c !== category.id));
                    } else {
                      setSelectedCategories([...selectedCategories, category.id]);
                    }
                  }}
                  style={isSelected ? {
                    backgroundColor: "var(--color-green)",
                    color: "var(--color-black)",
                  } : {
                    backgroundColor: "var(--color-darkGrey)",
                    color: "var(--color-white)",
                  }}
                >
                  {category.name}
                </button>
              )
            })}
          </div>
        </div>
      </div>

      {Object.entries(data.byCategory).map(([category, nutrients]) => (
        <div className="flex flex-col gap-xl">
          <h3>{category}</h3>
          <TableWrapper>
            <TableHeader>
              <TableRow>
                <div>Name</div>
                <div>Description</div>
                <div>Total Amount</div>
                <div>Unit</div>
                <div>Categories</div>
              </TableRow>
            </TableHeader>
            <TableBody>
              {nutrients.map((nutrient) => (
                <TableRow key={nutrient.nutrientId}>
                  <div>{nutrient.nutrientName}</div>
                  <div>{nutrient.description}</div>
                  <div>{nutrient.totalAmount}</div>
                  <div>{nutrient.unit}</div>
                  <div>{nutrient.categories?.join(", ") || "-"}</div>
                </TableRow>
              ))}
            </TableBody>
          </TableWrapper>
        </div>
      ))}
    </div>
  );
}
