'use client';

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Coins, CreditCard, Gift, TrendingUp } from 'lucide-react';
import { formatRecordTime } from '@/lib/credit-records-store';

type CreditRecord = {
  id: string;
  amount: number;
  description: string;
  createdAt: string;
  balanceAfter: number;
};

type CreditsTabProps = {
  creditsBalance: number;
  creditRecords: CreditRecord[];
};

export default function CreditsTab({ creditsBalance, creditRecords }: CreditsTabProps) {
  const profile = { credits_balance: creditsBalance };
  return (
<div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2"><Coins className="h-5 w-5" />积分中心</CardTitle>
                  <CardDescription>管理你的积分余额与充值</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between p-4 rounded-lg bg-primary/5 mb-4">
                    <div>
                      <p className="text-sm text-muted-foreground">当前余额</p>
                      <p className="text-3xl font-bold text-primary">{profile.credits_balance} <span className="text-sm font-normal">积分</span></p>
                    </div>
                    <Button className="gap-2"><CreditCard className="h-4 w-4" />充值积分</Button>
                  </div>

                  <div className="grid grid-cols-3 gap-4 mb-4">
                    {[
                      { amount: 50, price: 9.9, bonus: 5 },
                      { amount: 200, price: 29.9, bonus: 30 },
                      { amount: 500, price: 59.9, bonus: 100 },
                    ].map((pkg) => (
                      <Card key={pkg.amount} className="cursor-pointer hover:border-primary/50 transition-colors">
                        <CardContent className="p-4 text-center">
                          <p className="text-2xl font-bold">{pkg.amount}</p>
                          <p className="text-xs text-muted-foreground">积分</p>
                          <p className="text-sm font-semibold text-primary mt-2">¥{pkg.price}</p>
                          <Badge variant="secondary" className="mt-1">送{pkg.bonus}积分</Badge>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-base">积分记录</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {creditRecords.length === 0 ? (
                      <div className="text-center py-8 text-muted-foreground">
                        <TrendingUp className="h-10 w-10 mx-auto mb-2 opacity-20" />
                        <p className="text-sm">暂无积分记录</p>
                      </div>
                    ) : creditRecords.map((tx) => (
                      <div key={tx.id} className="flex items-center justify-between py-2 border-b border-border/50 last:border-0">
                        <div className="flex items-center gap-3">
                          <div className={`p-2 rounded-lg ${tx.amount > 0 ? 'bg-emerald-500/10' : 'bg-rose-500/10'}`}>
                            {tx.amount > 0 ? <Gift className="h-4 w-4 text-emerald-500" /> : <TrendingUp className="h-4 w-4 text-rose-500" />}
                          </div>
                          <div>
                            <p className="text-sm font-medium">{tx.description}</p>
                            <p className="text-xs text-muted-foreground">{formatRecordTime(tx.createdAt)}</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <span className={`font-semibold ${tx.amount > 0 ? 'text-emerald-500' : 'text-rose-500'}`}>
                            {tx.amount > 0 ? '+' : ''}{tx.amount}
                          </span>
                          <p className="text-xs text-muted-foreground">余额 {tx.balanceAfter}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
  );
}