"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { CircularProgress } from "@/components/circular-progress";
import { Icons } from "@/components/icons";
import { useEffect, useState } from "react";
import Link from 'next/link';

const strideElements = [
  {
    id: "set-high-goals",
    name: "Set High Goals",
    description: "Define ambitious objectives and create a roadmap for success.",
    icon: Icons.arrowRight,
    color: "var(--chart-1)",
    href: '/reflect/set-high-goals',
  },
  {
    id: "take-part-and-engage",
    name: "Take Part and Engage",
    description: "Actively participate in activities and build meaningful connections.",
    icon: Icons.arrowRight,
    color: "var(--chart-2)",
  },
  {
    id: "remain-curious-and-stay-focused",
    name: "Remain Curious and Stay Focused",
    description: "Cultivate a thirst for knowledge and maintain concentration.",
    icon: Icons.arrowRight,
    color: "var(--chart-3)",
  },
  {
    id: "initiate-and-explore",
    name: "Initiate and Explore",
    description: "Take initiative and venture into uncharted territories.",
    icon: Icons.arrowRight,
    color: "var(--chart-4)",
  },
  {
    id: "drive-forward",
    name: "Drive Forward",
    description: "Maintain momentum and persevere through challenges.",
    icon: Icons.arrowRight,
    color: "var(--chart-5)",
  },
  {
    id: "empower-and-seek-support",
    name: "Empower and Seek Support",
    description: "Lift others and seek guidance when needed.",
    icon: Icons.arrowRight,
    color: "var(--primary)",
  },
];

export default function Home() {
  const [progress, setProgress] = useState<{ [key: string]: number }>({});

  useEffect(() => {
    // Simulate loading progress from Firestore.
    const initialProgress = strideElements.reduce((acc, element) => {
      acc[element.id] = Math.floor(Math.random() * 101);
      return acc;
    }, {});
    setProgress(initialProgress);
  }, []);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4">
      <h1 className="text-2xl font-semibold mb-4">STRIDE Wheel</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {strideElements.map((element) => (
          <Card key={element.id}>
            <CardHeader>
              <CardTitle className="flex items-center">
                {element.name}
                <span className="ml-2">
                  {element.icon && <element.icon />}
                </span>
              </CardTitle>
              <CardDescription>{element.description}</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col items-center">
              <CircularProgress
                value={progress[element.id] || 0}
                size={100}
                color={element.color}
              />
              <p className="text-sm mt-2">
                {progress[element.id] || 0}% Complete
              </p>
              {element.href && (
                <Link href={element.href} className="mt-2">
                  Reflect
                </Link>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}