'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, BarChart3, AlertCircle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { getReferralStatistics } from '@/services/referral/referral.service';
import { formatCurrency } from '@/lib/utils';

export default function ReferralStatisticsPage() {
  const [data, setData] = useState<Awaited<ReturnType<typeof getReferralStatistics>> | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await getReferralStatistics();
        if (!cancelled) setData(res);
      } catch (err: any) {
        if (!cancelled) setError(err?.message || 'Failed to load statistics');
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="space-y-6">
      <Link href="/dashboard/referral" className="inline-flex items-center gap-1 text-sm text-ink-muted hover:text-ink">
        <ArrowLeft className="h-4 w-4" /> Back to Referral Center
      </Link>
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-ink">Referral Statistics</h1>
        <p className="mt-1 text-sm text-ink-muted">Detailed analytics and performance metrics</p>
      </div>

      {error && (
        <div className="flex items-center gap-2 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-300">
          <AlertCircle className="h-4 w-4" /> {error}
        </div>
      )}

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardContent className="pt-6">
            <p className="text-xs uppercase tracking-wide text-ink-muted">Daily</p>
            <p className="mt-1 text-2xl font-bold text-ink">{loading ? '…' : data?.dailyReferrals ?? 0}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <p className="text-xs uppercase tracking-wide text-ink-muted">Weekly</p>
            <p className="mt-1 text-2xl font-bold text-ink">{loading ? '…' : data?.weeklyReferrals ?? 0}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <p className="text-xs uppercase tracking-wide text-ink-muted">Monthly</p>
            <p className="mt-1 text-2xl font-bold text-ink">{loading ? '…' : data?.monthlyReferrals ?? 0}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <p className="text-xs uppercase tracking-wide text-ink-muted">Total</p>
            <p className="mt-1 text-2xl font-bold text-ink">{loading ? '…' : data?.totalReferrals ?? 0}</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="h-4 w-4" /> Earnings
          </CardTitle>
          <CardDescription className="mt-1">Conversion and average commission</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <div className="flex justify-between">
            <span className="text-ink-muted">Conversion rate</span>
            <span className="font-medium text-ink">{loading ? '…' : `${((data?.conversionRate ?? 0) * 100).toFixed(1)}%`}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-ink-muted">Average commission per referral</span>
            <span className="font-medium text-ink">{loading ? '…' : formatCurrency(data?.averageCommissionPerReferral ?? 0)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-ink-muted">Total commission earned</span>
            <span className="font-medium text-ink">{loading ? '…' : formatCurrency(data?.totalCommissionEarned ?? 0)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-ink-muted">Pending</span>
            <span className="font-medium text-ink">{loading ? '…' : formatCurrency(data?.pendingCommission ?? 0)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-ink-muted">Paid</span>
            <span className="font-medium text-ink">{loading ? '…' : formatCurrency(data?.paidCommission ?? 0)}</span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}