"use client";

import { useTransition } from "react";
import { Flame } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { makeupTask } from "./actions";
import type { OverviewData } from "./dashboard";

const DOW_LABELS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

function dateLabel(date: string) {
  const [y, m, d] = date.split("-").map(Number);
  const dow = new Date(Date.UTC(y, m - 1, d)).getUTCDay();
  return `${m}月${d}日 ${DOW_LABELS[dow]}`;
}

export function OverviewTab({ data }: { data: OverviewData }) {
  const [, startTransition] = useTransition();

  return (
    <div className="space-y-4">
      {data.kids.map((kid) => (
        <Card key={kid.id}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-lg">{kid.name}</CardTitle>
            <div className="flex items-center gap-1 text-orange-600">
              <Flame className="size-5" fill="currentColor" />
              <span className="font-bold">{kid.streak}</span>
              <span className="text-xs">天连击</span>
            </div>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-sm text-muted-foreground">
              今日完成 {kid.today.done} / {kid.today.total} 项
            </p>
            <div className="space-y-2">
              {kid.week.map((day) => (
                <div key={day.date} className="rounded-lg border p-2">
                  <p className="mb-1 text-xs font-medium text-muted-foreground">
                    {dateLabel(day.date)}
                    {day.isToday && " · 今天"}
                  </p>
                  {day.tasks.length === 0 ? (
                    <p className="text-xs text-muted-foreground">无任务(自动保持连击)</p>
                  ) : (
                    <div className="flex flex-wrap gap-1.5">
                      {day.tasks.map((t) => (
                        <span key={t.id} className="inline-flex items-center gap-1">
                          <Badge variant={t.status === "done" ? "default" : "secondary"}>
                            {t.title}
                            {t.isMakeup && " · 补"}
                          </Badge>
                          {!day.isToday && t.status === "pending" && (
                            <Button
                              variant="outline"
                              size="sm"
                              className="h-5 px-1.5 text-xs"
                              onClick={() =>
                                startTransition(() => makeupTask(t.id, true))
                              }
                            >
                              补卡
                            </Button>
                          )}
                          {!day.isToday && t.isMakeup && (
                            <Button
                              variant="ghost"
                              size="sm"
                              className="h-5 px-1.5 text-xs"
                              onClick={() =>
                                startTransition(() => makeupTask(t.id, false))
                              }
                            >
                              撤销
                            </Button>
                          )}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}