'use client';

import { useState } from 'react';
import SectionHead from '@/components/vyndr/SectionHead';
import VBtn from '@/components/vyndr/VBtn';
import { useAuth } from '@/contexts/AuthContext';

// Referral system (§12) — bring 3 friends → free Analyst. Progress is read
// from the session when available; the live invite ledger wires in later.
export default function InvitePage() {
  const { user } = useAuth();
  const [copied, setCopied] = useState(false);
  const code = (user?.email?.split('@')[0] || 'signal').replace(/[^a-z0-9]/gi, '').toUpperCase().slice(0, 10) || 'SIGNAL';
  const link = `https://vyndr.app/?ref=${code}`;
  const invited = 0;
  const goal = 3;

  const copy = () => {
    if (typeof navigator !== 'undefined' && navigator.clipboard) {
      void navigator.clipboard.writeText(link);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }
  };

  return (
    <section style={{ maxWidth: 640, margin: '0 auto', padding: '28px 16px 96px' }}>
      <SectionHead accent="var(--amber)">▚ REFERRAL</SectionHead>
      <h1 className="mono" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', margin: '8px 0 8px' }}>INVITE</h1>
      <p className="mono" style={{ fontSize: 14, color: 'var(--text-1)', lineHeight: 1.6, marginBottom: 24 }}>
        Bring <span style={{ color: 'var(--g-a)', fontWeight: 700 }}>3 friends</span> onto the signal and your Analyst plan is on the house — locked for as long as they stay.
      </p>

      {/* Progress */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <span className="label">FRIENDS JOINED</span>
          <span className="mono" style={{ fontSize: 13, fontWeight: 700, color: 'var(--g-a)' }}>{invited} / {goal}</span>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {Array.from({ length: goal }).map((_, i) => (
            <div key={i} style={{ flex: 1, height: 6, borderRadius: 4, background: i < invited ? 'var(--g-a)' : 'var(--bg-2)', border: '1px solid var(--border)', boxShadow: i < invited ? '0 0 10px rgba(0,212,160,.5)' : 'none' }} />
          ))}
        </div>
      </div>

      {/* Referral link */}
      <div style={{ marginBottom: 16 }}>
        <span className="label">YOUR LINK</span>
        <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
          <div className="mono" style={{ flex: 1, padding: '11px 14px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 6, fontSize: 13, color: 'var(--g-a)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {link}
          </div>
          <VBtn variant={copied ? 'primary' : 'outline'} onClick={copy}>{copied ? '✓ Copied' : 'Copy'}</VBtn>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 10 }}>
        <VBtn variant="primary" style={{ flex: 1 }} onClick={copy}>↗ Share your link</VBtn>
      </div>
    </section>
  );
}
