import React, { useState } from 'react';
import {
  BookOpen,
  Server,
  GitBranch,
  LayoutDashboard,
  Globe,
  Database,
  Shield,
  ArrowRight,
  ChevronDown,
  ChevronUp,
  ExternalLink,
  Activity,
  Cpu,
  HardDrive,
  Network,
  CheckCircle,
  Clock,
  Zap,
  Package,
} from 'lucide-react';

/* ─────────────────────────────────────────────
   Données de l'infrastructure
───────────────────────────────────────────── */
const RECETTE = {
  label: 'RECETTE',
  color: 'amber',
  ip: '78.138.58.109',
  os: 'Debian GNU/Linux 12',
  cpu: '4 vCores',
  ram: '8 Go',
  disk: '147 Go',
  infra: [
    {
      icon: GitBranch,
      color: 'purple',
      name: 'Gitea',
      url: 'git.recette.santinova-soft.org',
      desc: 'Dépôt Git — 4 repositories',
      href: 'https://git.recette.santinova-soft.org',
    },
    {
      icon: LayoutDashboard,
      color: 'blue',
      name: 'Dashboard',
      url: 'dashboard.recette.santinova-soft.org',
      desc: 'Monitoring CPU / RAM / Disque',
      href: 'https://dashboard.recette.santinova-soft.org',
    },
    {
      icon: Globe,
      color: 'teal',
      name: 'Portail Applicatif',
      url: 'portail.recette.santinova-soft.org',
      desc: 'Vitrine centralisée des applications',
      href: 'https://portail.recette.santinova-soft.org',
    },
    {
      icon: Shield,
      color: 'gray',
      name: 'Traefik',
      url: 'Reverse Proxy SSL',
      desc: "Let's Encrypt — Routage dynamique",
    },
  ],
  apps: [
    {
      icon: '🧾',
      color: 'green',
      name: 'Démat. Facturation DSI',
      url: 'demat-facturation.recette.santinova-soft.org',
      href: 'https://demat-facturation.recette.santinova-soft.org',
    },
    {
      icon: '👁️',
      color: 'indigo',
      name: 'Veille Réglementaire',
      url: 'veille.recette.santinova-soft.org',
      href: 'https://veille.recette.santinova-soft.org',
    },
    {
      icon: '🗺️',
      color: 'cyan',
      name: 'SONUM',
      url: 'sonum.recette.santinova-soft.org',
      desc: 'Cartographie solutions numériques FEHAP',
      href: 'https://sonum.recette.santinova-soft.org',
    },
    {
      icon: '👤',
      color: 'pink',
      name: 'Itinova Contacts',
      url: 'contacts.recette.santinova-soft.org',
      href: 'https://contacts.recette.santinova-soft.org',
    },
    {
      icon: '🚗',
      color: 'yellow',
      name: 'Flotte Véhicules',
      url: 'flotte.recette.santinova-soft.org',
      href: 'https://flotte.recette.santinova-soft.org',
    },
    {
      icon: '🎧',
      color: 'orange',
      name: 'Podcasts Itinova',
      url: 'podcasts.recette.santinova-soft.org',
      href: 'https://podcasts.recette.santinova-soft.org',
    },
  ],
};

const PRODUCTION = {
  label: 'PRODUCTION',
  color: 'emerald',
  ip: '180.149.196.138',
  os: 'Debian GNU/Linux 12',
  cpu: '8 vCores',
  ram: '16 Go',
  disk: '246 Go',
  services: [
    {
      icon: GitBranch,
      color: 'purple',
      name: 'Gitea',
      url: 'git.santinova-soft.org',
      desc: 'Dépôt Git principal',
      href: 'https://git.santinova-soft.org',
    },
    {
      icon: LayoutDashboard,
      color: 'blue',
      name: 'Dashboard',
      url: 'dashboard.santinova-soft.org',
      desc: 'Monitoring temps réel',
      href: 'https://dashboard.santinova-soft.org',
    },
    {
      icon: Globe,
      color: 'teal',
      name: 'Portail Applicatif',
      url: 'portail.santinova-soft.org',
      desc: 'Vitrine applicative production',
      href: 'https://portail.santinova-soft.org',
    },
    {
      icon: Shield,
      color: 'gray',
      name: 'Traefik',
      url: 'Reverse Proxy SSL',
      desc: "Let's Encrypt — Routage dynamique",
    },
  ],
};

const CICD_STEPS = [
  { icon: GitBranch, label: 'Push code', desc: 'Développeur pousse sur Gitea' },
  { icon: Zap, label: 'Webhook', desc: 'Gitea déclenche le webhook' },
  { icon: Package, label: 'docker compose build', desc: 'Build de la nouvelle image' },
  { icon: Server, label: 'docker compose up -d', desc: 'Redémarrage du conteneur' },
  { icon: CheckCircle, label: 'Health check', desc: 'Vérification de disponibilité' },
];

/* ─────────────────────────────────────────────
   Helpers de couleur
───────────────────────────────────────────── */
const colorMap = {
  purple: 'border-purple-500/40 bg-purple-500/10 text-purple-300',
  blue: 'border-blue-500/40 bg-blue-500/10 text-blue-300',
  teal: 'border-teal-500/40 bg-teal-500/10 text-teal-300',
  gray: 'border-gray-500/40 bg-gray-500/10 text-gray-300',
  green: 'border-green-500/40 bg-green-500/10 text-green-300',
  indigo: 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300',
  cyan: 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300',
  pink: 'border-pink-500/40 bg-pink-500/10 text-pink-300',
  yellow: 'border-yellow-500/40 bg-yellow-500/10 text-yellow-300',
  orange: 'border-orange-500/40 bg-orange-500/10 text-orange-300',
};

/* ─────────────────────────────────────────────
   Composants
───────────────────────────────────────────── */
function ServerBadge({ env }) {
  const isAmber = env.color === 'amber';
  const borderColor = isAmber ? 'border-amber-500/30' : 'border-emerald-500/30';
  const bgColor = isAmber ? 'bg-amber-500/5' : 'bg-emerald-500/5';
  return (
    <div className={`flex flex-wrap gap-4 p-3 rounded-xl border ${borderColor} ${bgColor} mb-5`}>
      {[
        { icon: Server, label: env.ip },
        { icon: Cpu, label: env.cpu },
        { icon: Activity, label: env.ram + ' RAM' },
        { icon: HardDrive, label: env.disk + ' Disque' },
        { icon: Network, label: env.os },
      ].map(({ icon: Icon, label }) => (
        <div key={label} className="flex items-center gap-1.5 text-xs text-gray-400">
          <Icon className="w-3.5 h-3.5 text-gray-500" />
          <span>{label}</span>
        </div>
      ))}
    </div>
  );
}

function ServiceCard({ item, withDb = false }) {
  const cls = colorMap[item.color] || colorMap.gray;
  const Icon = item.icon;
  return (
    <div className={`flex items-start gap-3 p-3 rounded-xl border ${cls} transition-all hover:scale-[1.01]`}>
      <div className="mt-0.5 flex-shrink-0">
        {typeof Icon === 'string' ? (
          <span className="text-xl">{Icon}</span>
        ) : (
          <Icon className="w-5 h-5" />
        )}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="font-semibold text-sm text-white">{item.name}</span>
          {item.href && (
            <a
              href={item.href}
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-500 hover:text-gray-300 transition-colors"
            >
              <ExternalLink className="w-3 h-3" />
            </a>
          )}
        </div>
        <p className="text-xs text-gray-400 truncate">{item.url}</p>
        {item.desc && <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>}
      </div>
      {withDb && (
        <div className="flex items-center gap-1 text-xs text-gray-600 flex-shrink-0">
          <Database className="w-3 h-3" />
          <span>MySQL</span>
        </div>
      )}
    </div>
  );
}

function SectionTitle({ children, color = 'amber' }) {
  const cls = color === 'amber' ? 'text-amber-400' : 'text-emerald-400';
  return <h3 className={`text-xs font-bold uppercase tracking-widest ${cls} mb-3`}>{children}</h3>;
}

/* ─────────────────────────────────────────────
   Page principale
───────────────────────────────────────────── */
export default function DocumentationPage() {
  const [schemaOpen, setSchemaOpen] = useState(true);

  return (
    <div className="space-y-8 pb-12">
      {/* ── En-tête ── */}
      <div className="flex items-center gap-4">
        <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
          <BookOpen className="w-6 h-6 text-white" />
        </div>
        <div>
          <h1 className="text-2xl font-bold text-white">Documentation Infrastructure</h1>
          <p className="text-sm text-gray-400">Architecture de déploiement Santinova — Recette &amp; Production</p>
        </div>
        <div className="ml-auto flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
          <Clock className="w-3.5 h-3.5 text-emerald-400" />
          <span className="text-xs text-emerald-400">Mis à jour le 04 Mai 2026</span>
        </div>
      </div>

      {/* ── Schéma d'architecture ── */}
      <div className="rounded-2xl border border-dark-700 bg-dark-900 overflow-hidden">
        <button
          onClick={() => setSchemaOpen((v) => !v)}
          className="w-full flex items-center justify-between px-6 py-4 hover:bg-dark-800 transition-colors"
        >
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center">
              <Network className="w-4 h-4 text-blue-400" />
            </div>
            <span className="font-semibold text-white">Schéma d'Architecture</span>
          </div>
          {schemaOpen ? (
            <ChevronUp className="w-5 h-5 text-gray-400" />
          ) : (
            <ChevronDown className="w-5 h-5 text-gray-400" />
          )}
        </button>
        {schemaOpen && (
          <div className="px-6 pb-6">
            <img
              src="/infra_schema_v2.png"
              alt="Schéma d'architecture infrastructure Santinova"
              className="w-full rounded-xl border border-dark-700 shadow-2xl"
            />
          </div>
        )}
      </div>

      {/* ── Grille Recette / CI-CD / Production ── */}
      <div className="grid grid-cols-1 xl:grid-cols-[1fr_auto_1fr] gap-6">

        {/* ── RECETTE ── */}
        <div className="rounded-2xl border border-amber-500/30 bg-dark-900 p-6">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-3 h-3 rounded-full bg-amber-400 shadow-lg shadow-amber-400/50" />
            <h2 className="text-xl font-bold text-amber-400 tracking-wide">RECETTE</h2>
            <span className="ml-auto text-xs text-gray-500 font-mono">78.138.58.109</span>
          </div>
          <ServerBadge env={RECETTE} />

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Infra de base */}
            <div>
              <SectionTitle color="amber">Infrastructure de base</SectionTitle>
              <div className="space-y-2">
                {RECETTE.infra.map((item) => (
                  <ServiceCard key={item.name} item={item} />
                ))}
              </div>
            </div>
            {/* Applications */}
            <div>
              <SectionTitle color="amber">Applications déployées</SectionTitle>
              <div className="space-y-2">
                {RECETTE.apps.map((item) => (
                  <ServiceCard key={item.name} item={item} withDb />
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* ── CI/CD Pipeline ── */}
        <div className="flex flex-col items-center justify-center gap-3 px-4 xl:px-2 py-6">
          <span className="text-xs font-bold uppercase tracking-widest text-blue-400 mb-2">CI/CD</span>
          {CICD_STEPS.map((step, i) => {
            const Icon = step.icon;
            return (
              <React.Fragment key={step.label}>
                <div className="flex flex-col items-center gap-1 group">
                  <div className="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center group-hover:bg-blue-600/30 transition-colors">
                    <Icon className="w-5 h-5 text-blue-400" />
                  </div>
                  <span className="text-xs text-gray-400 text-center max-w-[80px] leading-tight">{step.label}</span>
                </div>
                {i < CICD_STEPS.length - 1 && (
                  <div className="w-px h-4 bg-gradient-to-b from-blue-500/50 to-blue-500/10" />
                )}
              </React.Fragment>
            );
          })}
          <div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-600/10 border border-blue-500/20">
            <ArrowRight className="w-4 h-4 text-blue-400" />
            <span className="text-xs text-blue-300 font-semibold whitespace-nowrap">Promotion → PROD</span>
          </div>
        </div>

        {/* ── PRODUCTION ── */}
        <div className="rounded-2xl border border-emerald-500/30 bg-dark-900 p-6">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-3 h-3 rounded-full bg-emerald-400 shadow-lg shadow-emerald-400/50" />
            <h2 className="text-xl font-bold text-emerald-400 tracking-wide">PRODUCTION</h2>
            <span className="ml-auto text-xs text-gray-500 font-mono">180.149.196.138</span>
          </div>
          <ServerBadge env={PRODUCTION} />

          <SectionTitle color="emerald">Services actifs</SectionTitle>
          <div className="space-y-2 mb-4">
            {PRODUCTION.services.map((item) => (
              <ServiceCard key={item.name} item={item} />
            ))}
          </div>

          {/* Carte "Applications à venir" */}
          <div className="flex items-center gap-3 p-3 rounded-xl border border-dashed border-gray-600/40 bg-gray-500/5">
            <Package className="w-5 h-5 text-gray-500" />
            <div>
              <p className="text-sm font-semibold text-gray-400">Applications à venir</p>
              <p className="text-xs text-gray-600">Déploiement progressif via CI/CD</p>
            </div>
          </div>

          {/* Badge metrics-collector */}
          <div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
            <Activity className="w-3.5 h-3.5 text-emerald-400" />
            <span className="text-xs text-emerald-400">metrics-collector · systemd · actif</span>
          </div>
        </div>
      </div>

      {/* ── Légende technologique ── */}
      <div className="rounded-2xl border border-dark-700 bg-dark-900 p-6">
        <h3 className="text-sm font-bold text-white mb-4">Stack Technologique</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
          {[
            { emoji: '🐳', label: 'Docker', desc: 'Conteneurisation' },
            { emoji: '🔒', label: 'HTTPS', desc: "Let's Encrypt SSL" },
            { emoji: '🗄️', label: 'MySQL 8.0', desc: 'Base de données' },
            { emoji: '🔀', label: 'Traefik', desc: 'Reverse Proxy' },
          ].map((t) => (
            <div
              key={t.label}
              className="flex items-center gap-3 p-3 rounded-xl bg-dark-800 border border-dark-700"
            >
              <span className="text-2xl">{t.emoji}</span>
              <div>
                <p className="text-sm font-semibold text-white">{t.label}</p>
                <p className="text-xs text-gray-500">{t.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
