'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { AlertTriangle, DollarSign, Shield, Wallet } from 'lucide-react';

interface AdminQuickViewWidgetsProps {
  leagueId: string;
  walletBalance?: number;
  pendingProtestsCount?: number;
  pendingJoinRequestsCount?: number;
  isOwnerOrAdmin: boolean;
}

export function AdminQuickViewWidgets({
  leagueId,
  walletBalance = 0,
  pendingProtestsCount = 0,
  pendingJoinRequestsCount = 0,
  isOwnerOrAdmin,
}: AdminQuickViewWidgetsProps) {
  if (!isOwnerOrAdmin) {
    return null;
  }

  return (
    <Stack gap={4} data-testid="admin-widgets">
      {/* Wallet Preview */}
      <Surface
        variant="precision"
        rounded="xl"
        padding={6}
      >
        <Stack gap={4}>
          <Stack direction="row" align="center" gap={3}>
            <Stack
              display="flex"
              h="10"
              w="10"
              alignItems="center"
              justifyContent="center"
              rounded="lg"
              bg="bg-primary-blue/10"
            >
              <Icon icon={Wallet} size={4} intent="primary" />
            </Stack>
            <Stack gap={0}>
              <Text size="sm" weight="bold" variant="high" block>
                Wallet Balance
              </Text>
              <Text size="2xl" weight="bold" variant="primary" font="mono" block>
                ${walletBalance.toFixed(2)}
              </Text>
            </Stack>
          </Stack>

          <Stack direction="row" gap={2}>
            <Link href={`/leagues/${leagueId}/wallet`} style={{ flex: 1 }}>
              <Button variant="primary" style={{ width: '100%' }}>
                <Stack direction="row" align="center" gap={2}>
                  <Icon icon={DollarSign} size={4} />
                  <Text>Manage Wallet</Text>
                </Stack>
              </Button>
            </Link>
          </Stack>
        </Stack>
      </Surface>

      {/* Stewarding Quick-View */}
      <Surface
        variant="precision"
        rounded="xl"
        padding={6}
      >
        <Stack gap={4}>
          <Stack direction="row" align="center" gap={3}>
            <Stack
              display="flex"
              h="10"
              w="10"
              alignItems="center"
              justifyContent="center"
              rounded="lg"
              bg="bg-error-red/10"
            >
              <Icon icon={Shield} size={4} intent="critical" />
            </Stack>
            <Stack gap={0}>
              <Text size="sm" weight="bold" variant="high" block>
                Stewarding Queue
              </Text>
              <Text size="2xl" weight="bold" variant="critical" font="mono" block>
                {pendingProtestsCount}
              </Text>
            </Stack>
          </Stack>

          {pendingProtestsCount > 0 ? (
            <Stack direction="row" gap={2}>
              <Link href={`/leagues/${leagueId}/stewarding`} style={{ flex: 1 }}>
                <Button variant="danger" style={{ width: '100%' }}>
                  <Stack direction="row" align="center" gap={2}>
                    <Icon icon={AlertTriangle} size={4} />
                    <Text>Review Protests</Text>
                  </Stack>
                </Button>
              </Link>
            </Stack>
          ) : (
            <Text size="xs" variant="low" italic>
              No pending protests
            </Text>
          )}
        </Stack>
      </Surface>

      {/* Join Requests Preview */}
      {pendingJoinRequestsCount > 0 && (
        <Surface
          variant="precision"
          rounded="xl"
          padding={6}
        >
          <Stack gap={4}>
            <Stack direction="row" align="center" gap={3}>
              <Stack
                display="flex"
                h="10"
                w="10"
                alignItems="center"
                justifyContent="center"
                rounded="lg"
                bg="bg-warning-amber/10"
              >
                <Icon icon={Shield} size={4} intent="warning" />
              </Stack>
              <Stack gap={0}>
                <Text size="sm" weight="bold" variant="high" block>
                  Join Requests
                </Text>
                <Text size="2xl" weight="bold" variant="warning" font="mono" block>
                  {pendingJoinRequestsCount}
                </Text>
              </Stack>
            </Stack>

            <Stack direction="row" gap={2}>
              <Link href={`/leagues/${leagueId}/admin`} style={{ flex: 1 }}>
                <Button variant="warning" style={{ width: '100%' }}>
                  <Stack direction="row" align="center" gap={2}>
                    <Icon icon={Shield} size={4} />
                    <Text>Review Requests</Text>
                  </Stack>
                </Button>
              </Link>
            </Stack>
          </Stack>
        </Surface>
      )}
    </Stack>
  );
}