"use client";

import { useState } from "react";
import Link from "next/link";
import { Upload } from "lucide-react";
import { AppShell } from "@/components/app-shell";
import { Button } from "@/components/ui/button";
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";
import { CuratorPortraitPanel } from "@/components/training/curator-portrait-panel";
import { ChatPanel } from "@/components/training/chat-panel";
import { LearningPanel } from "@/components/training/learning-panel";
import { TrainingUploadDialog } from "@/components/training/upload-dialog";

export default function TrainingPage() {
  const [uploadOpen, setUploadOpen] = useState(false);

  return (
    <AppShell>
      <section className="space-y-6">
        <header className="flex items-start justify-between gap-4 flex-wrap">
          <div className="space-y-1">
            <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>
            <div className="text-[0.75rem] uppercase tracking-[0.12em] text-gold-deep">
              רכישת-הסגנון של דפנה · פורטרט-הקול
            </div>
            <h1 className="text-navy mb-0">אימון סגנון</h1>
            <p className="text-ink-muted text-sm mt-1 max-w-2xl leading-relaxed">
              פורטרט הקול שנלמד מהקורפוס, מוזן read-only לכותב — סטטיסטיקות,
              אנטומיית החלטה ממוצעת, ביטויי חתימה, וכלי השוואה בין החלטות.
            </p>
          </div>
          <Button
            onClick={() => setUploadOpen(true)}
            className="bg-navy text-parchment hover:bg-navy-soft shrink-0"
          >
            <Upload className="w-4 h-4 me-1" />
            העלה החלטה
          </Button>
        </header>

        <TrainingUploadDialog open={uploadOpen} onOpenChange={setUploadOpen} />

        <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>
                <TabsTrigger value="learning">למידה</TabsTrigger>
                <TabsTrigger value="curator">הסוכן</TabsTrigger>
                <TabsTrigger value="chat">שיחה</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>

              <TabsContent value="learning" className="mt-5">
                <LearningPanel />
              </TabsContent>

              <TabsContent value="curator" className="mt-5">
                <CuratorPortraitPanel />
              </TabsContent>

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