'use client'

import React from 'react'
import { useAuth } from '@/contexts/AuthContext'
import { BalanceCard, BalanceDisplay, TransactionHistory } from '@/components/balance'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, History } from 'lucide-react'
import Link from 'next/link'

export default function BalancePage() {
  const { user } = useAuth()

  if (!user) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
          <p className="text-muted-foreground mb-4">Please log in to view your balance.</p>
          <Link href="/auth">
            <Button>Login</Button>
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <div className="mb-6">
        <Link href="/">
          <Button variant="ghost" size="sm" className="mb-4">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Dashboard
          </Button>
        </Link>
        <h1 className="text-3xl font-bold">Balance Management</h1>
        <p className="text-muted-foreground">
          Manage your account balance and view transaction history
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {/* Main Balance Card */}
        <div className="space-y-6">
          <BalanceCard showAddBalance={true} />

          {/* Quick Balance Display Examples */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Balance Display Variants</CardTitle>
              <CardDescription>Different ways to show balance in your UI</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <p className="text-sm font-medium mb-2">Default Display:</p>
                <BalanceDisplay variant="default" />
              </div>

              <div>
                <p className="text-sm font-medium mb-2">Compact Display:</p>
                <BalanceDisplay variant="compact" />
              </div>

              <div>
                <p className="text-sm font-medium mb-2">Badge Display:</p>
                <BalanceDisplay variant="badge" />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Transaction History */}
        <div className="space-y-6">
          <TransactionHistory showFilters={true} maxHeight="500px" />

          {/* Account Info */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Account Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Name:</span>
                <span className="font-medium">{user.name}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Email:</span>
                <span className="font-medium">{user.email}</span>
              </div>
              {user.siliconId && (
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Silicon ID:</span>
                  <span className="font-medium">{user.siliconId}</span>
                </div>
              )}
              <div className="flex justify-between">
                <span className="text-muted-foreground">Account Type:</span>
                <span className="font-medium capitalize">{user.role}</span>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}