"use client";

import { useState } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import { Shell } from "@/components/Shell";
import { TabProfil } from "@/components/parametres/TabProfil";
import { TabMarque } from "@/components/parametres/TabMarque";
import { TabIntegrations } from "@/components/parametres/TabIntegrations";
import { TabEquipe } from "@/components/parametres/TabEquipe";
import { TabSecurite } from "@/components/parametres/TabSecurite";
import { ExternalLink } from "lucide-react";

const TABS = [
  { id: "profil", label: "Profil & compte" },
  { id: "marque", label: "Marque & ton" },
  { id: "integrations", label: "Intégrations" },
  { id: "equipe", label: "Équipe" },
  { id: "facturation", label: "Facturation" },
  { id: "securite", label: "Sécurité & accès" },
] as const;

type TabId = (typeof TABS)[number]["id"];

export default function ParametresPage() {
  const [activeTab, setActiveTab] = useState<TabId>("profil");

  return (
    <Shell>
      <div className="max-w-[1200px] mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-[22px] font-semibold tracking-tight text-text">Paramètres</h1>
          <p className="text-[13px] text-text-dim mt-1">
            Gère ton compte, ta marque et tes intégrations.
          </p>
        </div>

        {/* Onglets desktop — sticky */}
        <div className="hidden sm:block sticky top-14 z-10 bg-bg/80 backdrop-blur-md border-b border-border mb-6 -mx-5 lg:-mx-8 px-5 lg:px-8">
          <div className="flex items-center gap-0 overflow-x-auto">
            {TABS.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`relative px-4 py-3.5 text-[13px] font-medium whitespace-nowrap transition-colors ${
                  activeTab === tab.id
                    ? "text-text"
                    : "text-text-dim hover:text-text"
                }`}
              >
                {tab.label}
                {activeTab === tab.id && (
                  <motion.div
                    layoutId="tab-underline"
                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent rounded-full"
                  />
                )}
              </button>
            ))}
          </div>
        </div>

        {/* Select mobile */}
        <div className="sm:hidden mb-5">
          <select
            value={activeTab}
            onChange={(e) => setActiveTab(e.target.value as TabId)}
            className="w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright"
          >
            {TABS.map((tab) => (
              <option key={tab.id} value={tab.id}>
                {tab.label}
              </option>
            ))}
          </select>
        </div>

        {/* Contenu */}
        <AnimatePresence mode="wait">
          <motion.div
            key={activeTab}
            initial={{ opacity: 0, y: 6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -4 }}
            transition={{ duration: 0.2 }}
          >
            {activeTab === "profil" && <TabProfil />}
            {activeTab === "marque" && <TabMarque />}
            {activeTab === "integrations" && <TabIntegrations />}
            {activeTab === "equipe" && <TabEquipe />}
            {activeTab === "facturation" && (
              <div className="max-w-lg">
                <div className="bg-bg-card border border-border rounded-xl p-8 flex flex-col items-center gap-4 text-center">
                  <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-accent to-cyan-500 flex items-center justify-center">
                    <ExternalLink className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="text-[15px] font-semibold text-text mb-1">Facturation dédiée</div>
                    <p className="text-[13px] text-text-dim leading-relaxed">
                      Gère ton abonnement, tes crédits tokens et télécharge tes factures
                      sur la page dédiée.
                    </p>
                  </div>
                  <Link
                    href="/abonnement"
                    className="flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity"
                  >
                    Accéder à la facturation
                    <ExternalLink className="w-3.5 h-3.5" />
                  </Link>
                </div>
              </div>
            )}
            {activeTab === "securite" && <TabSecurite />}
          </motion.div>
        </AnimatePresence>
      </div>
    </Shell>
  );
}