'use client';

import { useState, useEffect } from 'react';
import { getReferralProfile, getReferralStats } from '@/api/referrals';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
import { useToast } from '@/contexts/ToastContext';

const formatCurrency = (v: number) =>
  new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB', maximumFractionDigits: 0 }).format(v);

export function ReferralsPageContent() {
  const { showToast } = useToast();
  const [profile, setProfile] = useState<any>(null);
  const [stats, setStats] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    Promise.all([
      getReferralProfile().then(setProfile),
      getReferralStats().then(setStats),
    ])
      .finally(() => setLoading(false));
  }, []);

  const copyLink = () => {
    if (profile?.referral_link) {
      navigator.clipboard.writeText(profile.referral_link);
      setCopied(true);
      showToast('Реферальная ссылка скопирована', 'success');
      setTimeout(() => setCopied(false), 2000);
    }
  };

  if (loading) {
    return <LoadingSpinner size="medium" />;
  }

  if (!profile) {
    return (
      <p style={{ color: 'var(--md-sys-color-on-surface-variant)', fontSize: 14 }}>
        Реферальная программа недоступна
      </p>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div>
        <div
          style={{
            fontSize: 11,
            fontWeight: 600,
            letterSpacing: '0.05em',
            color: 'var(--md-sys-color-on-surface-variant)',
            marginBottom: 8,
          }}
        >
          РЕФЕРАЛЬНАЯ ССЫЛКА
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <input
            type="text"
            readOnly
            value={profile.referral_link || ''}
            style={{
              flex: 1,
              padding: '12px 16px',
              borderRadius: 12,
              border: '1px solid var(--md-sys-color-outline)',
              background: 'var(--md-sys-color-surface-container-low)',
              color: 'var(--md-sys-color-on-surface)',
              fontSize: 14,
            }}
          />
          <button
            type="button"
            onClick={copyLink}
            style={{
              padding: '12px 20px',
              borderRadius: 12,
              border: 'none',
              background: 'var(--md-sys-color-primary)',
              color: 'var(--md-sys-color-on-primary)',
              fontSize: 14,
              fontWeight: 500,
              cursor: 'pointer',
            }}
          >
            {copied ? 'Скопировано' : 'Копировать'}
          </button>
        </div>
        {profile.referral_code && (
          <p style={{ fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)', marginTop: 8 }}>
            Код: <strong>{profile.referral_code}</strong>
          </p>
        )}
      </div>
      {stats && (
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
            gap: 12,
          }}
        >
          <div className="ios26-panel" style={{ padding: 16 }}>
            <div style={{ fontSize: 11, color: 'var(--md-sys-color-on-surface-variant)', marginBottom: 4 }}>
              Уровень
            </div>
            <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--md-sys-color-on-surface)' }}>
              {stats.current_level?.name || '-'}
            </div>
          </div>
          <div className="ios26-panel" style={{ padding: 16 }}>
            <div style={{ fontSize: 11, color: 'var(--md-sys-color-on-surface-variant)', marginBottom: 4 }}>
              Баллы
            </div>
            <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--md-sys-color-on-surface)' }}>
              {stats.total_points ?? 0}
            </div>
          </div>
          <div className="ios26-panel" style={{ padding: 16 }}>
            <div style={{ fontSize: 11, color: 'var(--md-sys-color-on-surface-variant)', marginBottom: 4 }}>
              Рефералов
            </div>
            <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--md-sys-color-on-surface)' }}>
              {stats.referrals?.total ?? 0}
            </div>
          </div>
          <div className="ios26-panel" style={{ padding: 16 }}>
            <div style={{ fontSize: 11, color: 'var(--md-sys-color-on-surface-variant)', marginBottom: 4 }}>
              Заработано
            </div>
            <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--md-sys-color-primary)' }}>
              {formatCurrency(stats.earnings?.total ?? stats.bonus_account?.balance ?? 0)}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}