"use client";

import { useState } from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { addDays, dowOf, todayStr } from "@/lib/dates";
import { subjectMeta } from "@/lib/subjects";
import { PlayBtn } from "@/components/play-audio";
import { Button } from "@/components/ui/button";
import type { OverviewData } from "./dashboard";

// 学习概览:按孩子的月日历,展示每日 打卡/语法/周检测,点某天看当日具体任务
export function OverviewTab({ data }: { data: OverviewData }) {
  const [kidId, setKidId] = useState(data.kids[0]?.id);
  const [selected, setSelected] = useState(todayStr());
  const kid = data.kids.find((k) => k.id === kidId) ?? data.kids[0];
  if (!kid) return null;

  const today = todayStr();
  const ym = today.slice(0, 7);
  const first = `${ym}-01`;
  const daysInMonth = new Date(Number(ym.slice(0, 4)), Number(ym.slice(5, 7)), 0).getDate();
  const lead = (dowOf(first) + 6) % 7; // 周一开头的前导空位数
  const dates = Array.from({ length: daysInMonth }, (_, i) => `${ym}-${String(i + 1).padStart(2, "0")}`);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        {data.kids.map((k) => (
          <Button
            key={k.id}
            size="sm"
            variant={k.id === kid.id ? "default" : "outline"}
            onClick={() => setKidId(k.id)}
          >
            {k.name}
          </Button>
        ))}
      </div>

      <div className="grid grid-cols-3 gap-3">
        <div className="rounded-xl border border-slate-100 bg-white p-3 text-center shadow-soft">
          <p className="text-xs text-muted-foreground">语法进度</p>
          <p className="text-lg font-extrabold text-indigo-600">
            {kid.grammar.done}/{kid.grammar.total}
          </p>
        </div>
        <Link
          href={`/parent/wrongbook?kid=${kid.id}`}
          className="rounded-xl border border-slate-100 bg-white p-3 text-center shadow-soft transition-all duration-200 hover:-translate-y-0.5 hover:border-rose-200"
        >
          <p className="text-xs text-muted-foreground">待掌握错题</p>
          <p className="text-lg font-extrabold text-rose-600">{kid.wrongOpen}</p>
        </Link>
        <div className="rounded-xl border border-slate-100 bg-white p-3 text-center shadow-soft">
          <p className="text-xs text-muted-foreground">最近周测</p>
          <p className="text-lg font-extrabold text-violet-600">
            {kid.weeklyLatest ? `${kid.weeklyLatest.score}分` : "—"}
          </p>
        </div>
      </div>

      <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
        <div className="grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground">
          {["一", "二", "三", "四", "五", "六", "日"].map((w) => (
            <div key={w}>周{w}</div>
          ))}
        </div>
        <div className="mt-1 grid grid-cols-7 gap-1">
          {Array.from({ length: lead }).map((_, i) => (
            <div key={`e${i}`} />
          ))}
          {dates.map((d) => {
            const c = kid.days[d];
            const isToday = d === today;
            const check = c && c.total > 0 ? (c.done >= c.total && c.done > 0 ? 2 : c.done > 0 ? 1 : 0) : 0;
            return (
              <div
                key={d}
                onClick={() => setSelected(d)}
                title={`${d} 打卡${c?.done ?? 0}/${c?.total ?? 0}`}
                className={cn(
                  "flex aspect-square cursor-pointer flex-col items-center justify-center rounded-lg border text-sm transition-colors",
                  selected === d ? "border-indigo-400 ring-1 ring-indigo-300" : "border-slate-100 hover:border-indigo-300",
                  "bg-white",
                )}
              >
                <span className={cn("leading-none", isToday ? "font-extrabold text-indigo-600" : "text-slate-600")}>
                  {Number(d.slice(8))}
                </span>
                <span className="mt-1 flex h-2 items-center gap-0.5">
                  {check === 2 && <span className="size-2 rounded-full bg-emerald-500" />}
                  {check === 1 && <span className="size-2 rounded-full bg-amber-400" />}
                  {(c?.grammar ?? 0) > 0 && <span className="size-2 rounded-full bg-indigo-500" />}
                  {c?.weekly != null && <span className="size-2 rounded-full bg-violet-500" />}
                </span>
              </div>
            );
          })}
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          <span className="mr-2 inline-flex items-center gap-1"><span className="size-2 rounded-full bg-emerald-500" />打卡完成</span>
          <span className="mr-2 inline-flex items-center gap-1"><span className="size-2 rounded-full bg-amber-400" />打卡部分</span>
          <span className="mr-2 inline-flex items-center gap-1"><span className="size-2 rounded-full bg-indigo-500" />语法点亮</span>
          <span className="inline-flex items-center gap-1"><span className="size-2 rounded-full bg-violet-500" />周检测</span>
        </p>

        <div className="mt-4 space-y-3 rounded-lg border border-slate-100 bg-slate-50/60 p-3">
          <p className="text-sm font-bold text-slate-900">
            {selected} {selected === today ? "(今天)" : ""} 的学习详情
          </p>
          {(() => {
            const cell = kid.days[selected];
            if (!cell) return <p className="text-sm text-muted-foreground">这一天暂无记录。</p>;
            return (
              <div className="space-y-3">
                <div>
                  <p className="mb-1 text-xs font-medium text-muted-foreground">打卡任务</p>
                  {cell.tasks.length === 0 ? (
                    <p className="text-sm text-muted-foreground">无打卡任务</p>
                  ) : (
                    <div className="space-y-1.5">
                      {cell.tasks.map((t, i) => {
                        const sm = subjectMeta(t.subject);
                        return (
                          <div key={i} className="flex items-center gap-2 rounded-full bg-white px-3 py-1 text-sm ring-1 ring-slate-100">
                            <span className={cn("size-1.5 rounded-full", sm.dot)} />
                            <span className="text-slate-700">{t.title}</span>
                            <span
                              className={cn(
                                "ml-auto rounded-full px-2 py-0.5 text-xs font-medium",
                                t.status === "done" ? "bg-emerald-100 text-emerald-700" : "bg-slate-100 text-slate-500",
                              )}
                            >
                              {t.status === "done" ? "已完成" : "未完成"}
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>

                <div>
                  <p className="mb-1 text-xs font-medium text-muted-foreground">英语语法检测</p>
                  {cell.gtests.length === 0 ? (
                    <p className="text-sm text-muted-foreground">当天未做语法检测</p>
                  ) : (
                    <div className="space-y-1">
                      {cell.gtests.map((g, i) => (
                        <p key={i} className="truncate text-xs text-slate-600">
                          {g.title} · {g.score} 分 {g.passed ? "✅" : "❌"}
                        </p>
                      ))}
                    </div>
                  )}
                </div>

                <div>
                  <p className="mb-1 text-xs font-medium text-muted-foreground">单词跟读录音</p>
                  {cell.recs.length === 0 ? (
                    <p className="text-sm text-muted-foreground">当天无跟读录音</p>
                  ) : (
                    <div className="flex flex-wrap gap-2">
                      {cell.recs.map((r, i) => (
                        <div key={i} className="flex items-center gap-1.5 rounded-full bg-white px-2.5 py-1 text-sm ring-1 ring-slate-100">
                          <span className="font-medium text-slate-800">{r.word}</span>
                          <PlayBtn src={r.url} className="size-6" />
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            );
          })()}
        </div>
      </div>
    </div>
  );
}