"use client"

import { Icon } from "@iconify/react"

const ACCENT = "#7C3AED"

type ServiceProgress = {
  service: string
  icon: string
  imported: number
  total: number
}

const SERVICES: ServiceProgress[] = [
  { service: "Mail", icon: "mdi:email-outline", imported: 12840, total: 13200 },
  { service: "Drive", icon: "mdi:folder-outline", imported: 3420, total: 3900 },
  { service: "Contacts", icon: "mdi:card-account-details-outline", imported: 512, total: 512 },
  { service: "Agenda", icon: "mdi:calendar-outline", imported: 286, total: 310 },
]

/** Aperçu statique d'un projet de migration Google Workspace / Microsoft 365. */
export function AdminMigrationDemo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
        <div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
          <Icon icon="mdi:swap-horizontal-bold" className="size-5" style={{ color: ACCENT }} aria-hidden />
          <span className="text-sm font-semibold tracking-tight">Migration ACME 2026</span>
          <span
            className="ml-auto flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium"
            style={{ backgroundColor: `${ACCENT}1f`, color: ACCENT }}
          >
            <span className="size-1.5 rounded-full" style={{ backgroundColor: ACCENT }} aria-hidden />
            En cours
          </span>
        </div>

        <div className="flex items-center gap-3 border-b border-[var(--landing-line)] px-4 py-3">
          <span className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-[var(--landing-line)]">
            <Icon icon="logos:google-workspace" className="size-5" aria-hidden />
          </span>
          <Icon icon="mdi:arrow-right" className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
          <span className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-[var(--landing-line)]">
            <Icon icon="logos:microsoft-icon" className="size-5" aria-hidden />
          </span>
          <div className="min-w-0 text-xs text-[var(--landing-muted)]">
            <p className="truncate font-medium text-[var(--landing-fg)]">Google Workspace + Microsoft 365</p>
            <p className="truncate">OAuth · Google DWD · MS app-only</p>
          </div>
        </div>

        <div className="space-y-2.5 p-4">
          {SERVICES.map((s) => {
            const pct = Math.round((s.imported / s.total) * 100)
            return (
              <div key={s.service}>
                <div className="mb-1 flex items-center gap-2 text-xs">
                  <Icon icon={s.icon} className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
                  <span className="font-medium text-[var(--landing-fg)]">{s.service}</span>
                  <span className="ml-auto tabular-nums text-[var(--landing-muted)]">
                    {s.imported.toLocaleString("fr-FR")} / {s.total.toLocaleString("fr-FR")}
                  </span>
                </div>
                <div className="h-1.5 overflow-hidden rounded-full bg-[var(--landing-chip)]">
                  <div
                    className="h-full rounded-full transition-all"
                    style={{ width: `${pct}%`, backgroundColor: ACCENT }}
                  />
                </div>
              </div>
            )
          })}
        </div>

        <div className="flex flex-wrap items-center gap-2 border-t border-[var(--landing-line)] bg-[var(--landing-bg)]/60 px-4 py-3">
          <span className="text-[11px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
            Bascule MX
          </span>
          <span
            className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold"
            style={{ backgroundColor: `${ACCENT}1f`, color: ACCENT }}
          >
            <Icon icon="mdi:check-circle" className="size-3.5" aria-hidden />
            TXT
          </span>
          <span
            className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold"
            style={{ backgroundColor: `${ACCENT}1f`, color: ACCENT }}
          >
            <Icon icon="mdi:check-circle" className="size-3.5" aria-hidden />
            MX
          </span>
          <span className="ml-auto text-[11px] text-[var(--landing-muted)]">DNS vérifié · prêt au cutover</span>
        </div>
      </div>
      <p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
        <Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
        Aperçu statique — import, suivi des jobs, audit par utilisateur et bascule MX progressive.
      </p>
    </div>
  )
}