'use client';

import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useDashboardStats } from '../hooks/use-dashboard-stats';
import { formatCompactNumber } from '@/lib/utils/format';
import { Skeleton } from '@/components/ui/skeleton';
import { Activity, Users, Building2, Landmark, Layers, Gift, TreePine, ExternalLink } from 'lucide-react';

function ContributionBreakdownSkeleton() {
  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-32" />
        </CardHeader>
        <CardContent className="space-y-3">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="flex justify-between">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-20" />
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}

interface BreakdownRowProps {
  label: string;
  theory?: string;
  actual?: string;
  unlocked?: string;
  pending?: string;
  icon?: React.ElementType;
  color?: string;
}

function BreakdownRow({ label, theory, actual, unlocked, pending, icon: Icon, color = 'text-gray-600' }: BreakdownRowProps) {
  return (
    <div className="flex items-center justify-between py-2 border-b last:border-0">
      <div className="flex items-center gap-2">
        {Icon && <Icon className={`h-4 w-4 ${color}`} />}
        <span className="text-sm text-muted-foreground">{label}</span>
      </div>
      <div className="text-right">
        {theory && actual && (
          <div className="text-sm">
            <span className="font-medium">{formatCompactNumber(actual)}</span>
            <span className="text-muted-foreground text-xs ml-1">/ {formatCompactNumber(theory)}</span>
          </div>
        )}
        {unlocked !== undefined && pending !== undefined && (
          <div className="text-sm">
            <span className="font-medium text-green-600">{formatCompactNumber(unlocked)}</span>
            <span className="text-muted-foreground mx-1">/</span>
            <span className="font-medium text-orange-500">{formatCompactNumber(pending)}</span>
          </div>
        )}
      </div>
    </div>
  );
}

export function ContributionBreakdown() {
  const { data: stats, isLoading } = useDashboardStats();

  if (isLoading) {
    return <ContributionBreakdownSkeleton />;
  }

  const dc = stats?.detailedContribution;
  if (!dc) {
    return null;
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* 基础算力分配 */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <TreePine className="h-5 w-5 text-green-600" />
            算力分配概览
          </CardTitle>
          <p className="text-xs text-muted-foreground">
            总认种树: {dc.totalTrees} 棵 | 全网理论算力: {formatCompactNumber(dc.networkTotalTheory)}
          </p>
        </CardHeader>
        <CardContent className="space-y-1">
          <BreakdownRow
            label="个人算力 (70%)"
            theory={dc.personalTheory}
            actual={dc.personalActual}
            icon={Users}
            color="text-blue-500"
          />
          <BreakdownRow
            label="运营账户 (12%)"
            theory={dc.operationTheory}
            actual={dc.operationActual}
            icon={Building2}
            color="text-purple-500"
          />
          <BreakdownRow
            label="省公司 (1%)"
            theory={dc.provinceTheory}
            actual={dc.provinceActual}
            icon={Landmark}
            color="text-indigo-500"
          />
          <BreakdownRow
            label="市公司 (2%)"
            theory={dc.cityTheory}
            actual={dc.cityActual}
            icon={Building2}
            color="text-cyan-500"
          />
          <div className="pt-2 mt-2 border-t">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">层级算力 (7.5%)</span>
              <span className="font-medium">{formatCompactNumber(dc.level.theory)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">团队奖励 (7.5%)</span>
              <span className="font-medium">{formatCompactNumber(dc.bonus.theory)}</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 层级算力详情 */}
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-base flex items-center gap-2">
              <Layers className="h-5 w-5 text-blue-600" />
              层级算力详情 (7.5%)
            </CardTitle>
            <Link href="/pending-contributions">
              <Button variant="ghost" size="sm" className="text-xs h-7">
                查看分类账
                <ExternalLink className="h-3 w-3 ml-1" />
              </Button>
            </Link>
          </div>
          <p className="text-xs text-muted-foreground">
            理论: {formatCompactNumber(dc.level.theory)} |
            <span className="text-green-600"> 已解锁: {formatCompactNumber(dc.level.unlocked)}</span> |
            <span className="text-orange-500"> 待解锁: {formatCompactNumber(dc.level.pending)}</span>
          </p>
        </CardHeader>
        <CardContent className="space-y-1">
          <div className="text-xs text-muted-foreground mb-2">
            (已解锁 / 待解锁)
          </div>
          <BreakdownRow
            label="1档 (1-5级, 需1直推)"
            unlocked={dc.level.tier1.unlocked}
            pending={dc.level.tier1.pending}
            icon={Activity}
            color="text-green-500"
          />
          <BreakdownRow
            label="2档 (6-10级, 需3直推)"
            unlocked={dc.level.tier2.unlocked}
            pending={dc.level.tier2.pending}
            icon={Activity}
            color="text-yellow-500"
          />
          <BreakdownRow
            label="3档 (11-15级, 需5直推)"
            unlocked={dc.level.tier3.unlocked}
            pending={dc.level.tier3.pending}
            icon={Activity}
            color="text-orange-500"
          />
        </CardContent>
      </Card>

      {/* 团队奖励详情 */}
      <Card className="lg:col-span-2">
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-base flex items-center gap-2">
              <Gift className="h-5 w-5 text-purple-600" />
              团队奖励详情 (7.5%)
            </CardTitle>
            <Link href="/pending-contributions">
              <Button variant="ghost" size="sm" className="text-xs h-7">
                查看分类账
                <ExternalLink className="h-3 w-3 ml-1" />
              </Button>
            </Link>
          </div>
          <p className="text-xs text-muted-foreground">
            理论: {formatCompactNumber(dc.bonus.theory)} |
            <span className="text-green-600"> 已解锁: {formatCompactNumber(dc.bonus.unlocked)}</span> |
            <span className="text-orange-500"> 待解锁: {formatCompactNumber(dc.bonus.pending)}</span>
          </p>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-3 bg-green-50 rounded-lg">
              <div className="text-sm font-medium text-green-800">1档 (2.5%)</div>
              <div className="text-xs text-green-600 mb-2">条件: 自己认种</div>
              <div className="flex justify-between">
                <span className="text-xs text-muted-foreground">已解锁</span>
                <span className="text-sm font-medium text-green-700">{formatCompactNumber(dc.bonus.tier1.unlocked)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-xs text-muted-foreground">待解锁</span>
                <span className="text-sm font-medium text-orange-600">{formatCompactNumber(dc.bonus.tier1.pending)}</span>
              </div>
            </div>
            <div className="p-3 bg-yellow-50 rounded-lg">
              <div className="text-sm font-medium text-yellow-800">2档 (2.5%)</div>
              <div className="text-xs text-yellow-600 mb-2">条件: 2直推认种</div>
              <div className="flex justify-between">
                <span className="text-xs text-muted-foreground">已解锁</span>
                <span className="text-sm font-medium text-green-700">{formatCompactNumber(dc.bonus.tier2.unlocked)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-xs text-muted-foreground">待解锁</span>
                <span className="text-sm font-medium text-orange-600">{formatCompactNumber(dc.bonus.tier2.pending)}</span>
              </div>
            </div>
            <div className="p-3 bg-orange-50 rounded-lg">
              <div className="text-sm font-medium text-orange-800">3档 (2.5%)</div>
              <div className="text-xs text-orange-600 mb-2">条件: 4直推认种</div>
              <div className="flex justify-between">
                <span className="text-xs text-muted-foreground">已解锁</span>
                <span className="text-sm font-medium text-green-700">{formatCompactNumber(dc.bonus.tier3.unlocked)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-xs text-muted-foreground">待解锁</span>
                <span className="text-sm font-medium text-orange-600">{formatCompactNumber(dc.bonus.tier3.pending)}</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
