"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 { GoldenRatiosPanel } from "@/components/methodology/golden-ratios-panel";
import { DiscussionRulesPanel } from "@/components/methodology/discussion-rules-panel";
import { ContentChecklistsPanel } from "@/components/methodology/content-checklists-panel";
import { GenericMethodologyPanel } from "@/components/methodology/generic-methodology-panel";

export default function MethodologyPage() {
  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>
          <div className="inline-flex items-center gap-2 rounded-lg border border-success bg-success-bg text-success px-3.5 py-1.5 text-[0.78rem] font-semibold mt-3">
            <span aria-hidden>●</span>
            מקור-אמת יחיד — כל הסוכנים קוראים את הכללים מכאן בלבד
          </div>
        </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="ratios" dir="rtl">
              <TabsList className="bg-rule-soft/60">
                <TabsTrigger value="ratios">יחסי זהב</TabsTrigger>
                <TabsTrigger value="rules">כללי דיון</TabsTrigger>
                <TabsTrigger value="checklists">צ׳קליסטים</TabsTrigger>
                <TabsTrigger value="transitions">ביטויי מעבר</TabsTrigger>
                <TabsTrigger value="antipatterns">אנטי-דפוסים</TabsTrigger>
              </TabsList>

              <TabsContent value="ratios" className="mt-5">
                <GoldenRatiosPanel />
              </TabsContent>

              <TabsContent value="rules" className="mt-5">
                <DiscussionRulesPanel />
              </TabsContent>

              <TabsContent value="checklists" className="mt-5">
                <ContentChecklistsPanel />
              </TabsContent>

              <TabsContent value="transitions" className="mt-5">
                <GenericMethodologyPanel
                  category="transition_phrases"
                  hint="ביטויי-מעבר של דפנה, מקובצים לפי תוצאה. עריכה כאן זורמת לכותב. ערך = רשימת מחרוזות JSON."
                />
              </TabsContent>

              <TabsContent value="antipatterns" className="mt-5">
                <GenericMethodologyPanel
                  category="anti_patterns"
                  hint="דפוסים שדפנה נמנעת מהם — נמדדים ע״י מדד מרחק-הסגנון ומוזרקים לכותב. ערך = {regex, note}."
                />
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </section>
    </AppShell>
  );
}
