"use client"

import { Icon } from "@iconify/react"

const ACCENT = "#7C3AED"

type StorageQuota = {
  label: string
  icon: string
  usedGib: number
  totalGib: number
}

const STORAGE: StorageQuota[] = [
  { label: "Mail", icon: "mdi:email-outline", usedGib: 24, totalGib: 30 },
  { label: "Drive", icon: "mdi:folder-outline", usedGib: 78, totalGib: 100 },
  { label: "Photos", icon: "mdi:image-outline", usedGib: 9, totalGib: 30 },
]

/** Aperçu statique des quotas de stockage et de coût IA appliqués par défaut. */
export function AdminQuotasDemo() {
  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:gauge" className="size-5" style={{ color: ACCENT }} aria-hidden />
          <span className="text-sm font-semibold tracking-tight">Quotas par défaut</span>
          <span className="ml-auto text-[11px] font-medium text-[var(--landing-muted)]">Organisation</span>
        </div>

        <div className="space-y-3 p-4">
          {STORAGE.map((q) => {
            const pct = Math.round((q.usedGib / q.totalGib) * 100)
            const warn = pct >= 90
            return (
              <div key={q.label}>
                <div className="mb-1 flex items-center gap-2 text-xs">
                  <Icon icon={q.icon} className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
                  <span className="font-medium text-[var(--landing-fg)]">{q.label}</span>
                  <span className="ml-auto tabular-nums text-[var(--landing-muted)]">
                    {q.usedGib} / {q.totalGib} Go
                  </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: warn ? "#E0245E" : ACCENT }}
                  />
                </div>
              </div>
            )
          })}
        </div>

        <div className="grid grid-cols-2 gap-2 border-t border-[var(--landing-line)] bg-[var(--landing-bg)]/60 p-4">
          <div className="rounded-xl border border-[var(--landing-line)] bg-[var(--landing-chip)]/30 p-3">
            <p className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
              <Icon icon="mdi:robot-outline" className="size-3.5" aria-hidden />
              Coût IA / jour
            </p>
            <p className="mt-1 text-lg font-semibold text-[var(--landing-fg)]">2,50 €</p>
            <p className="text-[11px] text-[var(--landing-muted)]">par utilisateur · clés org</p>
          </div>
          <div className="rounded-xl border border-[var(--landing-line)] bg-[var(--landing-chip)]/30 p-3">
            <p className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
              <Icon icon="mdi:web" className="size-3.5" aria-hidden />
              Recherches web
            </p>
            <p className="mt-1 text-lg font-semibold text-[var(--landing-fg)]">50 / jour</p>
            <p className="text-[11px] text-[var(--landing-muted)]">tokens API & webhooks limités</p>
          </div>
        </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 — quotas stockage, plafonds de coût IA et seuils d&apos;alerte par défaut.
      </p>
    </div>
  )
}