"use client";

import { useState } from "react";
import { CheckCircle, Copy, RefreshCw } from "lucide-react";

type Integration = {
  id: string;
  name: string;
  description: string;
  icon: string;
  connected: boolean;
  category: string;
};

const INTEGRATIONS: Integration[] = [
  {
    id: "gsc",
    name: "Google Search Console",
    description: "Synchronise les données SEO, positions et impressions automatiquement.",
    icon: "G",
    connected: true,
    category: "SEO",
  },
  {
    id: "ga4",
    name: "Google Analytics 4",
    description: "Suit le trafic et les conversions liés aux contenus publiés.",
    icon: "A",
    connected: false,
    category: "Analytics",
  },
  {
    id: "slack",
    name: "Slack",
    description: "Reçois des notifications dans ton canal Slack à chaque événement important.",
    icon: "S",
    connected: false,
    category: "Notifications",
  },
  {
    id: "zapier",
    name: "Zapier",
    description: "Connecte avec plus de 5 000 apps via des zaps automatisés.",
    icon: "Z",
    connected: false,
    category: "Automation",
  },
  {
    id: "make",
    name: "Make",
    description: "Automatise des workflows complexes avec les scénarios Make.",
    icon: "M",
    connected: false,
    category: "Automation",
  },
  {
    id: "semrush",
    name: "Semrush",
    description: "Importe les données de mots-clés et de concurrents depuis Semrush.",
    icon: "SR",
    connected: false,
    category: "SEO",
  },
];

export function TabIntegrations() {
  const [integrations, setIntegrations] = useState(INTEGRATIONS);
  const [apiKey] = useState("eak_live_a7f3c2b1d9e4f6a8b0c2d4e6f8a0b2c4");
  const [copied, setCopied] = useState(false);

  function toggle(id: string) {
    setIntegrations((prev) =>
      prev.map((i) => (i.id === id ? { ...i, connected: !i.connected } : i))
    );
  }

  function copyKey() {
    void navigator.clipboard.writeText(apiKey);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  return (
    <div className="space-y-5 max-w-2xl">
      {/* Grille intégrations */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        {integrations.map((integ) => (
          <div key={integ.id} className="bg-bg-card border border-border rounded-xl p-4">
            <div className="flex items-start gap-3">
              <div className="w-9 h-9 rounded-lg bg-bg border border-border flex items-center justify-center text-[12px] font-bold text-text-dim shrink-0">
                {integ.icon}
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-0.5">
                  <span className="text-[13px] font-semibold text-text truncate">{integ.name}</span>
                  {integ.connected && (
                    <CheckCircle className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
                  )}
                </div>
                <div className="text-[11.5px] text-text-dim leading-snug mb-3">
                  {integ.description}
                </div>
                <div className="flex items-center justify-between">
                  <span
                    className={`text-[11px] font-medium ${
                      integ.connected ? "text-emerald-400" : "text-text-dimmer"
                    }`}
                  >
                    {integ.connected ? "Connecté" : "Non connecté"}
                  </span>
                  <button
                    onClick={() => toggle(integ.id)}
                    className={`px-2.5 py-1 rounded-lg text-[11.5px] font-medium border transition-colors ${
                      integ.connected
                        ? "border-red-500/25 text-red-400 hover:bg-red-500/10"
                        : "border-accent/30 text-accent-light hover:bg-accent/10"
                    }`}
                  >
                    {integ.connected ? "Déconnecter" : "Connecter"}
                  </button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* API Key */}
      <div className="bg-bg-card border border-border rounded-xl p-5 space-y-3">
        <div className="text-[13px] font-semibold text-text">Clé API personnelle</div>
        <p className="text-[12px] text-text-dim">
          Utilise cette clé pour accéder à l'API depuis tes propres outils.
        </p>
        <div className="flex items-center gap-2">
          <code className="flex-1 bg-bg border border-border rounded-lg px-3 py-2 text-[12px] font-mono text-text-dim truncate">
            {apiKey}
          </code>
          <button
            onClick={copyKey}
            className="p-2.5 rounded-lg border border-border hover:bg-bg-card-hover text-text-dim transition-colors shrink-0"
          >
            {copied ? (
              <CheckCircle className="w-4 h-4 text-emerald-400" />
            ) : (
              <Copy className="w-4 h-4" />
            )}
          </button>
          <button className="p-2.5 rounded-lg border border-border hover:bg-bg-card-hover text-text-dim transition-colors shrink-0">
            <RefreshCw className="w-4 h-4" />
          </button>
        </div>
        <p className="text-[11px] text-text-dimmer">
          Ne partage jamais cette clé. Tu peux la révoquer et en générer une nouvelle à tout moment.
        </p>
      </div>
    </div>
  );
}