'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, GitBranch, AlertCircle, Users } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { getReferralTree } from '@/services/referral/referral.service';

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

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await getReferralTree();
        if (!cancelled) setData(res);
      } catch (err: any) {
        if (!cancelled) setError(err?.message || 'Failed to load referral tree');
      } 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 Tree</h1>
        <p className="mt-1 text-sm text-ink-muted">Visualize your referral network</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">
            <GitBranch className="h-4 w-4" /> Your Network
          </CardTitle>
          <CardDescription className="mt-1">
            {loading ? 'Loading…' : data ? `${data.referralCount ?? 0} referrals in your network` : 'No referrals yet'}
          </CardDescription>
        </CardHeader>
        <CardContent>
          {data && (
            <div className="space-y-2">
              <div className="rounded-xl border border-primary-500/30 bg-primary-500/5 p-3">
                <p className="text-sm font-medium text-ink">{data.email}</p>
                <p className="text-xs text-ink-muted">You · Depth {data.depth ?? 0}</p>
              </div>
              {(data.children ?? []).length === 0 ? (
                <p className="text-sm text-ink-faint py-4 text-center">No referred users yet.</p>
              ) : (
                <div className="ml-4 space-y-2 border-l border-line pl-4">
                  {data.children.map((child: any) => (
                    <div key={child.userId ?? child.id} className="rounded-xl border border-line bg-surface-raised p-3">
                      <p className="text-sm font-medium text-ink">{child.email ?? child.name ?? 'Referred user'}</p>
                      <p className="text-xs text-ink-muted">Depth {child.depth ?? 1} · {child.referralCount ?? 0} sub-referrals</p>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}