"use client";

import { useState } from "react";
import { clsx } from "clsx";
import {
  Sparkles,
  User,
} from "lucide-react";
import { AIConfigPanel } from "@/components/ai-config-panel";

/* ------------------------------------------------------------------ */
/*  Tabs                                                               */
/* ------------------------------------------------------------------ */

const settingsTabs = [
  { key: "account", label: "Account", icon: User },
  { key: "ai", label: "AI Configuration", icon: Sparkles },
] as const;

type SettingsTab = (typeof settingsTabs)[number]["key"];

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/*  Reusable sub-components                                            */
/* ------------------------------------------------------------------ */

function SectionCard({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-xl bg-surface border border-border-light p-6">
      <h3 className="text-sm font-semibold text-text-primary uppercase tracking-wide mb-4">
        {title}
      </h3>
      {children}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Tab panels                                                         */
/* ------------------------------------------------------------------ */

function AccountTab() {
  return (
    <div className="space-y-6">
      {/* Profile */}
      <SectionCard title="Profile">
        <p className="text-sm text-text-secondary">
          Account settings are managed through your git service.
        </p>
      </SectionCard>

      {/* Authentication */}
      <SectionCard title="Authentication">
        <div className="mb-4">
          <p className="text-sm text-text-secondary">
            Current method: <span className="text-text-primary font-medium">OAuth (Google)</span>
          </p>
        </div>

        <h4 className="text-xs font-semibold text-text-secondary uppercase tracking-wide mt-6 mb-3">
          Active Sessions
        </h4>
        <p className="text-sm text-text-muted">Current session is active.</p>
      </SectionCard>
    </div>
  );
}


/* ------------------------------------------------------------------ */
/*  Page                                                               */
/* ------------------------------------------------------------------ */

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState<SettingsTab>("account");

  return (
    <div className="p-8 max-w-[800px]">
      <h1 className="text-2xl font-semibold text-text-primary mb-6">Settings</h1>

      {/* Tab bar */}
      <div className="flex items-center gap-1 border-b border-border-light mb-6">
        {settingsTabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={clsx(
              "flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px",
              activeTab === tab.key
                ? "text-text-primary border-accent"
                : "text-text-secondary border-transparent hover:text-text-primary"
            )}
          >
            <tab.icon size={14} />
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab panels */}
      {activeTab === "account" && <AccountTab />}
      {activeTab === "ai" && <AIConfigPanel />}
    </div>
  );
}