"use client";

import Link from "next/link";
import { logout } from "@/app/login/actions";
import { BackgroundBlobs } from "@/components/background-blobs";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ChildManage } from "./child-manage";
import { DevicesTab } from "./devices-tab";
import { OverviewTab } from "./overview-tab";
import { TemplatesTab } from "./templates-tab";

export type DayCell = {
  done: number;
  total: number;
  grammar: number;
  weekly: number | null;
  tasks: { title: string; status: "pending" | "done"; subject: string }[];
};
export type OverviewData = {
  kids: {
    id: number;
    name: string;
    grammar: { done: number; total: number };
    wrongOpen: number;
    weeklyLatest: { weekKey: string; score: number; passed: boolean } | null;
    days: Record<string, DayCell>;
  }[];
};
export type TemplatesData = {
  kids: {
    id: number;
    name: string;
    items: {
      id: number;
      dow: number;
      title: string;
      subject: string;
      requiresPhoto: boolean;
      mode: string;
      dateStart: string | null;
      dateEnd: string | null;
    }[];
  }[];
};
export type DevicesData = {
  rows: {
    id: number;
    owner: string;
    deviceLabel: string | null;
    createdAt: string;
    expiresAt: string;
    isCurrent: boolean;
  }[];
};
export type WeeklyRow = { childName: string; weekKey: string; score: number; passed: boolean };
export type RecordingRow = { childName: string; word: string; url: string; at: string };
export type GrammarTestRow = { childName: string; title: string; score: number; passed: boolean; at: string };
export type WrongItemRow = {
  childName: string;
  stem: string;
  userAnswer: string;
  correctAnswer: string;
  sourceTitle: string;
  mastered: boolean;
};

const tabCls = "data-[state=active]:bg-white data-[state=active]:text-indigo-600 data-[state=active]:shadow-soft";

function Section({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) {
  return (
    <section className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
      <h3 className="font-extrabold text-slate-900">{title}</h3>
      {desc && <p className="mt-0.5 text-xs text-muted-foreground">{desc}</p>}
      <div className="mt-3">{children}</div>
    </section>
  );
}

export function ParentDashboard({
  overview,
  templates,
  devices,
  weekly,
  recordings,
  grammarTests,
  wrongItems,
}: {
  overview: OverviewData;
  templates: TemplatesData;
  devices: DevicesData;
  weekly: WeeklyRow[];
  recordings: RecordingRow[];
  grammarTests: GrammarTestRow[];
  wrongItems: WrongItemRow[];
}) {
  return (
    <main className="relative mx-auto max-w-3xl space-y-5 p-4 pb-10">
      <BackgroundBlobs />
      <header className="flex items-center justify-between">
        <h1 className="text-2xl font-extrabold tracking-tight">
          家长<span className="text-gradient">中心</span>
        </h1>
        <form action={logout}>
          <Button type="submit" variant="outline" size="sm">
            退出登录
          </Button>
        </form>
      </header>

      <Tabs defaultValue="overview">
        <TabsList className="grid w-full grid-cols-2 bg-slate-100/80">
          <TabsTrigger value="overview" className={tabCls}>
            学习概览
          </TabsTrigger>
          <TabsTrigger value="feature" className={tabCls}>
            功能管理
          </TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-4">
          <OverviewTab data={overview} />
        </TabsContent>

        <TabsContent value="feature" className="mt-4 space-y-4">
          <Section title="任务管理" desc="配置孩子每天的任务内容,支持某一天/每周X/某一周/日期区间">
            <TemplatesTab data={templates} />
          </Section>

          <Section title="课程管理" desc="英语语法课程编辑与每周检测成绩">
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <Link href="/parent/grammar" className="block">
                <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft transition-transform duration-200 hover:-translate-y-0.5">
                  <p className="font-bold text-slate-900">✏️ 编辑英语语法课程</p>
                  <p className="mt-1 text-xs text-muted-foreground">改标题/目标/课文,保存即生效</p>
                </div>
              </Link>
              <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
                <p className="font-bold text-slate-900">📝 每周检测成绩</p>
                <div className="mt-2 space-y-1">
                  {weekly.length === 0 && <p className="text-xs text-muted-foreground">暂无检测记录</p>}
                  {weekly.map((w, i) => (
                    <p key={i} className="text-xs text-slate-600">
                      {w.childName} · {w.weekKey} · {w.score} 分 {w.passed ? "✅" : "❌"}
                    </p>
                  ))}
                </div>
              </div>
              <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft sm:col-span-2">
                <p className="font-bold text-slate-900">🎙️ 单词跟读录音</p>
                <div className="mt-2 space-y-2">
                  {recordings.length === 0 && <p className="text-xs text-muted-foreground">暂无跟读录音</p>}
                  {recordings.map((r, i) => (
                    <div key={i} className="flex items-center gap-2 text-sm">
                      <span className="w-16 shrink-0 text-xs text-muted-foreground">{r.childName}</span>
                      <span className="w-20 shrink-0 font-medium text-slate-800">{r.word}</span>
                      <audio controls src={r.url} className="h-8 flex-1" />
                    </div>
                  ))}
                </div>
              </div>
              <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
                <p className="font-bold text-slate-900">📘 英语语法检测</p>
                <div className="mt-2 space-y-1">
                  {grammarTests.length === 0 && <p className="text-xs text-muted-foreground">暂无检测记录</p>}
                  {grammarTests.map((g, i) => (
                    <p key={i} className="truncate text-xs text-slate-600">
                      {g.childName} · {g.title} · {g.score} 分 {g.passed ? "✅" : "❌"}
                    </p>
                  ))}
                </div>
              </div>
              <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-soft">
                <p className="font-bold text-slate-900">📒 孩子错题本</p>
                <div className="mt-2 space-y-2">
                  {wrongItems.length === 0 && <p className="text-xs text-muted-foreground">暂无错题</p>}
                  {wrongItems.map((w, i) => (
                    <div key={i} className="rounded-lg bg-slate-50 p-2 text-xs">
                      <p className="font-medium text-slate-800">
                        {w.childName} · {w.stem}
                      </p>
                      <p className="mt-0.5 text-rose-600">答:{w.userAnswer || "未作答"}</p>
                      <p className="text-emerald-700">正:{w.correctAnswer}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Section>

          <Section title="孩子管理" desc="增加或删除孩子,删除会连同其记录一起删除">
            <ChildManage kids={overview.kids.map((k) => ({ id: k.id, name: k.name }))} />
          </Section>

          <Section title="设备管理" desc="新设备激活与当前登录设备">
            <DevicesTab data={devices} kids={overview.kids.map((k) => ({ id: k.id, name: k.name }))} />
          </Section>
        </TabsContent>
      </Tabs>
    </main>
  );
}