← Назадimport { TrendingUp, BarChart2, Target, Zap, Activity, FolderOpen, CheckCircle2, Circle } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { useProject } from '../../hooks/useProjects';
interface TradingBotCardProps {
onViewDetails: () => void;
onViewTasks: () => void;
onViewFiles?: () => void;
}
export function TradingBotCard({ onViewDetails: _onViewDetails, onViewTasks, onViewFiles }: TradingBotCardProps) {
const { data, isLoading, refetch } = useProject('trading-bot');
if (isLoading) {
return <Card className="animate-pulse"><div className="h-64" /></Card>;
}
const { kpis, status } = data || {};
const phase = kpis?.phase || 'Setup';
const deposit = kpis?.deposit || '$500';
const strategies = kpis?.strategies || [];
const roadmap = kpis?.roadmap || [];
const statusBadge = status === 'active' ? 'success' : 'warning';
const statusLabel = status === 'active' ? 'ACTIVE' : status === 'planned' ? 'SETUP' : (status?.toUpperCase() || 'SETUP');
return (
<Card className="border-l-4 border-l-trading/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-trading/10">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="p-3 rounded-xl bg-trading/20">
<TrendingUp className="w-6 h-6 text-trading" />
</div>
<div>
<CardTitle>Trading Bot</CardTitle>
<CardDescription>Crypto · Bybit · Semi-Auto</CardDescription>
</div>
</div>
<Badge variant={statusBadge}>
{statusLabel}
</Badge>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-3 mb-4">
<div className="bg-white/5 rounded-xl p-3 border border-white/5">
<div className="flex items-center gap-1 text-xs text-gray-400 uppercase mb-1">
<Zap className="w-3 h-3" />
Фаза
</div>
<div className="text-sm font-bold text-trading">{phase}</div>
</div>
<div className="bg-white/5 rounded-xl p-3 border border-white/5">
<div className="flex items-center gap-1 text-xs text-gray-400 uppercase mb-1">
<BarChart2 className="w-3 h-3" />
Депозит
</div>
<div className="text-sm font-bold text-white">{deposit}</div>
</div>
<div className="bg-white/5 rounded-xl p-3 border border-white/5">
<div className="flex items-center gap-1 text-xs text-gray-400 uppercase mb-1">
<Target className="w-3 h-3" />
Стратегий
</div>
<div className="text-sm font-bold text-white">{strategies.length}</div>
</div>
</div>
{/* Strategy list */}
{strategies.length > 0 && (
<div className="space-y-1.5 mb-3">
<div className="text-xs text-gray-400 uppercase">Стратегии</div>
{strategies.map((s: { name: string; status: string }, i: number) => (
<div key={i} className="flex items-center justify-between text-sm">
<span className="text-gray-300">{s.name}</span>
<span className={`text-xs ${s.status === 'ready' ? 'text-emerald-400' : s.status === 'testing' ? 'text-amber-400' : 'text-gray-500'}`}>
{s.status}
</span>
</div>
))}
</div>
)}
{/* Roadmap */}
{roadmap.length > 0 && (
<div className="space-y-1.5">
<div className="text-xs text-gray-400 uppercase">Roadmap</div>
{roadmap.map((item: { step: string; done: boolean }, i: number) => (
<div key={i} className="flex items-center gap-2 text-sm">
{item.done ? (
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
) : (
<Circle className="w-4 h-4 text-gray-500 shrink-0" />
)}
<span className={item.done ? 'text-gray-400 line-through' : 'text-gray-300'}>
{item.step}
</span>
</div>
))}
</div>
)}
</CardContent>
<CardFooter className="gap-2">
<Button variant="primary" size="sm" onClick={() => refetch()}>
<Activity className="w-4 h-4" />
Обновить
</Button>
<Button variant="ghost" size="sm" onClick={onViewTasks}>
Задачи
</Button>
{onViewFiles && (
<Button variant="ghost" size="sm" onClick={onViewFiles}>
<FolderOpen className="w-4 h-4" />
Файлы
</Button>
)}
</CardFooter>
</Card>
);
}