"use client";

import Link from "next/link";
import { Server, Wrench, Plug, Building2, Layers } from "lucide-react";
import { AppShell } from "@/components/app-shell";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PaperclipTab } from "./_components/paperclip-tab";
import { EnvironmentTab } from "./_components/environment-tab";
import { ToolsTab } from "./_components/tools-tab";
import { RegistrationsTab } from "./_components/registrations-tab";
import { BlocksTab } from "./_components/blocks-tab";

export default function SettingsPage() {
  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">
            תצורת המערכת, MCP server, ו-Paperclip integration.
          </p>
        </header>

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

        <Tabs dir="rtl" defaultValue="paperclip" className="space-y-4">
          <TabsList>
            <TabsTrigger value="paperclip">
              <Building2 className="w-4 h-4" data-icon="inline-start" />
              Paperclip
            </TabsTrigger>
            <TabsTrigger value="environment">
              <Server className="w-4 h-4" data-icon="inline-start" />
              סביבה
            </TabsTrigger>
            <TabsTrigger value="tools">
              <Wrench className="w-4 h-4" data-icon="inline-start" />
              כלים
            </TabsTrigger>
            <TabsTrigger value="blocks">
              <Layers className="w-4 h-4" data-icon="inline-start" />
              בלוקים
            </TabsTrigger>
            <TabsTrigger value="registrations">
              <Plug className="w-4 h-4" data-icon="inline-start" />
              רישומים
            </TabsTrigger>
          </TabsList>

          <TabsContent value="paperclip"><PaperclipTab /></TabsContent>
          <TabsContent value="environment"><EnvironmentTab /></TabsContent>
          <TabsContent value="tools"><ToolsTab /></TabsContent>
          <TabsContent value="blocks"><BlocksTab /></TabsContent>
          <TabsContent value="registrations"><RegistrationsTab /></TabsContent>
        </Tabs>
      </section>
    </AppShell>
  );
}