'use client';

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

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

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

  const total = data.reduce((sum, r) => sum + (r.amount ?? 0), 0);

  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 Income</h1>
        <p className="mt-1 text-sm text-ink-muted">Track your commissions and earnings</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>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <DollarSign className="h-4 w-4" /> Total Earned
          </CardTitle>
          <CardDescription className="mt-1">{loading ? 'Loading…' : `${data.length} commission record(s)`}</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-3xl font-bold text-ink">{formatCurrency(total)}</p>
        </CardContent>
      </Card>

      {!loading && data.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Commission History</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="divide-y divide-line">
              {data.map((row) => (
                <div key={row.id} className="flex items-center justify-between py-3 text-sm">
                  <div>
                    <p className="font-medium text-ink">{formatCurrency(row.amount)} {row.currency}</p>
                    <p className="text-xs text-ink-muted">
                      Rate {(row.commissionRate * 100).toFixed(2)}% · {row.referral?.referred?.email ?? 'Referral'}
                    </p>
                  </div>
                  <span className="text-xs text-ink-faint">{new Date(row.createdAt).toLocaleDateString()}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {!loading && data.length === 0 && !error && (
        <Card>
          <CardContent className="py-8 text-center text-sm text-ink-muted">
            No commission income yet. Share your referral link to start earning.
          </CardContent>
        </Card>
      )}
    </div>
  );
}