'use client';

import Link from 'next/link';
import {
  LayoutDashboard,
  GitBranch,
  DollarSign,
  History,
  BarChart3,
  Share2,
  ArrowRight,
  Users,
  TrendingUp,
  Gift,
  Target,
  Award,
  Copy,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { StatCard } from '@/components/ui/stat-card';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const REFERRAL_SECTIONS = [
  {
    href: '/dashboard/referral/dashboard',
    label: 'Dashboard',
    description: 'Overview of your referrals, earnings, and stats',
    icon: LayoutDashboard,
    color: 'text-blue-600 bg-blue-100 dark:bg-blue-500/15 dark:text-blue-300',
  },
  {
    href: '/dashboard/referral/tree',
    label: 'Referral Tree',
    description: 'Visualize your referral network',
    icon: GitBranch,
    color: 'text-emerald-600 bg-emerald-100 dark:bg-emerald-500/15 dark:text-emerald-300',
  },
  {
    href: '/dashboard/referral/income',
    label: 'Income',
    description: 'Track commissions and earnings',
    icon: DollarSign,
    color: 'text-amber-600 bg-amber-100 dark:bg-amber-500/15 dark:text-amber-300',
  },
  {
    href: '/dashboard/referral/history',
    label: 'History',
    description: 'Users who signed up through your link',
    icon: History,
    color: 'text-violet-600 bg-violet-100 dark:bg-violet-500/15 dark:text-violet-300',
  },
  {
    href: '/dashboard/referral/statistics',
    label: 'Statistics',
    description: 'Detailed analytics and performance metrics',
    icon: BarChart3,
    color: 'text-cyan-600 bg-cyan-100 dark:bg-cyan-500/15 dark:text-cyan-300',
  },
  {
    href: '/dashboard/referral/sharing',
    label: 'Share & Invite',
    description: 'Share your referral link and earn commissions',
    icon: Share2,
    color: 'text-pink-600 bg-pink-100 dark:bg-pink-500/15 dark:text-pink-300',
  },
];

export default function UserReferralPage() {
  const sysConfig = useSystemConfig();
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-ink">Referral Center</h1>
        <p className="mt-1 text-sm text-ink-muted">
          Manage your referrals, track income, and share your referral link
        </p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <StatCard label="Total Referrals" value="0" icon={Users} iconClass="bg-blue-100 text-blue-600 dark:bg-blue-500/15 dark:text-blue-300" />
        <StatCard label="Active Referrals" value="0" icon={TrendingUp} iconClass="bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300" />
        <StatCard label="Total Earned" value="0.00" icon={Gift} iconClass="bg-amber-100 text-amber-600 dark:bg-amber-500/15 dark:text-amber-300" />
      </div>

      {/* How it works */}
      <Card>
        <CardHeader>
          <CardTitle>How Referrals Work</CardTitle>
          <CardDescription className="mt-1">Earn rewards by inviting friends to {sysConfig.projectName}</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div className="flex items-start gap-3 rounded-xl border border-line bg-surface-raised p-4">
              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-100 text-primary-600 dark:bg-primary-500/15 dark:text-primary-300">
                <Target className="h-4 w-4" />
              </div>
              <div>
                <p className="text-sm font-medium text-ink">Share Your Link</p>
                <p className="text-xs text-ink-muted mt-1">Invite friends using your unique referral link</p>
              </div>
            </div>
            <div className="flex items-start gap-3 rounded-xl border border-line bg-surface-raised p-4">
              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300">
                <Users className="h-4 w-4" />
              </div>
              <div>
                <p className="text-sm font-medium text-ink">Friends Sign Up</p>
                <p className="text-xs text-ink-muted mt-1">They create an account and complete verification</p>
              </div>
            </div>
            <div className="flex items-start gap-3 rounded-xl border border-line bg-surface-raised p-4">
              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-600 dark:bg-amber-500/15 dark:text-amber-300">
                <Award className="h-4 w-4" />
              </div>
              <div>
                <p className="text-sm font-medium text-ink">Earn Rewards</p>
                <p className="text-xs text-ink-muted mt-1">Get commissions when eligible activity is completed</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Sections Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {REFERRAL_SECTIONS.map((section) => {
          const Icon = section.icon;
          return (
            <Link
              key={section.href}
              href={section.href}
              className={`group rounded-xl border border-line bg-surface p-5 transition-all hover:shadow-lg hover:border-primary-500/30`}
            >
              <div className={`mb-4 flex h-12 w-12 items-center justify-center rounded-lg ${section.color}`}>
                <Icon className="h-6 w-6" />
              </div>
              <h2 className="text-lg font-semibold text-ink">{section.label}</h2>
              <p className="mt-1 text-sm text-ink-muted">{section.description}</p>
              <div className="mt-4 flex items-center gap-1 text-xs font-medium text-primary-600 transition-colors group-hover:text-primary-700">
                Explore <ArrowRight className="h-3 w-3" />
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}