/* ============================================================
   studio-profile.jsx — Профиль + покупка алмазов/подписок/монет
   ============================================================ */

const { useState, useEffect } = React;
const BOT_USERNAME_PROF = 'AITovarixBot';

/* ─── Telegram виджет привязки ─── */
function TelegramLinkWidget({ linkToken, onSuccess }) {
  const toast = useToast();

  useEffect(() => {
    window.onTelegramLinkAuth = async function(tgData) {
      try {
        const r = await fetch('/api/auth/telegram', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ...tgData, link_token: linkToken }),
          credentials: 'include',
        });
        const data = await r.json();
        if (!r.ok) { toast(data.error || 'Ошибка привязки', 'warn'); return; }
        toast('Telegram привязан! ✅', 'ok');
        onSuccess();
      } catch { toast('Ошибка сети', 'warn'); }
    };

    const script = document.createElement('script');
    script.src = 'https://telegram.org/js/telegram-widget.js?22';
    script.setAttribute('data-telegram-login', BOT_USERNAME_PROF);
    script.setAttribute('data-size', 'large');
    script.setAttribute('data-onauth', 'onTelegramLinkAuth(user)');
    script.setAttribute('data-request-access', 'write');
    script.async = true;

    const container = document.getElementById('tg-link-widget');
    if (container) { container.innerHTML = ''; container.appendChild(script); }

    return () => { delete window.onTelegramLinkAuth; };
  }, [linkToken]);

  return <div id="tg-link-widget" style={{ display: 'flex', justifyContent: 'center', minHeight: 44 }} />;
}

const PROFILE_DEFAULT_PRICES = {
  subPro: 120, subBusiness: 600, diamondsPro: 20, diamondsBusiness: 200,
  diamondRub: 7, diamondStars: 3, musicPack5: 95, musicPack10: 190, musicPack20: 380,
};

function ProfilePage() {
  const { user, onLogout, API_BASE, updateUser } = useAuth();
  const toast = useToast();

  /* Динамические цены из API (как в Mini App, тот же источник настроек) */
  const [prices, setPrices] = useState(PROFILE_DEFAULT_PRICES);
  useEffect(() => {
    fetch(`${API_BASE}/api/tg/prices`)
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setPrices({ ...PROFILE_DEFAULT_PRICES, ...d }); })
      .catch(() => {});
  }, []);

  /* Пакеты алмазов: количество фиксировано, цена = кол-во × курс */
  const diamondPacks = [10, 30, 50, 100, 200, 500].map(d => ({
    diamonds: d, label: `${d} 💎`, price: d * prices.diamondRub,
  }));

  /* Цены подписок из настроек */
  const subPrice = { pro: prices.subPro, business: prices.subBusiness };
  const subDiamonds = { pro: prices.diamondsPro, business: prices.diamondsBusiness };

  /* Музыкальные пакеты */
  const musicPacks = [
    { coins: 5,  price: prices.musicPack5 },
    { coins: 10, price: prices.musicPack10 },
    { coins: 20, price: prices.musicPack20 },
  ];

  function initials(name) {
    if (!name) return '?';
    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
  }

  async function buyDiamonds(pack) {
    try {
      const r = await fetch(`${API_BASE}/api/payment/create-invoice-link`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ diamonds: pack.diamonds }),
        credentials: 'include',
      });
      const data = await r.json();
      if (data.confirmationUrl) {
        window.open(data.confirmationUrl, '_blank');
        toast(`Откройте ссылку для покупки ${pack.diamonds} 💎`, 'pay');
      } else if (data.invoiceLink) {
        window.open(data.invoiceLink, '_blank');
        toast('Откройте ссылку для оплаты', 'pay');
      } else {
        toast(data.error || 'Ошибка', 'warn');
      }
    } catch { toast('Ошибка сети', 'warn'); }
  }

  async function buySubscription(planId) {
    try {
      const r = await fetch(`${API_BASE}/api/payment/subscription-invoice-link`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ plan: planId }),
        credentials: 'include',
      });
      const data = await r.json();
      if (data.confirmationUrl) {
        window.open(data.confirmationUrl, '_blank');
        toast('Откройте ссылку для оплаты подписки', 'pay');
      } else {
        toast(data.error || 'Ошибка', 'warn');
      }
    } catch { toast('Ошибка сети', 'warn'); }
  }

  async function buyMusicCoins(pack) {
    try {
      const r = await fetch(`${API_BASE}/api/payment/music-invoice-link`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ coins: pack.coins }),
        credentials: 'include',
      });
      const data = await r.json();
      if (data.confirmationUrl) {
        window.open(data.confirmationUrl, '_blank');
        toast(`Откройте ссылку для покупки ${pack.coins} 🎵`, 'pay');
      } else {
        toast(data.error || 'Ошибка', 'warn');
      }
    } catch { toast('Ошибка сети', 'warn'); }
  }

  const [linkToken, setLinkToken] = useState(null);
  const [linkLoading, setLinkLoading] = useState(false);

  async function startTgLink() {
    setLinkLoading(true);
    try {
      const r = await fetch(`${API_BASE}/api/auth/tg-link-token`, { method: 'POST', credentials: 'include' });
      const data = await r.json();
      if (!r.ok) { toast(data.error || 'Ошибка', 'warn'); return; }
      setLinkToken(data.linkToken);
    } catch { toast('Ошибка сети', 'warn'); }
    finally { setLinkLoading(false); }
  }

  const name = user?.web_name || user?.first_name || 'Пользователь';
  const plan = user?.subscription_plan || 'free';
  const planLabel = plan === 'pro' ? '⭐ Pro' : plan === 'business' ? '⭐ Business' : 'Free';

  return (
    <div className="profile">
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">👤 Профиль</h1>
        </div>
      </div>

      {/* Аккаунт */}
      <div className="prof-section">
        <div className="block-title">Аккаунт</div>
        <div className="glass prof-account">
          <div className="avatar avatar-lg">{initials(name)}</div>
          <div className="prof-account-meta">
            <div className="pa-name">{name}</div>
            {user?.email && <div className="muted" style={{ fontSize: 14 }}>{user.email}</div>}
            <div style={{ marginTop: 8 }}>
              <span className={`pill${plan !== 'free' ? ' pill-pro' : ' pill-free'}`}>{planLabel}</span>
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onLogout}>Выйти</button>
        </div>
      </div>

      {/* Привязка Telegram — только для email-пользователей */}
      {user?.email && !user?.tgId && (
        <div className="prof-section">
          <div className="block-title">Telegram</div>
          <div className="glass" style={{ padding: '24px 28px' }}>
            <p className="muted" style={{ fontSize: 14, marginBottom: 16, lineHeight: 1.5 }}>
              Привяжи Telegram — история, алмазы и подписка станут едины на сайте и в боте.
            </p>
            {!linkToken ? (
              <button className="btn btn-ghost btn-sm" onClick={startTgLink} disabled={linkLoading}>
                {linkLoading ? <Spinner sm /> : '🔗 Привязать Telegram'}
              </button>
            ) : (
              <TelegramLinkWidget
                linkToken={linkToken}
                onSuccess={() => { setLinkToken(null); window.location.reload(); }}
              />
            )}
          </div>
        </div>
      )}

      {/* Баланс алмазов */}
      <div className="prof-section">
        <div className="block-title">Алмазы 💎</div>
        <div className="glass prof-balance">
          <div className="prof-balance-top">
            <div>
              <div className="muted" style={{ fontSize: 13, marginBottom: 6 }}>На балансе</div>
              <div style={{ fontSize: 38, fontWeight: 800 }}>💎 {user?.diamonds ?? 0}</div>
            </div>
            <div className="muted" style={{ fontSize: 13, textAlign: 'right' }}>
              <div>1 💎 = {prices.diamondRub}₽</div>
              <div>1 💎 = {prices.diamondStars} Stars</div>
            </div>
          </div>
          <div className="packs">
            {diamondPacks.map(p => (
              <button key={p.diamonds} className="pack" onClick={() => buyDiamonds(p)}>
                <span className="pack-amt">{p.label}</span>
                <span className="pack-price">{p.price}₽</span>
                <span className="pack-note muted">алмазов</span>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Подписка */}
      <div className="prof-section">
        <div className="block-title">Подписка</div>
        <div className="grid-2 sub-grid">
          {PLANS.filter(p => p.id !== 'free').map(p => (
            <div key={p.id} className={`glass sub-card${plan === p.id ? ' active' : ''}`}>
              <div className="sub-head">
                {plan === p.id && <span className="badge badge-accent" style={{ marginBottom: 10, display: 'inline-flex' }}>Текущий план</span>}
                <div className="plan-name">{p.name}</div>
                <div className="plan-price">
                  <span className="plan-amt">{subPrice[p.id] ?? p.price}₽</span>
                  <span className="muted" style={{ fontSize: 13 }}>/мес</span>
                </div>
                <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>+{subDiamonds[p.id] ?? 0} 💎 / мес</div>
              </div>
              <ul className="plan-feats" style={{ flex: 1 }}>
                {p.features.map(f => (
                  <li key={f}>
                    <span className="check">✓</span>
                    <span style={{ fontSize: 13.5 }}>{f}</span>
                  </li>
                ))}
              </ul>
              {plan !== p.id && (
                <button
                  className={`btn btn-block${p.hot ? ' btn-accent' : ' btn-ghost'}`}
                  style={{ marginTop: 16 }}
                  onClick={() => buySubscription(p.id)}
                >
                  {p.cta}
                </button>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Музыкальные монеты */}
      <div className="prof-section">
        <div className="block-title">Музыкальные монеты 🎵</div>
        <div className="glass prof-balance">
          <div className="prof-balance-top">
            <div>
              <div className="muted" style={{ fontSize: 13, marginBottom: 6 }}>На балансе</div>
              <div style={{ fontSize: 38, fontWeight: 800 }}>🎵 {user?.musicCredits ?? 0}</div>
            </div>
            <div className="muted" style={{ fontSize: 13 }}>1 монета = 1 трек</div>
          </div>
          <div className="packs">
            {musicPacks.map(p => (
              <button key={p.coins} className="pack" onClick={() => buyMusicCoins(p)}>
                <span className="pack-amt">🎵 {p.coins}</span>
                <span className="pack-price">{p.price}₽</span>
                <span className="pack-note muted">монет</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}