home-dashboard.tsx

"use client";

import { useState } from "react";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import Link from "next/link";
import {
  ArrowRight,
  GitPullRequest,
  CircleDot,
  Star,
  LayoutGrid,
  GitFork,
  GitMerge,
  Trophy,
  Search,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";
import Image from "next/image";

import { ActivityTypes } from "@/components/Leaderboard/stats-card/activity-types";
import { ActivityLineCard } from "@/components/Leaderboard/stats-card/activity-line-card";
import ActiveContributors from "@/components/Leaderboard/stats-card/active-contributors";
import { PaginatedActivitySection } from "@/components/PaginatedActivitySection";
import { ActivityGroup, MonthBuckets } from "@/lib/db";
import { Config } from "@/types/config";
import { RepoStats } from "@/scripts/types";

// --- Types ---
type ViewState = "overview" | "repositories";

type MetricVariant = "neutral" | "active" | "success";

type MetricFlowItemProps = {
  icon: React.ReactNode;
  count: number;
  label: string;
  variant: MetricVariant;
};

type OverviewData = {
  totalMonth: number;
  week: ActivityGroup[];
  month: ActivityGroup[];
  previousMonthCount: number;
  bucketData: MonthBuckets;
  config: Config;
  reposData: {
    reposOverview: RepoStats[];
  };
};

type SummaryCardProps = {
  label: string;
  value: string | number;
  sub?: string;
  icon: React.ReactNode;
  highlight?: boolean;
  decoration?: "bar" | "graph" | "wave";
};

export default function HomeDashboard({
  overviewData,
}: {
  overviewData: OverviewData;
}) {
  const [activeTab, setActiveTab] = useState<ViewState>("overview");
  const {
    config,
    week,
    month,
    previousMonthCount,
    bucketData,
    totalMonth,
    reposData,
  } = overviewData;

  const repos = reposData.reposOverview;

  // Control Bar State 
  const [search, setSearch] = useState("");
  const [language, setLanguage] = useState<string>("__all__");
  const [sort, setSort] = useState("contributions");

  //  Language Options 
  const languageOptions = Array.from(
    new Set(repos.map((r) => r.language).filter((lang): lang is string => typeof lang === "string" && !!lang))
  ).sort();

  // Filtering & Sorting Logic 
  const filteredRepos = repos
    .filter((repo) =>
      repo.name.toLowerCase().includes(search.toLowerCase())
    )
    .filter((repo) =>
      language === "__all__" ? true : repo.language === language
    );

  const sortedRepos = [...filteredRepos].sort((a, b) => {
    switch (sort) {
      case "stars":
        return b.stars - a.stars;
      case "forks":
        return b.forks - a.forks;
      case "issues":
        return b.current.issue_created - a.current.issue_created;
      case "prs":
        return b.current.pr_opened + b.current.pr_merged - (a.current.pr_opened + a.current.pr_merged);
      case "contributions":
      default:
        return b.current.currentTotalContribution - a.current.currentTotalContribution;
    }
  });

  // --- Logic to find most active repo ---
  function getActiveRepoStats() {
    if (!repos || repos.length === 0) {
      return {
        name: "N/A",
        growth: 0,
        totalContributions: 0,
      };
    }
    const topRepo = [...repos].sort(
      (a, b) =>
        b.current.currentTotalContribution - a.current.currentTotalContribution,
    )[0];
    return {
      name: topRepo?.name,
      growth: topRepo?.growth?.pr_merged ?? 0,
      totalContributions: topRepo?.current.currentTotalContribution,
    };
  }
  const activeRepo = getActiveRepoStats();

  return (
    <div className="min-h-screen transition-colors">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 py-6 sm:py-10 space-y-8 sm:space-y-10">
        {/* --- 1. Header --- */}
        <section className="text-center space-y-6">
          <div className="space-y-4">
            {/* Responsive Text Size */}
            <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-linear-to-r from-[#50B78B] via-[#60C79B] to-[#70D7AB] px-2">
              {config.org.name}
            </h1>
            <p className="max-w-2xl mx-auto text-sm sm:text-base text-zinc-600 dark:text-zinc-400 px-4">
              {config.org.description}
            </p>
          </div>

          <div className="flex justify-center mt-6">
            <div className="inline-flex items-center p-1.5 rounded-full bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-sm relative w-full sm:w-auto max-w-xs sm:max-w-none">
              {/* Buttons are flex-1 to ensure equal width on mobile */}
              <button
                onClick={() => setActiveTab("overview")}
                className={cn(
                  "flex-1 sm:flex-none px-6 sm:px-8 py-2 rounded-full text-sm font-medium transition-all duration-300 relative z-10",
                  activeTab === "overview"
                    ? "bg-[#50B78B] text-white shadow-md"
                    : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-200",
                )}
              >
                Overview
              </button>
              <button
                onClick={() => setActiveTab("repositories")}
                className={cn(
                  "flex-1 sm:flex-none px-6 sm:px-8 py-2 rounded-full text-sm font-medium transition-all duration-300 relative z-10",
                  activeTab === "repositories"
                    ? "bg-[#50B78B] text-white shadow-md"
                    : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-200",
                )}
              >
                Repositories
              </button>
            </div>
          </div>
        </section>

        {/* --- 2. Content Area --- */}
        <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
          {activeTab === "overview" && (
            <div className="space-y-10 sm:space-y-14">
              {/* Stats Grid - 1 Col Mobile, 2 Col Tablet, 3 Col Desktop */}
              <section className="grid gap-6 select-none grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                <ActivityLineCard
                  totalActivitiesLabel={totalMonth}
                  prev_month={previousMonthCount}
                  week1={bucketData.w1}
                  week2={bucketData.w2}
                  week3={bucketData.w3}
                  week4={bucketData.w4}
                />
                <ActiveContributors data={month} />
                <ActivityTypes entries={month} totalActivities={totalMonth} />
              </section>

              <section className="space-y-6 max-w-5xl mx-auto">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                  <h2 className="text-xl sm:text-2xl font-bold text-[#50B78B]">
                    Recent Activities
                  </h2>
                  <Link
                    href="/leaderboard"
                    className="flex items-center gap-2 text-sm font-medium text-[#50B78B] hover:underline"
                  >
                    View Leaderboard <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
                {week.length === 0 ? (
                  <div className="rounded-2xl border border-zinc-200 dark:border-zinc-800 p-10 text-center text-zinc-500">
                    No activity in this period
                  </div>
                ) : (
                  <div className="space-y-8">
                    {week.map((group: ActivityGroup) => (
                      <PaginatedActivitySection
                        key={group.activity_definition}
                        group={group}
                        itemsPerPage={10}
                      />
                    ))}
                  </div>
                )}
              </section>
            </div>
          )}

          {/* REPOSITORIES TAB */}
          {activeTab === "repositories" && (
            <div className="space-y-8 sm:space-y-10">
              {/* Summary Cards Grid */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                <SummaryCard
                  label="Total Repositories"
                  value={repos.length}
                  icon={<LayoutGrid className="h-6 w-6" />}
                  decoration="bar"
                />
                <SummaryCard
                  label="Top Repo Contributions"
                  value={activeRepo.totalContributions ?? ""}
                  sub="Last 30 Days"
                  icon={<GitFork className="h-6 w-6" />}
                  decoration="graph"
                />
                {/* Spans full width on tablet to look better */}
                <div className="sm:col-span-2 lg:col-span-1">
                  <SummaryCard
                    label="Most Active Repo"
                    value={activeRepo.name ?? ""}
                    sub={`${activeRepo.growth >= 0 ? "+" : ""}${activeRepo.growth} Merged PRs`}
                    icon={<Trophy className="h-6 w-6" />}
                    highlight={true}
                    decoration="wave"
                  />
                </div>
              </div>

              {/* Repos Grid with Control Bar */}
              <section className="space-y-6">
                {/* --- Control Bar --- */}
                <div className="flex flex-col sm:flex-row sm:items-end justify-between border-b border-zinc-200 dark:border-zinc-800 pb-2 gap-2">
                  <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
                    {/* Search Bar with Icon */}
                    <div className="relative w-full sm:w-56">
                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                      <Input
                        type="text"
                        placeholder="Search repositories..."
                        aria-label="Search repositories"
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        className="pl-9 w-full bg-white dark:bg-[#07170f] border border-[#50B78B]/60 dark:border-[#50B78B]/40 focus-visible:ring-2 focus-visible:ring-[#50B78B]"
                      />
                    </div>
                    {/* Language Filter */}
                    <Select
                      value={language}
                      onValueChange={setLanguage}
                    >
                      <SelectTrigger className="w-full sm:w-40 h-9 border border-[#50B78B]/30 hover:bg-[#50B78B]/20 focus-visible:ring-2 focus-visible:ring-[#50B78B]">
                        <SelectValue placeholder="All Languages" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="__all__">All Languages</SelectItem>
                        {languageOptions.map((lang) => (
                          <SelectItem key={lang} value={lang}>
                            {lang}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {/* Sort Dropdown */}
                    <Select
                      value={sort}
                      onValueChange={setSort}
                    >
                      <SelectTrigger className="w-full sm:w-44 h-9 border border-[#50B78B]/30 hover:bg-[#50B78B]/20 focus-visible:ring-2 focus-visible:ring-[#50B78B]">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="contributions">Most Contributions</SelectItem>
                        <SelectItem value="stars">Most Stars</SelectItem>
                        <SelectItem value="forks">Most Forks</SelectItem>
                        <SelectItem value="issues">Most Issues</SelectItem>
                        <SelectItem value="prs">Most PRs</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <span className="self-start sm:self-auto text-xs font-mono text-zinc-500 bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-md">
                    Showing {sortedRepos.length}
                  </span>
                </div>

                {/* --- Repo Grid or No Results --- */}
                {sortedRepos.length === 0 ? (
                  <div className="py-16 text-center rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/40 shadow-sm">
                    <div className="relative mx-auto w-20 h-20 mb-6">
                      <div className="absolute inset-0 rounded-full bg-[#50B78B]/10 dark:bg-[#50B78B]/15" />
                      <div className="absolute inset-2 rounded-full bg-[#50B78B]/5 dark:bg-[#50B78B]/10 flex items-center justify-center">
                        <Search className="h-8 w-8 text-[#50B78B]/70" />
                      </div>
                    </div>
                    <h3 className="text-lg font-semibold mb-2">No results found</h3>
                    <p className="text-muted-foreground mb-6">
                      {search
                        ? `No repositories matching "${search}"`
                        : "No repositories match the selected filters"}
                    </p>
                    {(search || language !== "__all__" || sort !== "contributions") && (
                      <button
                        type="button"
                        onClick={() => {
                          setSearch("");
                          setLanguage("__all__");
                          setSort("contributions");
                        }}
                        className="inline-flex items-center gap-2 px-4 py-2 rounded-md border border-[#50B78B]/30 bg-[#50B78B]/10 text-[#50B78B] font-medium hover:bg-[#50B78B]/20 transition-colors"
                      >
                        <X className="h-4 w-4" />
                        Clear Filters
                      </button>
                    )}
                  </div>
                ) : (
                  <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
                    {sortedRepos.map((repo: RepoStats) => (
                      <RepoCard key={repo.name} repo={repo} />
                    ))}
                  </div>
                )}
              </section>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ===== Components =====

function SummaryCard({
  label,
  value,
  sub,
  icon,
}: SummaryCardProps) {
  return (
    <div className="flex flex-col h-full rounded-[20px] border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/40 shadow-xl shadow-[#edfff7] dark:shadow-black/50 overflow-hidden">
      <div className="flex flex-row items-center justify-between p-6 pb-2">
        <p className="text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
          {label}
        </p>
        <div className="text-zinc-400 dark:text-zinc-600">
          {icon}
        </div>
      </div>

      <div className="flex flex-1 flex-col justify-between p-6 pt-4">
        <div>
          <div
            className={cn(
              "font-bold tracking-tight text-[#50B78B] dark:text-white",
              String(value).length > 15
                ? "text-xl sm:text-2xl break-all"
                : "text-5xl"
            )}
          >
            {value}
          </div>
          {sub && (
            <p className="text-sm font-medium text-[#50B78B] mt-2">{sub}</p>
          )}
        </div>
      </div>
    </div>
  );
}

function RepoCard({ repo }: { repo: RepoStats }) {
  return (
    <div className="group flex flex-col h-full bg-white dark:bg-zinc-900/40 border border-zinc-200 dark:border-white/10 hover:border-[#50B78B]/30 transition-all duration-300 rounded-[20px] overflow-hidden shadow-xl shadow-[#edfff7] dark:shadow-black/50">
      {/* Top Section */}
      <div className="p-5 sm:p-6 grow space-y-4">
        <div className="flex items-start justify-between gap-3 sm:gap-4">
          {/* Avatar and Name Wrapper */}
          <div className="flex items-center gap-3 overflow-hidden min-w-0">
            <div className="shrink-0 group-hover:border-[#50B78B]/30 group-hover:text-[#50B78B] transition-colors rounded-md overflow-hidden border border-zinc-100 dark:border-zinc-800">
              <Image
                src={repo.avatar_url}
                alt={repo.name ?? "Image"}
                width={40}
                height={40}
              />
            </div>
            {/* Added min-w-0 to allow truncation inside flex */}
            <div className="min-w-0 flex-1">
              <div className="text-base sm:text-lg font-bold text-zinc-900 dark:text-zinc-100 hover:text-[#50B78B] dark:hover:text-[#50B78B] transition-colors truncate">
                <Link
                  href={repo.html_url}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {repo.name}
                </Link>
              </div>
              {repo.language && (
                <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border border-zinc-200 dark:border-zinc-700 mt-1">
                  {repo.language}
                </span>
              )}
            </div>
          </div>

          <div className="flex flex-col items-end gap-1.5 shrink-0">
            <div className="flex items-center gap-1 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
              <GitFork className="h-3.5 w-3.5 text-[#7C3AED]" />
              {repo.forks}
            </div>
            <div className="flex items-center gap-1 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
              <Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
              {repo.stars}
            </div>
          </div>
        </div>
        <p className="text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2 leading-relaxed">
          {repo.description?.trim()
            ? repo.description
            : "A CircuitVerse project repository"}
        </p>
      </div>

      {/* Metrics Section */}
      <div className="px-5 pb-5 sm:px-6 sm:pb-6 pt-0">
        <div className="grid grid-cols-3 gap-2 rounded-xl bg-zinc-50 dark:bg-zinc-800/50 p-2 border border-zinc-100 dark:border-white/5">
          <Link
            href={`${repo.html_url}/issues`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <MetricFlowItem
              icon={<CircleDot className="h-4 w-4 sm:h-5 sm:w-5" />}
              count={repo.current.issue_created}
              label="Issues"
              variant="neutral"
            />
          </Link>
          <Link
            href={`${repo.html_url}/pulls`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <MetricFlowItem
              icon={<GitPullRequest className="h-4 w-4 sm:h-5 sm:w-5" />}
              count={repo.current.pr_opened}
              label="Open"
              variant="active"
            />
          </Link>
          <Link
            href={`${repo.html_url}/pulls?q=is%3Apr+is%3Amerged`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <MetricFlowItem
              icon={<GitMerge className="h-4 w-4 sm:h-5 sm:w-5" />}
              count={repo.current.pr_merged}
              label="Merged"
              variant="success"
            />
          </Link>
        </div>
      </div>
    </div>
  );
}

function MetricFlowItem({ icon, count, label, variant }: MetricFlowItemProps) {
  const variantStyles = {
    neutral: {
      icon: "text-zinc-400",
      count: "text-zinc-700 dark:text-zinc-300",
      bg: "hover:bg-zinc-100 dark:hover:bg-zinc-700/50",
    },
    active: {
      icon: "text-blue-500/70 dark:text-blue-400/70",
      count: "text-zinc-800 dark:text-zinc-200",
      bg: "hover:bg-blue-50 dark:hover:bg-blue-900/20",
    },
    success: {
      icon: "text-[#50B78B]",
      count: "text-[#50B78B] font-bold",
      bg: "hover:bg-[#50B78B]/10",
    },
  };
  const styles = variantStyles[variant as keyof typeof variantStyles];

  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center p-2 sm:p-3 rounded-lg transition-colors cursor-pointer",
        styles.bg,
      )}
    >
      <div
        className={cn(
          "mb-1.5 sm:mb-2 transform transition-transform group-hover:scale-110",
          styles.icon,
        )}
      >
        {icon}
      </div>
      <span className={cn("text-lg sm:text-xl leading-none", styles.count)}>
        {count}
      </span>
      <span className="text-[10px] uppercase tracking-wider text-zinc-500 font-medium mt-1">
        {label}
      </span>
    </div>
  );
}