"use client";

import Link from "next/link";
import { AppShell } from "@/components/app-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { StyleReportPanel } from "@/components/training/style-report-panel";
import { CorpusPanel } from "@/components/training/corpus-panel";
import { ComparePanel } from "@/components/training/compare-panel";

export default function TrainingPage() {
  return (
    <AppShell>
      <section className="space-y-6">
        <header>
          <nav className="text-[0.78rem] text-ink-muted mb-1">
            <Link href="/" className="hover:text-gold-deep">בית</Link>
            <span aria-hidden> · </span>
            <span className="text-navy">אימון סגנון</span>
          </nav>
          <h1 className="text-navy mb-0">הפורטרט הסגנוני של דפנה</h1>
          <p className="text-ink-muted text-sm mt-1 max-w-2xl">
            לוח בקרה של קורפוס האימון — סטטיסטיקות, אנטומיית החלטה ממוצעת,
            ביטויי חתימה, וכלי השוואה בין שתי החלטות.
          </p>
        </header>

        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />

        <Card className="bg-surface border-rule shadow-sm">
          <CardContent className="px-6 py-5">
            <Tabs defaultValue="report" dir="rtl">
              <TabsList className="bg-rule-soft/60">
                <TabsTrigger value="report">פורטרט סגנון</TabsTrigger>
                <TabsTrigger value="corpus">קורפוס</TabsTrigger>
                <TabsTrigger value="compare">השוואה</TabsTrigger>
              </TabsList>

              <TabsContent value="report" className="mt-5">
                <StyleReportPanel />
              </TabsContent>

              <TabsContent value="corpus" className="mt-5">
                <CorpusPanel />
              </TabsContent>

              <TabsContent value="compare" className="mt-5">
                <ComparePanel />
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </section>
    </AppShell>
  );
}