import { useState } from 'react'
import {
  Award, Star, Gift, Percent, CreditCard, Edit2, Save, Info,
  Crown, Shield, User, ChevronRight, Smartphone, Mail, QrCode,
  TrendingUp,
} from 'lucide-react'
import { cn } from '../lib/utils'

// ─── Types ────────────────────────────────────────────────────────────────────

type LevelId = 'bronze' | 'silver' | 'gold' | 'platinum'

interface LoyaltyLevel {
  id: LevelId
  name: string
  minPoints: number
  maxPoints: number | null
  discount: number      // % discount on stay
  bonusPercent: number  // % of spent amount returned as points
  perks: string[]
  color: string
  icon: React.ElementType
}

interface ProgramSettings {
  pointsPerRuble: number    // points per 1 ₽ spent
  pointValue: number        // 1 point = N rubles
  expiryMonths: number      // points expire after N months
  isActive: boolean
}

interface GuestPoints {
  id: string
  name: string
  email: string
  points: number
  totalSpent: number
  level: LevelId
}

// ─── Mock Data ────────────────────────────────────────────────────────────────

const DEFAULT_LEVELS: LoyaltyLevel[] = [
  {
    id: 'bronze',
    name: 'Бронза',
    minPoints: 0,
    maxPoints: 999,
    discount: 0,
    bonusPercent: 3,
    perks: ['Накопление бонусных баллов 3%', 'Приоритет на бесплатный Wi-Fi', 'Поздний выезд по запросу'],
    color: 'text-amber-700 dark:text-amber-500',
    icon: User,
  },
  {
    id: 'silver',
    name: 'Серебро',
    minPoints: 1000,
    maxPoints: 4999,
    discount: 5,
    bonusPercent: 5,
    perks: ['Скидка 5% на проживание', 'Накопление 5%', 'Бесплатный ранний заезд', 'Комплимент от отеля'],
    color: 'text-slate-500 dark:text-slate-400',
    icon: Shield,
  },
  {
    id: 'gold',
    name: 'Золото',
    minPoints: 5000,
    maxPoints: 14999,
    discount: 10,
    bonusPercent: 8,
    perks: ['Скидка 10% на проживание', 'Накопление 8%', 'Гарантированный апгрейд номера', 'Приветственный напиток'],
    color: 'text-yellow-500 dark:text-yellow-400',
    icon: Award,
  },
  {
    id: 'platinum',
    name: 'Платина',
    minPoints: 15000,
    maxPoints: null,
    discount: 15,
    bonusPercent: 12,
    perks: ['Скидка 15% на проживание', 'Накопление 12%', 'VIP-заезд/выезд', 'Персональный менеджер', 'Ежегодный бонус 500 баллов'],
    color: 'text-violet-500 dark:text-violet-400',
    icon: Crown,
  },
]

const DEFAULT_SETTINGS: ProgramSettings = {
  pointsPerRuble: 1,
  pointValue: 0.5,
  expiryMonths: 24,
  isActive: true,
}

const MOCK_GUESTS: GuestPoints[] = [
  { id: 'g-1', name: 'Александр Петров',  email: 'a.petrov@gmail.com',   points: 16250, totalSpent: 287400, level: 'platinum' },
  { id: 'g-4', name: 'Елена Новикова',    email: 'e.novikova@gmail.com', points: 8100,  totalSpent: 76500,  level: 'gold' },
  { id: 'g-6', name: 'Анна Лебедева',     email: 'anna.l@mail.ru',       points: 3950,  totalSpent: 132000, level: 'silver' },
  { id: 'g-2', name: 'Мария Сидорова',    email: 'm.sidorova@mail.ru',   points: 2200,  totalSpent: 98200,  level: 'silver' },
  { id: 'g-5', name: 'Игорь Волков',      email: 'i.volkov@corp.ru',     points: 780,   totalSpent: 44000,  level: 'bronze' },
  { id: 'g-3', name: 'Дмитрий Козлов',    email: 'dkozlov@yandex.ru',    points: 340,   totalSpent: 18600,  level: 'bronze' },
  { id: 'g-7', name: 'Сергей Морозов',    email: '',                     points: 120,   totalSpent: 8400,   level: 'bronze' },
]

function levelBadge(levelId: LevelId) {
  const level = DEFAULT_LEVELS.find(l => l.id === levelId)!
  const bgs: Record<LevelId, string> = {
    bronze:   'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
    silver:   'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300',
    gold:     'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
    platinum: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400',
  }
  return (
    <span className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold', bgs[levelId])}>
      <level.icon size={10} />
      {level.name}
    </span>
  )
}

// ─── Level Editor ─────────────────────────────────────────────────────────────

function LevelCard({ level, onEdit }: { level: LoyaltyLevel; onEdit: (l: LoyaltyLevel) => void }) {
  const [editing, setEditing] = useState(false)
  const [form, setForm] = useState(level)

  const save = () => { onEdit(form); setEditing(false) }

  const levelBg: Record<LevelId, string> = {
    bronze:   'from-amber-50 to-orange-50 border-amber-200 dark:from-amber-900/10 dark:to-orange-900/10 dark:border-amber-800',
    silver:   'from-slate-50 to-slate-100 border-slate-200 dark:from-slate-800/50 dark:to-slate-700/50 dark:border-slate-600',
    gold:     'from-yellow-50 to-amber-50 border-yellow-200 dark:from-yellow-900/10 dark:to-amber-900/10 dark:border-yellow-800',
    platinum: 'from-violet-50 to-purple-50 border-violet-200 dark:from-violet-900/10 dark:to-purple-900/10 dark:border-violet-800',
  }

  return (
    <div className={cn('rounded-2xl border bg-gradient-to-br p-4', levelBg[level.id])}>
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <level.icon size={20} className={level.color} />
          <span className={cn('font-bold text-base', level.color)}>{level.name}</span>
        </div>
        <button
          onClick={() => setEditing(!editing)}
          className="p-1.5 rounded-lg text-slate-400 hover:text-brand-600 hover:bg-white/60 transition-colors"
        >
          {editing ? <Save size={15} /> : <Edit2 size={15} />}
        </button>
      </div>

      {editing ? (
        <div className="space-y-2">
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="block text-xs text-slate-500 mb-1">Мин. баллов</label>
              <input type="number" className="input text-sm" value={form.minPoints}
                onChange={e => setForm(p => ({ ...p, minPoints: parseInt(e.target.value) || 0 }))} />
            </div>
            <div>
              <label className="block text-xs text-slate-500 mb-1">Скидка %</label>
              <input type="number" min={0} max={50} className="input text-sm" value={form.discount}
                onChange={e => setForm(p => ({ ...p, discount: parseInt(e.target.value) || 0 }))} />
            </div>
          </div>
          <div>
            <label className="block text-xs text-slate-500 mb-1">Начисление баллов %</label>
            <input type="number" min={0} max={20} className="input text-sm" value={form.bonusPercent}
              onChange={e => setForm(p => ({ ...p, bonusPercent: parseInt(e.target.value) || 0 }))} />
          </div>
          <button onClick={save} className="btn-primary w-full text-sm py-1.5">Сохранить</button>
        </div>
      ) : (
        <div className="space-y-1.5">
          <div className="flex justify-between text-xs">
            <span className="text-slate-500">Порог баллов</span>
            <span className="font-semibold text-slate-700 dark:text-slate-300">
              {level.minPoints.toLocaleString('ru-RU')}
              {level.maxPoints ? ` — ${level.maxPoints.toLocaleString('ru-RU')}` : '+'}
            </span>
          </div>
          <div className="flex justify-between text-xs">
            <span className="text-slate-500">Скидка на проживание</span>
            <span className={cn('font-bold', level.color)}>{level.discount}%</span>
          </div>
          <div className="flex justify-between text-xs">
            <span className="text-slate-500">Начисление баллов</span>
            <span className="font-semibold text-slate-700 dark:text-slate-300">{level.bonusPercent}% от суммы</span>
          </div>
          <div className="mt-2 pt-2 border-t border-white/50 dark:border-slate-600/50 space-y-1">
            {level.perks.map((perk, i) => (
              <div key={i} className="flex items-start gap-1.5 text-xs text-slate-600 dark:text-slate-300">
                <span className="text-emerald-500 mt-0.5 shrink-0">✓</span>
                {perk}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

// ─── Guest Portal Preview ─────────────────────────────────────────────────────

function GuestPortalPreview({ settings }: { settings: ProgramSettings }) {
  const guest = MOCK_GUESTS[0]
  const level = DEFAULT_LEVELS.find(l => l.id === guest.level)!
  const nextLevel = DEFAULT_LEVELS.find(l => l.minPoints > guest.points)
  const progressToNext = nextLevel
    ? ((guest.points - level.minPoints) / (nextLevel.minPoints - level.minPoints)) * 100
    : 100

  return (
    <div className="rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-600 p-4">
      <div className="flex items-center gap-2 mb-3">
        <Smartphone size={14} className="text-slate-400" />
        <p className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide">
          Личный кабинет гостя (превью)
        </p>
      </div>

      <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-4 text-white space-y-3">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-slate-400">Добро пожаловать,</p>
            <p className="font-bold text-sm">{guest.name.split(' ')[0]}</p>
          </div>
          <div className="text-right">
            <p className="text-xs text-slate-400">Уровень</p>
            <div className="flex items-center gap-1">
              <level.icon size={12} className={level.color} />
              <p className={cn('text-sm font-bold', level.color)}>{level.name}</p>
            </div>
          </div>
        </div>

        {/* Points balance */}
        <div className="bg-white/10 rounded-xl p-3">
          <p className="text-xs text-slate-400 mb-0.5">Накопленные баллы</p>
          <p className="text-3xl font-bold">{guest.points.toLocaleString('ru-RU')}</p>
          <p className="text-xs text-slate-400 mt-0.5">
            ≈ {Math.round(guest.points * settings.pointValue).toLocaleString('ru-RU')} ₽ к оплате
          </p>
        </div>

        {/* Progress to next level */}
        {nextLevel && (
          <div>
            <div className="flex justify-between text-xs text-slate-400 mb-1">
              <span>До {nextLevel.name}</span>
              <span>{(nextLevel.minPoints - guest.points).toLocaleString('ru-RU')} баллов</span>
            </div>
            <div className="h-2 rounded-full bg-white/20">
              <div
                className="h-2 rounded-full bg-gradient-to-r from-brand-400 to-brand-600"
                style={{ width: `${Math.min(100, progressToNext)}%` }}
              />
            </div>
          </div>
        )}

        {/* Quick perks */}
        <div className="grid grid-cols-3 gap-2">
          {[
            { icon: Percent,    label: `${level.discount}% скидка` },
            { icon: Gift,       label: 'Комплимент' },
            { icon: CreditCard, label: 'Оплата баллами' },
          ].map(p => (
            <div key={p.label} className="bg-white/5 rounded-lg p-2 text-center">
              <p.icon size={14} className="mx-auto text-brand-400 mb-1" />
              <p className="text-[10px] text-slate-300">{p.label}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="flex items-center gap-3 mt-3 pt-3 border-t border-slate-200 dark:border-slate-700">
        <QrCode size={14} className="text-slate-400 shrink-0" />
        <p className="text-xs text-slate-500 dark:text-slate-400">
          Гость получает ссылку на личный кабинет по email после первого бронирования.
          Доступ — без пароля, по magic link.
        </p>
      </div>
    </div>
  )
}

// ─── Main Page ────────────────────────────────────────────────────────────────

export function LoyaltyPage() {
  const [levels, setLevels]     = useState<LoyaltyLevel[]>(DEFAULT_LEVELS)
  const [settings, setSettings] = useState<ProgramSettings>(DEFAULT_SETTINGS)
  const [editSettings, setEditSettings] = useState(false)

  const updateLevel = (updated: LoyaltyLevel) =>
    setLevels(prev => prev.map(l => l.id === updated.id ? updated : l))

  const totalGuests   = MOCK_GUESTS.length
  const activeGuests  = MOCK_GUESTS.filter(g => g.points > 0).length
  const totalPoints   = MOCK_GUESTS.reduce((s, g) => s + g.points, 0)

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Программа лояльности</h1>
          <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
            Уровни, бонусные баллы, личный кабинет гостя
          </p>
        </div>
        <div className="flex items-center gap-3">
          <span className={cn(
            'px-3 py-1.5 rounded-xl text-sm font-medium border',
            settings.isActive
              ? 'bg-emerald-50 text-emerald-700 border-emerald-300 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-700'
              : 'bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-700 dark:text-slate-400 dark:border-slate-600',
          )}>
            {settings.isActive ? '● Программа активна' : '○ Программа отключена'}
          </span>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-4 gap-4">
        {[
          { label: 'Участников программы', value: activeGuests,                        icon: User,       color: 'text-brand-600 dark:text-brand-400', bg: 'bg-brand-50 dark:bg-brand-900/20' },
          { label: 'Всего баллов в обороте', value: totalPoints.toLocaleString('ru-RU'), icon: TrendingUp, color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20' },
          { label: 'Платиновых участников',  value: MOCK_GUESTS.filter(g => g.level === 'platinum').length, icon: Crown, color: 'text-violet-600 dark:text-violet-400', bg: 'bg-violet-50 dark:bg-violet-900/20' },
          { label: 'Средний балс/гость',     value: Math.round(totalPoints / totalGuests).toLocaleString('ru-RU'), icon: Star, color: 'text-yellow-600 dark:text-yellow-400', bg: 'bg-yellow-50 dark:bg-yellow-900/20' },
        ].map(s => (
          <div key={s.label} className="card p-4 flex items-center gap-3">
            <div className={cn('w-10 h-10 rounded-xl flex items-center justify-center shrink-0', s.bg)}>
              <s.icon size={18} className={s.color} />
            </div>
            <div>
              <p className="text-xs text-slate-500 dark:text-slate-400 leading-tight">{s.label}</p>
              <p className="text-xl font-bold text-slate-900 dark:text-slate-100 mt-0.5">{s.value}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div className="xl:col-span-2 space-y-5">
          {/* Program settings */}
          <div className="card p-4">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-sm font-semibold text-slate-700 dark:text-slate-300">Настройки программы</h2>
              <button onClick={() => setEditSettings(!editSettings)} className="btn-secondary flex items-center gap-1.5 text-sm">
                {editSettings ? <><Save size={13} /> Сохранить</> : <><Edit2 size={13} /> Изменить</>}
              </button>
            </div>
            <div className="grid grid-cols-3 gap-4">
              {[
                {
                  label: 'Начисление',
                  desc: `${settings.pointsPerRuble} балл за 1 ₽`,
                  field: 'pointsPerRuble' as const,
                  unit: 'балл/₽',
                },
                {
                  label: 'Ценность балла',
                  desc: `1 балл = ${settings.pointValue} ₽`,
                  field: 'pointValue' as const,
                  unit: '₽',
                },
                {
                  label: 'Срок действия',
                  desc: `${settings.expiryMonths} месяцев`,
                  field: 'expiryMonths' as const,
                  unit: 'мес.',
                },
              ].map(item => (
                <div key={item.field}>
                  <p className="text-xs text-slate-500 dark:text-slate-400">{item.label}</p>
                  {editSettings ? (
                    <div className="flex items-center gap-1 mt-1">
                      <input
                        type="number" step="0.1" min={0}
                        className="input text-sm"
                        value={settings[item.field]}
                        onChange={e => setSettings(prev => ({
                          ...prev,
                          [item.field]: parseFloat(e.target.value) || 0,
                        }))}
                      />
                      <span className="text-xs text-slate-400 shrink-0">{item.unit}</span>
                    </div>
                  ) : (
                    <p className="text-base font-semibold text-slate-900 dark:text-slate-100 mt-0.5">{item.desc}</p>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Level cards */}
          <div>
            <h2 className="text-sm font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-3">
              Уровни программы
            </h2>
            <div className="grid grid-cols-2 gap-3">
              {levels.map(level => (
                <LevelCard key={level.id} level={level} onEdit={updateLevel} />
              ))}
            </div>
          </div>

          {/* Top guests */}
          <div className="card overflow-hidden">
            <div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700">
              <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300">Топ участников</h3>
            </div>
            <table className="w-full">
              <thead>
                <tr className="bg-slate-50 dark:bg-slate-700/30">
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Гость</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Уровень</th>
                  <th className="px-4 py-2 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">Баллы</th>
                  <th className="px-4 py-2 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">Потрачено</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 dark:divide-slate-700/50">
                {MOCK_GUESTS.sort((a, b) => b.points - a.points).map(g => (
                  <tr key={g.id} className="hover:bg-slate-50 dark:hover:bg-slate-700/20 transition-colors">
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <div className="w-7 h-7 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center shrink-0">
                          <span className="text-xs font-bold text-brand-600 dark:text-brand-400">
                            {g.name.split(' ').map(p => p[0]).join('').slice(0, 2)}
                          </span>
                        </div>
                        <span className="text-sm text-slate-700 dark:text-slate-300">{g.name}</span>
                      </div>
                    </td>
                    <td className="px-4 py-3">{levelBadge(g.level)}</td>
                    <td className="px-4 py-3 text-right">
                      <span className="text-sm font-semibold text-slate-900 dark:text-slate-100">
                        {g.points.toLocaleString('ru-RU')}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-right">
                      <span className="text-sm text-slate-600 dark:text-slate-400">
                        {g.totalSpent.toLocaleString('ru-RU')} ₽
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Right column */}
        <div className="space-y-4">
          {/* Guest portal preview */}
          <GuestPortalPreview settings={settings} />

          {/* Redemption info */}
          <div className="card p-4 space-y-3">
            <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300">Как работает программа</h3>
            {[
              { icon: CreditCard, text: 'При каждом бронировании гостю начисляются баллы пропорционально потраченной сумме' },
              { icon: Percent, text: 'Накопленные баллы можно списать при следующем бронировании' },
              { icon: Mail, text: 'После первого визита гость получает email с ссылкой на личный кабинет' },
              { icon: Award, text: 'При достижении нового уровня приходит уведомление с перечнем привилегий' },
            ].map((item, i) => (
              <div key={i} className="flex items-start gap-2.5">
                <div className="w-6 h-6 rounded-lg bg-brand-50 dark:bg-brand-900/20 flex items-center justify-center shrink-0 mt-0.5">
                  <item.icon size={12} className="text-brand-600 dark:text-brand-400" />
                </div>
                <p className="text-xs text-slate-600 dark:text-slate-400">{item.text}</p>
              </div>
            ))}
          </div>

          <div className="flex items-start gap-3 p-3 rounded-xl bg-brand-50 dark:bg-brand-900/10 border border-brand-200 dark:border-brand-800">
            <Info size={14} className="text-brand-600 dark:text-brand-400 mt-0.5 shrink-0" />
            <p className="text-xs text-brand-700 dark:text-brand-400">
              В будущих версиях баллы будут работать во всех отелях сети HotelSync — единая программа для всего бренда.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}