"use client";

import Link from "next/link";
import { Server, Wrench, Plug, Building2, Layers, Bot } 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";
import { AgentsTab } from "./_components/agents-tab";

/*
 * Settings — IA-redesign composition (mockup 15): a header band with a
 * top-end "redeploy" deep-link, then a two-column layout — a vertical
 * sidenav (section list) + the active section panel. Implemented on top of
 * shadcn Tabs so all six sections and their logic-heavy contents
 * (Paperclip, agents, env vars w/ drift+redeploy, tools, blocks,
 * registrations) are preserved verbatim; only the chrome is restyled from
 * a horizontal tab strip to the approved sidenav layout.
 */

const COOLIFY_APP_UUID = "gyjo0mtw2c42ej3xxvbz8zio";
const COOLIFY_REDEPLOY_URL = `https://coolify.nautilus.marcusgroup.org/project/applications/${COOLIFY_APP_UUID}`;

const SECTIONS = [
  { value: "paperclip", label: "Paperclip / סוכנים", icon: Building2 },
  { value: "agents", label: "סוכנים", icon: Bot },
  { value: "environment", label: "משתני סביבה", icon: Server },
  { value: "tools", label: "כלי MCP", icon: Wrench },
  { value: "blocks", label: "בלוקים", icon: Layers },
  { value: "registrations", label: "רישומים", icon: Plug },
] as const;

export default function SettingsPage() {
  return (
    <AppShell>
      <section className="space-y-6">
        <header className="flex items-end justify-between gap-4 flex-wrap">
          <div>
            <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>
          <a
            href={COOLIFY_REDEPLOY_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="shrink-0 rounded-lg bg-gold text-white hover:bg-gold-deep px-5 py-2.5 text-sm font-semibold transition-colors"
          >
            פרוס מחדש (redeploy)
          </a>
        </header>

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

        <Tabs
          dir="rtl"
          defaultValue="environment"
          orientation="vertical"
          className="flex-row gap-6 items-start"
        >
          {/* vertical sidenav (mockup .sidenav) */}
          <TabsList
            variant="line"
            className="w-[230px] shrink-0 items-stretch gap-0 rounded-lg border border-rule bg-surface shadow-sm overflow-hidden p-0"
          >
            {SECTIONS.map((s) => {
              const Icon = s.icon;
              return (
                <TabsTrigger
                  key={s.value}
                  value={s.value}
                  className="relative justify-start gap-2 rounded-none border-b border-rule-soft last:border-b-0 px-4 py-3 text-sm font-medium text-ink-soft data-active:bg-gold-wash data-active:text-gold-deep data-active:font-semibold data-active:after:opacity-100 data-active:after:bg-gold hover:bg-gold-wash/40"
                >
                  <Icon className="w-4 h-4 shrink-0" />
                  {s.label}
                </TabsTrigger>
              );
            })}
          </TabsList>

          <div className="flex-1 min-w-0">
            <TabsContent value="paperclip" className="mt-0"><PaperclipTab /></TabsContent>
            <TabsContent value="agents" className="mt-0"><AgentsTab /></TabsContent>
            <TabsContent value="environment" className="mt-0"><EnvironmentTab /></TabsContent>
            <TabsContent value="tools" className="mt-0"><ToolsTab /></TabsContent>
            <TabsContent value="blocks" className="mt-0"><BlocksTab /></TabsContent>
            <TabsContent value="registrations" className="mt-0"><RegistrationsTab /></TabsContent>
          </div>
        </Tabs>
      </section>
    </AppShell>
  );
}
