'use client';
// Invite.tsx — 邀请返利（邀请链接 + 统计 + 记录）。承袭 UCInvite。
import React, { useState } from 'react';
import { Icon } from './icons';
import { card } from './shared';
import type { TFn } from '../lib/i18n';

export default function Invite({ t }: { t: TFn }) {
  const [copied, setCopied] = useState(false);
  const link = 'https://pangolin.vpn/r/PG8F3K';
  const records = [
    { mail: 'k***@gmail.com', date: '2026-06-08', paid: true },
    { mail: 'w***@outlook.com', date: '2026-06-05', paid: false },
    { mail: 'z***@qq.com', date: '2026-05-30', paid: true },
  ];

  async function copy() {
    try {
      await navigator.clipboard?.writeText(link);
    } catch {
      /* ignore */
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 680 }}>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 25, fontWeight: 700, color: 'var(--fg1)' }}>{t('inviteTitle')}</div>
        <div style={{ fontSize: 13, color: 'var(--fg3)', marginTop: 5, lineHeight: 1.6 }}>{t('inviteSub')}</div>
      </div>
      <div style={{ ...card, padding: '18px 20px' }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--fg2)', marginBottom: 8 }}>{t('inviteLink')}</div>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 9, background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', padding: '11px 13px', minWidth: 0 }}>
            <Icon name="gift" size={15} color="var(--fg3)" />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--fg1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link}</span>
          </div>
          <button onClick={copy} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, border: 'none', borderRadius: 'var(--radius-md)', padding: '0 18px', background: 'var(--accent)', color: '#fff', fontWeight: 700, fontSize: 13.5, cursor: 'pointer', flexShrink: 0 }}>
            <Icon name={copied ? 'check' : 'copy'} size={15} color="#fff" />
            {copied ? t('subCopied') : t('subCopy')}
          </button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))', gap: 14 }}>
        {[[t('invited'), '8'], [t('paidUsers'), '3'], [t('earned'), '¥45']].map(([l, v]) => (
          <div key={l} style={{ ...card, padding: '16px 18px' }}>
            <div style={{ fontSize: 12, color: 'var(--fg3)', fontWeight: 600 }}>{l}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 23, fontWeight: 500, color: 'var(--fg1)', marginTop: 7 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ ...card, overflow: 'hidden' }}>
        <div style={{ padding: '13px 18px', fontSize: 13.5, fontWeight: 700, color: 'var(--fg1)', borderBottom: '1px solid var(--border)' }}>{t('inviteRecord')}</div>
        {records.map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 18px', borderBottom: i < records.length - 1 ? '1px solid var(--border)' : 'none' }}>
            <span style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg1)' }}>{r.mail}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg3)' }}>{r.date}</span>
            <span style={{ fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 999, background: r.paid ? 'var(--success-subtle)' : 'var(--bg-subtle)', color: r.paid ? 'var(--success)' : 'var(--fg3)' }}>
              {r.paid ? t('recPaid') : t('recRegistered')}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}