import { Header } from '@/components/layout/Header'
import { Share2, Copy, Check } from 'lucide-react'
import { useState } from 'react'
import { useAuthStore } from '@/store'

export default function Referral() {
  const { user } = useAuthStore()
  const [copied, setCopied] = useState(false)
  const referralLink = user ? `https://h2h.bet/ref/${user.username}` : 'https://h2h.bet/ref/YOURCODE'

  const handleCopy = () => {
    navigator.clipboard.writeText(referralLink)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />

      {/* Hero Section */}
      <div className="bg-gradient-to-r from-purple-900 to-purple-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-purple-500/20 text-purple-300 px-4 py-2 rounded-full mb-6">
              <Share2 size={20} />
              <span className="font-medium">Referral Program</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Invite Friends, Earn Rewards
            </h1>
            <p className="text-purple-100 text-lg mb-8">
              Share your referral link and earn either a commission rebate or a one-time reward for each friend who joins.
            </p>
          </div>
        </div>
      </div>

      {/* Referral Link Box */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8">
        <div className="bg-white rounded-xl shadow-lg p-6 max-w-2xl mx-auto">
          <h3 className="font-bold text-gray-900 mb-4">Your Referral Link</h3>
          <div className="flex gap-2">
            <input
              type="text"
              value={referralLink}
              readOnly
              className="flex-1 bg-gray-100 rounded-lg px-4 py-3 text-gray-700 font-mono text-sm"
            />
            <button
              onClick={handleCopy}
              className="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2"
            >
              {copied ? <Check size={18} /> : <Copy size={18} />}
              {copied ? 'Copied!' : 'Copy'}
            </button>
          </div>
          {!user && (
            <p className="text-sm text-gray-500 mt-3">
              Sign in to get your personalized referral link
            </p>
          )}
        </div>
      </div>

      {/* Reward Options */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <h2 className="text-2xl font-bold text-gray-900 text-center mb-12">Choose Your Reward Type</h2>
        <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
          <div className="bg-white rounded-xl shadow-sm p-8 border-2 border-purple-500">
            <div className="text-4xl mb-4">💰</div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">Commission Rebate</h3>
            <p className="text-gray-600 mb-4">
              Earn 20% of your friend's betting fees forever. The more they bet, the more you earn.
            </p>
            <div className="text-2xl font-bold text-purple-600">20% Lifetime</div>
          </div>
          <div className="bg-white rounded-xl shadow-sm p-8">
            <div className="text-4xl mb-4">🎁</div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">One-Time Reward</h3>
            <p className="text-gray-600 mb-4">
              Get an instant $25 bonus when your friend makes their first bet of $50 or more.
            </p>
            <div className="text-2xl font-bold text-green-600">$25 Instant</div>
          </div>
        </div>
      </div>

      {/* Stats */}
      {user && (
        <div className="bg-white py-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-bold text-gray-900 text-center mb-12">Your Referral Stats</h2>
            <div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
              <div className="text-center">
                <p className="text-3xl font-bold text-gray-900">0</p>
                <p className="text-gray-600">Friends Invited</p>
              </div>
              <div className="text-center">
                <p className="text-3xl font-bold text-green-600">$0</p>
                <p className="text-gray-600">Total Earned</p>
              </div>
              <div className="text-center">
                <p className="text-3xl font-bold text-purple-600">0</p>
                <p className="text-gray-600">Pending Rewards</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
