'use client';

import { useEffect, useState, useCallback } from 'react';
import { createClient } from '@/lib/supabase/client';
import {
  Shield, Users, Check, X, Crown, Search, Loader2, Edit3,
  Ticket, Plus, Copy, ToggleLeft, ToggleRight, Trash2,
  RefreshCw, Calendar, Hash, Infinity,
} from 'lucide-react';
import { PlanBadge } from '@/components/subscription/plan-badge';
import { PLAN_ORDER, PLANS } from '@/lib/subscription/plans';
import type { Plan, AdminUser } from '@/types/subscription';
import { cn } from '@/lib/utils';

const SUPER_ADMIN_EMAIL = 'schmidtmartin930@gmail.com';

/* ─── Types ── */

interface UserRow {
  id: string;
  email: string;
  full_name: string | null;
  username: string | null;
  plan: Plan;
  status: string;
  is_admin: boolean;
  admin_data: AdminUser | null;
}

type EditPerms = {
  can_manage_subscriptions: boolean;
  can_manage_users: boolean;
  can_grant_admin: boolean;
  can_view_analytics: boolean;
};

interface PromoCode {
  id: string;
  code: string;
  plan: Plan;
  duration_months: number;
  max_uses: number;
  uses: number;
  expires_at: string | null;
  note: string | null;
  active: boolean;
  created_at: string;
}

/* ─── Helpers ── */

function randomCode(): string {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  return Array.from({ length: 8 }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
}

const PLAN_LABELS: Record<Plan, string> = {
  free: 'Free', pro: 'Pro', pro_plus: 'Pro+', business: 'Business', enterprise: 'Enterprise',
};

const DURATION_OPTIONS = [
  { value: 1, label: '1 Monat' },
  { value: 3, label: '3 Monate' },
  { value: 6, label: '6 Monate' },
  { value: 12, label: '1 Jahr' },
];

/* ─── Tab type ── */
type Tab = 'users' | 'codes';

/* ─── Page ── */

export default function AdminPage() {
  const [authorized, setAuthorized] = useState<boolean | null>(null);
  const [tab, setTab] = useState<Tab>('users');

  /* Users state */
  const [users, setUsers] = useState<UserRow[]>([]);
  const [usersLoading, setUsersLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [editingUser, setEditingUser] = useState<UserRow | null>(null);
  const [saving, setSaving] = useState(false);
  const [editPerms, setEditPerms] = useState<EditPerms>({
    can_manage_subscriptions: false, can_manage_users: false,
    can_grant_admin: false, can_view_analytics: false,
  });
  const [editPlan, setEditPlan] = useState<Plan>('free');

  /* Codes state */
  const [codes, setCodes] = useState<PromoCode[]>([]);
  const [codesLoading, setCodesLoading] = useState(false);
  const [showCreateCode, setShowCreateCode] = useState(false);
  const [newCode, setNewCode] = useState(randomCode());
  const [newPlan, setNewPlan] = useState<Plan>('pro_plus');
  const [newDuration, setNewDuration] = useState(3);
  const [newMaxUses, setNewMaxUses] = useState(1);
  const [newExpiry, setNewExpiry] = useState('');
  const [newNote, setNewNote] = useState('');
  const [creatingCode, setCreatingCode] = useState(false);
  const [createError, setCreateError] = useState('');
  const [copiedId, setCopiedId] = useState<string | null>(null);

  /* Auth check */
  useEffect(() => {
    async function checkAuth() {
      const supabase = createClient();
      const { data: { user } } = await supabase.auth.getUser();
      if (user?.email === SUPER_ADMIN_EMAIL) {
        setAuthorized(true);
      } else {
        setAuthorized(false);
      }
    }
    void checkAuth();
  }, []);

  /* Load users */
  const loadUsers = useCallback(async () => {
    setUsersLoading(true);
    try {
      const res = await fetch('/api/admin/users');
      if (res.ok) setUsers(await res.json() as UserRow[]);
    } finally { setUsersLoading(false); }
  }, []);

  /* Load codes */
  const loadCodes = useCallback(async () => {
    setCodesLoading(true);
    try {
      const res = await fetch('/api/admin/codes');
      if (res.ok) setCodes(await res.json() as PromoCode[]);
    } finally { setCodesLoading(false); }
  }, []);

  useEffect(() => {
    if (authorized) {
      void loadUsers();
      void loadCodes();
    }
  }, [authorized, loadUsers, loadCodes]);

  /* User edit */
  function openEdit(user: UserRow) {
    setEditingUser(user);
    setEditPlan(user.plan);
    setEditPerms({
      can_manage_subscriptions: user.admin_data?.can_manage_subscriptions ?? false,
      can_manage_users: user.admin_data?.can_manage_users ?? false,
      can_grant_admin: user.admin_data?.can_grant_admin ?? false,
      can_view_analytics: user.admin_data?.can_view_analytics ?? false,
    });
  }

  async function saveUser() {
    if (!editingUser) return;
    setSaving(true);
    try {
      await fetch('/api/admin/users', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId: editingUser.id, plan: editPlan, permissions: editPerms }),
      });
      await loadUsers();
      setEditingUser(null);
    } finally { setSaving(false); }
  }

  /* Create code */
  async function handleCreateCode() {
    if (!newCode.trim()) return;
    setCreatingCode(true);
    setCreateError('');
    try {
      const res = await fetch('/api/admin/codes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          code: newCode,
          plan: newPlan,
          duration_months: newDuration,
          max_uses: newMaxUses,
          expires_at: newExpiry || null,
          note: newNote || null,
        }),
      });
      if (!res.ok) {
        const { error } = await res.json() as { error: string };
        setCreateError(error);
        return;
      }
      await loadCodes();
      setShowCreateCode(false);
      setNewCode(randomCode());
      setNewNote('');
      setNewExpiry('');
      setNewMaxUses(1);
    } finally { setCreatingCode(false); }
  }

  /* Toggle code active */
  async function toggleCode(id: string, active: boolean) {
    await fetch('/api/admin/codes', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id, active }),
    });
    setCodes(prev => prev.map(c => c.id === id ? { ...c, active } : c));
  }

  /* Delete code */
  async function deleteCode(id: string) {
    if (!confirm('Code wirklich löschen?')) return;
    await fetch('/api/admin/codes', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id }),
    });
    setCodes(prev => prev.filter(c => c.id !== id));
  }

  /* Copy code */
  function copyCode(id: string, code: string) {
    void navigator.clipboard.writeText(code);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  }

  /* Stats */
  const planStats = PLAN_ORDER.reduce((acc, p) => {
    acc[p] = users.filter(u => u.plan === p).length;
    return acc;
  }, {} as Record<Plan, number>);

  const filtered = users.filter(u =>
    u.email.toLowerCase().includes(search.toLowerCase()) ||
    (u.full_name ?? '').toLowerCase().includes(search.toLowerCase()) ||
    (u.username ?? '').toLowerCase().includes(search.toLowerCase())
  );

  /* ── Loading / Auth gates ── */
  if (authorized === null) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Loader2 className="w-6 h-6 text-white/30 animate-spin" />
      </div>
    );
  }

  if (authorized === false) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center text-center px-4">
        <div>
          <div className="mx-auto mb-4 w-14 h-14 rounded-2xl border border-rose-500/[0.16] bg-rose-500/[0.08] flex items-center justify-center">
            <Shield className="w-7 h-7 text-rose-400" />
          </div>
          <h1 className="text-xl font-bold text-white">Kein Zugriff</h1>
          <p className="mt-2 text-sm text-white/40">Dieses Panel ist nur für Administratoren.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background px-4 py-8 text-white md:px-8">
      <div className="mx-auto max-w-6xl space-y-6">

        {/* ── Hero ── */}
        <div className="rounded-[28px] border border-violet-500/[0.14] bg-[radial-gradient(ellipse_at_top_left,rgba(139,92,246,0.09),rgba(10,8,18,0.98)_55%)] p-8">
          <div className="flex items-start gap-4">
            <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-violet-500/[0.18] bg-violet-500/15 flex-shrink-0">
              <Crown className="w-5 h-5 text-violet-300" />
            </div>
            <div className="flex-1">
              <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-white/30">Super Admin</p>
              <h1 className="mt-1 text-3xl font-black text-white">Admin Panel</h1>
              <p className="mt-1 text-sm text-white/40">{users.length} Nutzer · {codes.filter(c => c.active).length} aktive Codes</p>
            </div>
          </div>
          {/* Plan stats */}
          <div className="mt-5 flex flex-wrap gap-2">
            {PLAN_ORDER.map(p => (
              <div key={p} className="flex items-center gap-2 rounded-xl border border-white/[0.06] bg-white/[0.03] px-3 py-1.5">
                <PlanBadge plan={p} />
                <span className="text-sm font-bold text-white">{planStats[p]}</span>
              </div>
            ))}
          </div>
        </div>

        {/* ── Tabs ── */}
        <div className="flex gap-1 rounded-2xl border border-white/[0.06] bg-white/[0.02] p-1 w-fit">
          {([
            { id: 'users' as Tab, icon: Users, label: 'Nutzer' },
            { id: 'codes' as Tab, icon: Ticket, label: 'Promo Codes' },
          ]).map(t => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={cn(
                'flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all',
                tab === t.id
                  ? 'bg-white/[0.08] text-white'
                  : 'text-white/40 hover:text-white/70'
              )}
            >
              <t.icon className="w-4 h-4" />
              {t.label}
              {t.id === 'codes' && codes.length > 0 && (
                <span className="rounded-full bg-white/[0.08] px-1.5 py-0.5 text-[10px] font-bold text-white/50">
                  {codes.length}
                </span>
              )}
            </button>
          ))}
        </div>

        {/* ── Users Tab ── */}
        {tab === 'users' && (
          <div className="rounded-[28px] border border-white/[0.08] bg-white/[0.01] overflow-hidden">
            <div className="flex items-center justify-between gap-4 px-6 py-5 border-b border-white/[0.06]">
              <div className="flex items-center gap-2">
                <Users className="w-4 h-4 text-white/40" />
                <h2 className="text-sm font-bold text-white">Nutzer verwalten</h2>
              </div>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/30" />
                <input
                  placeholder="Suchen..."
                  value={search}
                  onChange={e => setSearch(e.target.value)}
                  className="rounded-xl border border-white/[0.08] bg-white/[0.03] pl-8 pr-4 py-2 text-sm text-white placeholder:text-white/30 outline-none focus:border-violet-500/[0.25] w-56 transition-colors"
                />
              </div>
            </div>
            {usersLoading ? (
              <div className="flex items-center justify-center py-16"><Loader2 className="w-5 h-5 text-white/30 animate-spin" /></div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-white/[0.05]">
                      <th className="py-3 px-6 text-left text-[10px] font-bold uppercase tracking-wider text-white/30">Nutzer</th>
                      <th className="py-3 px-4 text-left text-[10px] font-bold uppercase tracking-wider text-white/30">Plan</th>
                      <th className="py-3 px-4 text-center text-[10px] font-bold uppercase tracking-wider text-white/30">Admin</th>
                      <th className="py-3 px-4 text-[10px] font-bold uppercase tracking-wider text-white/30">Berechtigungen</th>
                      <th className="py-3 px-4 text-right text-[10px] font-bold uppercase tracking-wider text-white/30">Aktion</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtered.map((u, idx) => (
                      <tr key={u.id} className={`border-b border-white/[0.04] hover:bg-white/[0.02] transition-colors ${idx % 2 === 1 ? 'bg-white/[0.01]' : ''}`}>
                        <td className="py-3.5 px-6">
                          <p className="text-sm font-medium text-white">{u.full_name ?? u.email}</p>
                          <p className="text-xs text-white/40">{u.email}</p>
                          {u.username && <p className="text-[10px] text-white/25">@{u.username}</p>}
                        </td>
                        <td className="py-3.5 px-4"><PlanBadge plan={u.plan} /></td>
                        <td className="py-3.5 px-4 text-center">
                          {u.is_admin ? <Check className="w-4 h-4 text-emerald-400 mx-auto" /> : <X className="w-3.5 h-3.5 text-white/20 mx-auto" />}
                        </td>
                        <td className="py-3.5 px-4">
                          {u.admin_data ? (
                            <div className="flex flex-wrap gap-1">
                              {u.admin_data.can_manage_subscriptions && <span className="rounded-md border border-sky-500/[0.16] bg-sky-500/[0.08] px-1.5 py-0.5 text-[9px] text-sky-300">Subscriptions</span>}
                              {u.admin_data.can_manage_users && <span className="rounded-md border border-violet-500/[0.16] bg-violet-500/[0.08] px-1.5 py-0.5 text-[9px] text-violet-300">Users</span>}
                              {u.admin_data.can_grant_admin && <span className="rounded-md border border-amber-500/[0.16] bg-amber-500/[0.08] px-1.5 py-0.5 text-[9px] text-amber-300">Admin geben</span>}
                              {u.admin_data.can_view_analytics && <span className="rounded-md border border-emerald-500/[0.16] bg-emerald-500/[0.08] px-1.5 py-0.5 text-[9px] text-emerald-300">Analytics</span>}
                            </div>
                          ) : <span className="text-xs text-white/20">—</span>}
                        </td>
                        <td className="py-3.5 px-4 text-right">
                          <button onClick={() => openEdit(u)} className="inline-flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-white/[0.03] px-2.5 py-1.5 text-xs text-white/60 hover:text-white transition-colors">
                            <Edit3 className="w-3 h-3" />Bearbeiten
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}

        {/* ── Codes Tab ── */}
        {tab === 'codes' && (
          <div className="space-y-4">
            {/* Header */}
            <div className="rounded-[28px] border border-amber-500/[0.14] bg-[radial-gradient(ellipse_at_top_left,rgba(245,158,11,0.07),rgba(10,8,18,0.98)_55%)] p-6">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <div className="flex items-center gap-2.5 mb-2">
                    <div className="flex h-9 w-9 items-center justify-center rounded-xl border border-amber-500/[0.20] bg-amber-500/[0.10]">
                      <Ticket className="w-4 h-4 text-amber-300" />
                    </div>
                    <h2 className="text-lg font-black text-white">Promo Codes</h2>
                  </div>
                  <p className="text-sm text-white/40">
                    Erstelle Codes für kostenlose Plan-Upgrades. Codes können zeitlich begrenzt oder für eine bestimmte Anzahl an Nutzungen limitiert werden.
                  </p>
                </div>
                <button
                  onClick={() => { setShowCreateCode(true); setNewCode(randomCode()); setCreateError(''); }}
                  className="shrink-0 flex items-center gap-2 rounded-xl border border-amber-500/[0.22] bg-amber-500/10 px-4 py-2.5 text-sm font-semibold text-amber-300 hover:bg-amber-500/20 transition-colors"
                >
                  <Plus className="w-4 h-4" />
                  Code erstellen
                </button>
              </div>
            </div>

            {/* Codes list */}
            <div className="rounded-[28px] border border-white/[0.08] bg-white/[0.01] overflow-hidden">
              <div className="flex items-center justify-between px-6 py-4 border-b border-white/[0.06]">
                <p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
                  {codes.length} {codes.length === 1 ? 'Code' : 'Codes'} insgesamt
                </p>
                <button onClick={() => void loadCodes()} className="text-white/30 hover:text-white/60 transition-colors">
                  <RefreshCw className="w-3.5 h-3.5" />
                </button>
              </div>

              {codesLoading ? (
                <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 text-white/30 animate-spin" /></div>
              ) : codes.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-16 gap-3">
                  <div className="w-12 h-12 rounded-2xl border border-white/[0.08] bg-white/[0.03] flex items-center justify-center">
                    <Ticket className="w-5 h-5 text-white/25" />
                  </div>
                  <p className="text-sm text-white/35">Noch keine Codes erstellt</p>
                </div>
              ) : (
                <div className="divide-y divide-white/[0.04]">
                  {codes.map((c) => (
                    <div key={c.id} className={cn('flex flex-wrap items-center gap-4 px-6 py-4 transition-colors', c.active ? 'hover:bg-white/[0.02]' : 'opacity-50')}>

                      {/* Code + copy */}
                      <div className="flex items-center gap-2 min-w-[160px]">
                        <div className="flex items-center gap-1.5 rounded-xl border border-white/[0.10] bg-white/[0.04] px-3 py-1.5">
                          <Hash className="w-3 h-3 text-white/30" />
                          <span className="font-mono text-sm font-bold text-white tracking-wider">{c.code}</span>
                        </div>
                        <button
                          onClick={() => copyCode(c.id, c.code)}
                          className="p-1.5 rounded-lg text-white/30 hover:text-white/70 hover:bg-white/[0.05] transition-colors"
                          title="Code kopieren"
                        >
                          {copiedId === c.id
                            ? <Check className="w-3.5 h-3.5 text-emerald-400" />
                            : <Copy className="w-3.5 h-3.5" />}
                        </button>
                      </div>

                      {/* Plan + duration */}
                      <div className="flex items-center gap-2">
                        <PlanBadge plan={c.plan} />
                        <span className="text-xs text-white/40 border border-white/[0.08] rounded-full px-2 py-0.5">
                          {c.duration_months === 12 ? '1 Jahr' : `${c.duration_months} Monat${c.duration_months > 1 ? 'e' : ''}`}
                        </span>
                      </div>

                      {/* Uses */}
                      <div className="flex items-center gap-1.5 text-xs">
                        <div className="flex items-center gap-1 text-white/50">
                          <Users className="w-3 h-3" />
                          <span className="tabular-nums font-medium">{c.uses}</span>
                          <span className="text-white/25">/</span>
                          {c.max_uses >= 9999
                            ? <Infinity className="w-3 h-3 text-white/25" />
                            : <span className="text-white/25">{c.max_uses}</span>}
                        </div>
                        {/* Progress bar */}
                        {c.max_uses < 9999 && (
                          <div className="w-16 h-1 rounded-full bg-white/[0.06] overflow-hidden">
                            <div
                              className="h-full rounded-full bg-violet-500/60 transition-all"
                              style={{ width: `${Math.min(100, (c.uses / c.max_uses) * 100)}%` }}
                            />
                          </div>
                        )}
                      </div>

                      {/* Expiry */}
                      {c.expires_at && (
                        <div className="flex items-center gap-1 text-xs text-white/35">
                          <Calendar className="w-3 h-3" />
                          <span>bis {new Date(c.expires_at).toLocaleDateString('de-DE')}</span>
                        </div>
                      )}

                      {/* Note */}
                      {c.note && (
                        <span className="text-xs text-white/30 italic truncate max-w-[120px]">{c.note}</span>
                      )}

                      {/* Actions */}
                      <div className="ml-auto flex items-center gap-1">
                        <button
                          onClick={() => void toggleCode(c.id, !c.active)}
                          className={cn('p-2 rounded-lg transition-colors', c.active ? 'text-emerald-400 hover:bg-emerald-500/10' : 'text-white/25 hover:bg-white/[0.05]')}
                          title={c.active ? 'Deaktivieren' : 'Aktivieren'}
                        >
                          {c.active ? <ToggleRight className="w-4 h-4" /> : <ToggleLeft className="w-4 h-4" />}
                        </button>
                        <button
                          onClick={() => void deleteCode(c.id)}
                          className="p-2 rounded-lg text-white/20 hover:bg-rose-500/10 hover:text-rose-400 transition-colors"
                          title="Code löschen"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* ── User Edit Modal ── */}
      {editingUser && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
          <div className="w-full max-w-md rounded-[28px] border border-sky-400/[0.20] bg-[#0d0b18] p-7 shadow-2xl">
            <div className="relative mb-5">
              <h3 className="text-base font-bold text-white text-center">{editingUser.full_name ?? editingUser.email}</h3>
              <p className="text-xs text-white/40 text-center mt-0.5">{editingUser.email}</p>
              <button onClick={() => setEditingUser(null)} className="absolute right-0 top-0 text-white/40 hover:text-white/70 transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="mb-5">
              <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">Plan</label>
              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                {PLAN_ORDER.map(p => (
                  <button key={p} onClick={() => setEditPlan(p)}
                    className={cn('rounded-xl border py-2 text-xs font-bold transition-colors', editPlan === p ? 'border-sky-400/[0.30] bg-sky-400/[0.12] text-sky-200' : 'border-white/[0.08] bg-white/[0.02] text-white/50 hover:text-white/80')}
                  >{PLANS[p].name}</button>
                ))}
              </div>
            </div>
            <div className="mb-6">
              <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">Admin-Berechtigungen</label>
              <div className="space-y-2">
                {([
                  { key: 'can_manage_subscriptions' as const, label: 'Subscriptions verwalten' },
                  { key: 'can_manage_users' as const, label: 'Nutzer verwalten' },
                  { key: 'can_grant_admin' as const, label: 'Admin-Rechte vergeben' },
                  { key: 'can_view_analytics' as const, label: 'Analytics einsehen' },
                ]).map(({ key, label }) => (
                  <label key={key} className="flex items-center gap-3 cursor-pointer group">
                    <div onClick={() => setEditPerms(p => ({ ...p, [key]: !p[key] }))}
                      className={cn('w-4 h-4 rounded flex items-center justify-center border transition-colors cursor-pointer', editPerms[key] ? 'border-sky-400/[0.40] bg-sky-400/30' : 'border-white/[0.12] bg-white/[0.04]')}>
                      {editPerms[key] && <Check className="w-2.5 h-2.5 text-sky-200" />}
                    </div>
                    <span className="text-sm text-white/60 group-hover:text-white/80 transition-colors">{label}</span>
                  </label>
                ))}
              </div>
            </div>
            <div className="flex gap-3">
              <button onClick={() => setEditingUser(null)} className="flex-1 rounded-xl border border-white/[0.08] py-2.5 text-sm text-white/50 hover:text-white/70 transition-colors">Abbrechen</button>
              <button onClick={() => void saveUser()} disabled={saving}
                className="flex-1 rounded-xl border border-sky-400/[0.25] bg-sky-500/80 hover:bg-sky-500 py-2.5 text-sm font-semibold text-white transition-colors disabled:opacity-50">
                {saving ? 'Speichert...' : 'Speichern'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── Create Code Modal ── */}
      {showCreateCode && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
          <div className="w-full max-w-lg rounded-[28px] border border-sky-400/[0.22] bg-[#0d0b18] p-7 shadow-2xl">
            <div className="relative mb-6">
              <div className="flex items-center justify-center gap-3">
                <div className="flex h-9 w-9 items-center justify-center rounded-xl border border-sky-400/[0.20] bg-sky-400/[0.10]">
                  <Ticket className="w-4 h-4 text-sky-300" />
                </div>
                <h3 className="text-base font-bold text-white">Code erstellen</h3>
              </div>
              <button onClick={() => setShowCreateCode(false)} className="absolute right-0 top-0 text-white/40 hover:text-white/70 transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              {/* Code input */}
              <div>
                <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">Code</label>
                <div className="flex gap-2">
                  <input
                    value={newCode}
                    onChange={e => setNewCode(e.target.value.toUpperCase())}
                    placeholder="z.B. SUMMER24"
                    className="flex-1 rounded-xl border border-white/[0.10] bg-white/[0.04] px-3 py-2.5 text-center font-mono text-sm font-bold text-white placeholder:text-white/25 outline-none focus:border-sky-400/[0.30] tracking-widest transition-colors"
                  />
                  <button
                    onClick={() => setNewCode(randomCode())}
                    className="flex items-center gap-1.5 rounded-xl border border-white/[0.08] bg-white/[0.03] px-3 py-2 text-xs text-white/50 hover:text-white transition-colors"
                    title="Zufälligen Code generieren"
                  >
                    <RefreshCw className="w-3.5 h-3.5" />
                    Zufällig
                  </button>
                </div>
              </div>

              {/* Plan + Duration */}
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div>
                  <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">Plan</label>
                  <div className="flex flex-col gap-1.5">
                    {PLAN_ORDER.filter(p => p !== 'free').map(p => (
                      <button key={p} onClick={() => setNewPlan(p)}
                        className={cn('flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold transition-colors', newPlan === p ? 'border-sky-400/[0.30] bg-sky-400/[0.10] text-sky-200' : 'border-white/[0.06] bg-white/[0.02] text-white/50 hover:text-white/80')}
                      >
                        {newPlan === p && <Check className="w-3 h-3" />}
                        {PLAN_LABELS[p]}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">Dauer</label>
                  <div className="flex flex-col gap-1.5">
                    {DURATION_OPTIONS.map(d => (
                      <button key={d.value} onClick={() => setNewDuration(d.value)}
                        className={cn('flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold transition-colors', newDuration === d.value ? 'border-sky-400/[0.30] bg-sky-400/[0.10] text-sky-200' : 'border-white/[0.06] bg-white/[0.02] text-white/50 hover:text-white/80')}
                      >
                        {newDuration === d.value && <Check className="w-3 h-3" />}
                        {d.label}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              {/* Max uses + Expiry */}
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div>
                  <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">Max. Nutzungen</label>
                  <input
                    type="number"
                    min={1}
                    value={newMaxUses}
                    onChange={e => setNewMaxUses(Math.max(1, parseInt(e.target.value) || 1))}
                    className="w-full rounded-xl border border-white/[0.10] bg-white/[0.04] px-3 py-2.5 text-sm text-white outline-none focus:border-sky-400/[0.30] transition-colors"
                  />
                  <p className="mt-1 text-[10px] text-white/25">9999 = unbegrenzt</p>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">Ablaufdatum <span className="text-white/25 normal-case">(optional)</span></label>
                  <input
                    type="date"
                    value={newExpiry}
                    onChange={e => setNewExpiry(e.target.value)}
                    className="w-full rounded-xl border border-white/[0.10] bg-white/[0.04] px-3 py-2.5 text-sm text-white outline-none focus:border-sky-400/[0.30] transition-colors"
                  />
                </div>
              </div>

              {/* Note */}
              <div>
                <label className="block text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">Notiz <span className="text-white/25 normal-case">(optional)</span></label>
                <input
                  value={newNote}
                  onChange={e => setNewNote(e.target.value)}
                  placeholder="z.B. Für Beta-Tester, Newsletter-Aktion..."
                  className="w-full rounded-xl border border-white/[0.10] bg-white/[0.04] px-3 py-2.5 text-sm text-white placeholder:text-white/25 outline-none focus:border-sky-400/[0.30] transition-colors"
                />
              </div>

              {/* Preview */}
              <div className="rounded-xl border border-sky-400/[0.14] bg-sky-400/[0.04] px-4 py-3">
                <p className="text-[10px] text-sky-400/60 uppercase tracking-wider font-bold mb-1">Vorschau</p>
                <p className="text-sm text-white/70">
                  Code <span className="font-mono font-bold text-sky-300">{newCode || '—'}</span> gewährt{' '}
                  <PlanBadge plan={newPlan} className="mx-0.5 inline-flex" />{' '}
                  für {newDuration === 12 ? '1 Jahr' : `${newDuration} Monat${newDuration > 1 ? 'e' : ''}`}
                  {newMaxUses > 1 ? `, bis zu ${newMaxUses}× einlösbar` : ', einmalig einlösbar'}.
                </p>
              </div>

              {createError && (
                <p className="text-sm text-rose-400 font-medium">{createError}</p>
              )}
            </div>

            <div className="flex gap-3 mt-6">
              <button onClick={() => setShowCreateCode(false)} className="flex-1 rounded-xl border border-white/[0.08] py-2.5 text-sm text-white/50 hover:text-white/70 transition-colors">Abbrechen</button>
              <button
                onClick={() => void handleCreateCode()}
                disabled={creatingCode || !newCode.trim()}
                className="flex-1 rounded-xl border border-sky-400/[0.25] bg-sky-400/80 hover:bg-sky-400 py-2.5 text-sm font-bold text-white transition-colors disabled:opacity-40"
              >
                {creatingCode ? 'Erstellt...' : 'Code erstellen'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}