export default function Heatmap() {
  return (
    <div className="grid grid-cols-[repeat(53,1fr)] gap-1 ">
      {Array.from({ length: 53 }).map((week, weekIndex) => {
        return (
          <div key={weekIndex} className="grid grid-rows-7 gap-1">
            {Array.from({ length: 7 }).map((day, dayIndex) => (
              <div
                key={`${weekIndex}_${dayIndex}}`}
                data-key={`${weekIndex}_${dayIndex}}`}
                className="h-4 w-4 bg-green-300"
              ></div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

 const getWeeksOfYear = (year: number) => {
    const startDate = moment(String(year)).startOf("year");
    const dayOfyear = moment(String(year)).isLeapYear() ? 366 : 365;
    const weeks = [];
    let currentWeek = [];
    let currentDate = startDate;
    const firstDayOfWeek = currentDate.day();
    for (let i = 0; i < firstDayOfWeek; i++) {
      currentWeek.push(null);
    }
    for (let i = 0; i < dayOfyear; i++) {
      if (currentWeek.length === 7) {
        weeks.push(currentWeek);
        currentWeek = [];
      }
      currentWeek.push(currentDate);
      currentDate = moment(currentDate).add(1, "days");
    }
    while (currentWeek.length < 7) {
      currentWeek.push(null);
    }
    weeks.push(currentWeek);
    return weeks;
  };
  const weeks = getWeeksOfYear(2024);

  const weeks = getWeeksOfYear(2024);
   <div className="mt-16 grid grid-cols-[repeat(53,1fr)] gap-1 pt-2">
      {weeks.map((week, weekIndex) => {
        return (
          <div key={weekIndex} className="grid grid-rows-7 gap-1">
            {week.map((day, dayIndex) => {
              if (!day) return <div key={`empty-${dayIndex}`} />;
              return (
                <div
                  key={`${weekIndex}_${dayIndex}}`}
                  data-key={`${weekIndex}_${dayIndex}}`}
                  className="h-4 w-4  bg-green-500"
                ></div>
              );
            })}
          </div>
        );
      })}
    </div>

  const maxSeconds = summarys.reduce((acc, ac) => Math.max(acc, ac.readingSeconds), 0);
	const getGithubBGcolorClassName = (value: number, maxValue: number) => {
  const percentage = (value / maxValue) * 100;
  if (percentage === 0) return "bg-muted";
  if (percentage <= 20) return "bg-green-300";
  if (percentage <= 40) return "bg-green-500";
  if (percentage <= 60) return "bg-green-700";
  if (percentage <= 80) return "bg-green-800";
  if (percentage <= 100) return "bg-green-900";
  return "bg-muted";
};

 <div key={weekIndex} className="grid grid-rows-7 gap-1">
            {week.map((day, dayIndex) => {
              if (!day) return <div key={`empty-${dayIndex}`} />;
              let summary = summarys.find(s => Number(s.id) === moment(day).unix());
              if (!summary) {
                summary = { id: day, readingSeconds: 0 };
              }
              return (
                <div
                  key={summary.id}
                  data-key={`${weekIndex}_${dayIndex}}`}
                  className={clsx(
                    getGithubBGcolorClassName(summary.readingSeconds),
                    "h-4 w-4",
                  )}
                ></div>
              );
            })}
          </div>

moment('2024').startOf("year") //获取当年的第一天
moment('2024').isLeapYear() ? 366 : 365 //获取当年有多少天
moment().getDay() //获取这是一周的第几天

interface Summary {
  id: string;
  readingSeconds: number;
}

const GridCell = ({ summary, classes, lastSyncTime }) => {
 
  return (
          <div key={summary.id} className={classes}></div>
  );
};

const GridCell = ({ summary, classes, lastSyncTime }) => {
  if (lastSyncTime < summary.id) return <div key={summary.id} className={classes}></div>;
  return (
    <TooltipProvider key={summary.id}>
      <Tooltip>
        <TooltipTrigger asChild>
          <div key={summary.id} className={classes}></div>
        </TooltipTrigger>
        <TooltipContent className="bg-background text-foreground">
          <div className="space-y-1">
            <p className="font-medium">{moment.unix(summary.id).format("YYYY年MM月DD日 dddd")}</p>
            <p className="flex items-center gap-2">
              <Clock className="h-4 w-4" />
              <span>{(summary.readingSeconds / 60).toFixed(2)} 分钟</span>
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

   <div className="ml-14 grid grid-cols-[repeat(12,1fr)]">
        {moment.months().map((month, i) => (
          <div key={i} className="text-center text-xs text-muted-foreground">
            {month}
          </div>
        ))}
      </div>

 <div className="flex gap-4">
        <div className="grid w-10 grid-rows-7 gap-2 pt-2 text-xs text-muted-foreground">
          {moment.weekdays().map(day => (
            <div key={day} className="flex h-[10px] items-center justify-end">
              {day}
            </div>
          ))}
        </div>
        <div className="grid grid-cols-[repeat(53,1fr)] gap-1 pt-2">
        {/** heatmap主体*/}
        </div>
  </div>

  <div className="mt-6 flex items-center gap-2">
        <span className="text-sm text-muted-foreground">阅读程度：</span>
        <div className="flex items-center gap-1">
          {[0, 1, 2, 3, 4, 5].map(level => (
            <TooltipProvider key={level}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <div className={clsx("h-3 w-3", getGithubBGcolorClassName(level, 5))} />
                </TooltipTrigger>
                <TooltipContent>
                  <p>
                    {["未阅读", "短时阅读", "适度阅读", "良好阅读", "深度阅读", "专注阅读"][level]}
                  </p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          ))}
        </div>

export default function Heatmap() {
  return (
    <div className="grid grid-cols-[repeat(53,1fr)] gap-1 ">
      {Array.from({ length: 53 }).map((week, weekIndex) => {
        return (
          <div key={weekIndex} className="grid grid-rows-7 gap-1">
            {Array.from({ length: 7 }).map((day, dayIndex) => (
              <div
                key={`${weekIndex}_${dayIndex}}`}
                data-key={`${weekIndex}_${dayIndex}}`}
                className="h-4 w-4 bg-green-300"
              ></div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

 const getWeeksOfYear = (year: number) => {
    const startDate = moment(String(year)).startOf("year");
    const dayOfyear = moment(String(year)).isLeapYear() ? 366 : 365;
    const weeks = [];
    let currentWeek = [];
    let currentDate = startDate;
    const firstDayOfWeek = currentDate.day();
    for (let i = 0; i < firstDayOfWeek; i++) {
      currentWeek.push(null);
    }
    for (let i = 0; i < dayOfyear; i++) {
      if (currentWeek.length === 7) {
        weeks.push(currentWeek);
        currentWeek = [];
      }
      currentWeek.push(currentDate);
      currentDate = moment(currentDate).add(1, "days");
    }
    while (currentWeek.length < 7) {
      currentWeek.push(null);
    }
    weeks.push(currentWeek);
    return weeks;
  };
  const weeks = getWeeksOfYear(2024);

  const weeks = getWeeksOfYear(2024);
   <div className="mt-16 grid grid-cols-[repeat(53,1fr)] gap-1 pt-2">
      {weeks.map((week, weekIndex) => {
        return (
          <div key={weekIndex} className="grid grid-rows-7 gap-1">
            {week.map((day, dayIndex) => {
              if (!day) return <div key={`empty-${dayIndex}`} />;
              return (
                <div
                  key={`${weekIndex}_${dayIndex}}`}
                  data-key={`${weekIndex}_${dayIndex}}`}
                  className="h-4 w-4  bg-green-500"
                ></div>
              );
            })}
          </div>
        );
      })}
    </div>

  const maxSeconds = summarys.reduce((acc, ac) => Math.max(acc, ac.readingSeconds), 0);
	const getGithubBGcolorClassName = (value: number, maxValue: number) => {
  const percentage = (value / maxValue) * 100;
  if (percentage === 0) return "bg-muted";
  if (percentage <= 20) return "bg-green-300";
  if (percentage <= 40) return "bg-green-500";
  if (percentage <= 60) return "bg-green-700";
  if (percentage <= 80) return "bg-green-800";
  if (percentage <= 100) return "bg-green-900";
  return "bg-muted";
};

 <div key={weekIndex} className="grid grid-rows-7 gap-1">
            {week.map((day, dayIndex) => {
              if (!day) return <div key={`empty-${dayIndex}`} />;
              let summary = summarys.find(s => Number(s.id) === moment(day).unix());
              if (!summary) {
                summary = { id: day, readingSeconds: 0 };
              }
              return (
                <div
                  key={summary.id}
                  data-key={`${weekIndex}_${dayIndex}}`}
                  className={clsx(
                    getGithubBGcolorClassName(summary.readingSeconds),
                    "h-4 w-4",
                  )}
                ></div>
              );
            })}
          </div>

moment('2024').startOf("year") //获取当年的第一天
moment('2024').isLeapYear() ? 366 : 365 //获取当年有多少天
moment().getDay() //获取这是一周的第几天

interface Summary {
  id: string;
  readingSeconds: number;
}

const GridCell = ({ summary, classes, lastSyncTime }) => {
 
  return (
          <div key={summary.id} className={classes}></div>
  );
};

const GridCell = ({ summary, classes, lastSyncTime }) => {
  if (lastSyncTime < summary.id) return <div key={summary.id} className={classes}></div>;
  return (
    <TooltipProvider key={summary.id}>
      <Tooltip>
        <TooltipTrigger asChild>
          <div key={summary.id} className={classes}></div>
        </TooltipTrigger>
        <TooltipContent className="bg-background text-foreground">
          <div className="space-y-1">
            <p className="font-medium">{moment.unix(summary.id).format("YYYY年MM月DD日 dddd")}</p>
            <p className="flex items-center gap-2">
              <Clock className="h-4 w-4" />
              <span>{(summary.readingSeconds / 60).toFixed(2)} 分钟</span>
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

   <div className="ml-14 grid grid-cols-[repeat(12,1fr)]">
        {moment.months().map((month, i) => (
          <div key={i} className="text-center text-xs text-muted-foreground">
            {month}
          </div>
        ))}
      </div>

 <div className="flex gap-4">
        <div className="grid w-10 grid-rows-7 gap-2 pt-2 text-xs text-muted-foreground">
          {moment.weekdays().map(day => (
            <div key={day} className="flex h-[10px] items-center justify-end">
              {day}
            </div>
          ))}
        </div>
        <div className="grid grid-cols-[repeat(53,1fr)] gap-1 pt-2">
        {/** heatmap主体*/}
        </div>
  </div>

  <div className="mt-6 flex items-center gap-2">
        <span className="text-sm text-muted-foreground">阅读程度：</span>
        <div className="flex items-center gap-1">
          {[0, 1, 2, 3, 4, 5].map(level => (
            <TooltipProvider key={level}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <div className={clsx("h-3 w-3", getGithubBGcolorClassName(level, 5))} />
                </TooltipTrigger>
                <TooltipContent>
                  <p>
                    {["未阅读", "短时阅读", "适度阅读", "良好阅读", "深度阅读", "专注阅读"][level]}
                  </p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          ))}
        </div>