import { PageTemplate } from '@/components/page-template';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Pagination } from '@/components/ui/pagination';
import { useTranslation } from 'react-i18next';
import { usePage, router } from '@inertiajs/react';
import { ArrowLeft, Users, Calendar, DollarSign, CheckCircle } from 'lucide-react';

interface ReferredUser {
  id: number;
  name: string;
  email: string;
  created_at: string;
  plan?: {
    id: number;
    name: string;
    price: number;
    yearly_price?: number;
  };
  plan_orders?: Array<{
    id: number;
    billing_cycle: string;
    final_price: number;
  }>;
  referrals?: Array<{
    id: number;
    amount: number;
    commission_percentage: number;
    created_at: string;
  }>;
}

interface ReferredUsersProps {
  referredUsers: {
    data: ReferredUser[];
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    from: number;
    to: number;
    links: any[];
  };
  userType: string;
  currencySymbol: string;
}

interface PageProps {
  props: ReferredUsersProps;
}

export default function ReferredUsers() {
  const { t } = useTranslation();
  const { props } = usePage<PageProps>();
  const { referredUsers, userType, currencySymbol } = props;

const getTotalCommission = (user: ReferredUser) => {
    return user.referrals?.reduce((total, referral) => total + (Number(referral.amount) || 0), 0) || 0;
  };

  const getPlanDisplayInfo = (user: ReferredUser) => {
    if (!user.plan) return null;
    
    // Get the latest plan order to determine billing cycle and actual price paid
    const latestOrder = user.plan_orders?.[0];
    
    if (latestOrder) {
      const isYearly = latestOrder.billing_cycle === 'yearly';
      return {
        name: user.plan.name,
        price: latestOrder.final_price,
        cycle: isYearly ? 'year' : 'month'
      };
    }
    
    // Fallback to plan's monthly price if no order found
    return {
      name: user.plan.name,
      price: user.plan.price,
      cycle: 'month'
    };
  };

    const breadcrumbs = [
    { title: t('Dashboard'), href: route('dashboard') },
    { title: t('Referral Program'), href: route('referral.index') },
    { title: t('Referral Users') }
  ];

  return (
    <PageTemplate 
      title={t('Referred Users')} 
      url="/referral/referred-users"
      breadcrumbs={breadcrumbs}
      actions={[
        {
          label: t('Back'),
          icon: <ArrowLeft className="h-4 w-4 mr-2" />,
          variant: 'outline',
          onClick: () => router.get(route('referral.index'))
        }
      ]}
    >
      <div className="space-y-6">

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">{t('Total Referred Users')}</p>
                  <p className="mt-2 text-2xl font-bold">{referredUsers.total}</p>
                </div>
                <div className="rounded-full bg-green-100 p-3 dark:bg-green-900">
                  <Users className="h-5 w-5 text-green-600 dark:text-green-400" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">{t('Users with Plans')}</p>
                  <p className="mt-2 text-2xl font-bold">{referredUsers.data.filter(user => user.plan).length}</p>
                </div>
                <div className="rounded-full bg-blue-100 p-3 dark:bg-blue-900">
                  <CheckCircle className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">{t('Total Commission Earned')}</p>
                  <p className="mt-2 text-2xl font-bold">{currencySymbol}{(referredUsers.data.reduce((total, user) => total + getTotalCommission(user), 0) || 0).toFixed(2)}</p>
                </div>
                <div className="rounded-full bg-yellow-100 p-3 dark:bg-yellow-900">
                  <DollarSign className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="text-base font-semibold">{t('Referred Users List')}</CardTitle>
          </CardHeader>
          <CardContent>
            {referredUsers.data.length === 0 ? (
              <div className="text-center py-12">
                <Users className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <p className="text-base font-semibold text-muted-foreground mb-2">{t('No referred users yet')}</p>
                <p className="text-sm text-muted-foreground">
                  {userType === 'superadmin' 
                    ? t('No users have registered using referral codes yet.')
                    : t('Share your referral link to start earning commissions.')
                  }
                </p>
              </div>
            ) : (
              <div className="space-y-4">
                {referredUsers.data.map((user) => (
                  <div key={user.id} className="border rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex items-start space-x-3 flex-1">
                        <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                          <span className="text-sm font-medium text-primary">
                            {user.name.charAt(0).toUpperCase()}
                          </span>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-semibold">{user.name}</p>
                          <p className="text-sm text-muted-foreground mb-2">{user.email}</p>
                          <div className="flex items-center space-x-2">
                            <Calendar className="h-4 w-4 text-muted-foreground" />
                            <span className="text-xs text-muted-foreground">
                              {t('Registered')} {window.appSettings?.formatDateTimeSimple(user.created_at, false) || new Date(user.created_at).toLocaleDateString()}
                            </span>
                          </div>
                        </div>
                      </div>
                      
                      <div className="flex items-start space-x-6 flex-shrink-0">
                        <div className="text-right">
                          {(() => {
                            const planInfo = getPlanDisplayInfo(user);
                            return planInfo ? (
                              <div>
                                <Badge variant="default" className="mb-1.5">
                                  {planInfo.name}
                                </Badge>
                                <p className="text-sm text-muted-foreground">
                                  {currencySymbol}{planInfo.price}/{t(planInfo.cycle)}
                                </p>
                              </div>
                            ) : (
                              <Badge variant="secondary">
                                {t('No Plan')}
                              </Badge>
                            );
                          })()} 
                        </div>
                        
                        {getTotalCommission(user) > 0 && (
                          <div className="text-right min-w-[80px]">
                            <p className="text-sm font-semibold text-green-600">
                              +{currencySymbol}{getTotalCommission(user)}
                            </p>
                            <p className="text-xs text-muted-foreground mt-1">
                              {t('Commission')}
                            </p>
                          </div>
                        )}
                      </div>
                    </div>
                    
                    {user.referrals && user.referrals.length > 0 && (
                      <div className="mt-4 pt-4 border-t">
                        <p className="text-sm font-semibold mb-2">{t('Commission History')}</p>
                        <div className="space-y-2">
                          {user.referrals.map((referral) => (
                            <div key={referral.id} className="flex justify-between items-center">
                              <span className="text-sm text-muted-foreground">
                                {referral.commission_percentage}% {t('commission')}
                              </span>
                              <span className="text-sm font-semibold text-green-600">
                                +{currencySymbol}{referral.amount}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {referredUsers.last_page > 1 && (
          <Pagination
            from={referredUsers.from}
            to={referredUsers.to}
            total={referredUsers.total}
            links={referredUsers.links}
            currentPage={referredUsers.current_page}
            lastPage={referredUsers.last_page}
            entityName={t('users')}
            onPageChange={(url) => {
              router.visit(url, {
                preserveState: true,
                preserveScroll: true,
              });
            }}
          />
        )}
      </div>
    </PageTemplate>
  );
}