'use client'

import { AdminLayout } from '@/components/admin/layout'
import { DataTable } from '@/components/admin/data-table'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
import { CreditCard, TrendingUp } from 'lucide-react'

const transactionsData = [
  {
    id: '#TXN001',
    description: 'Monthly Subscription',
    amount: '$99.00',
    date: '2024-03-20',
    type: 'Subscription',
    status: 'Completed',
  },
  {
    id: '#TXN002',
    description: 'Additional Users (10)',
    amount: '$50.00',
    date: '2024-03-18',
    type: 'Add-on',
    status: 'Completed',
  },
  {
    id: '#TXN003',
    description: 'Premium Support',
    amount: '$29.99',
    date: '2024-03-15',
    type: 'Support',
    status: 'Completed',
  },
  {
    id: '#TXN004',
    description: 'Refund - Cancelled Plan',
    amount: '-$49.50',
    date: '2024-03-10',
    type: 'Refund',
    status: 'Completed',
  },
  {
    id: '#TXN005',
    description: 'Monthly Subscription',
    amount: '$99.00',
    date: '2024-02-20',
    type: 'Subscription',
    status: 'Completed',
  },
]

const revenueData = [
  { month: 'Jan', revenue: 15000 },
  { month: 'Feb', revenue: 18500 },
  { month: 'Mar', revenue: 22000 },
  { month: 'Apr', revenue: 25600 },
  { month: 'May', revenue: 28900 },
  { month: 'Jun', revenue: 32400 },
  { month: 'Jul', revenue: 35800 },
]

export default function BillingPage() {
  return (
    <AdminLayout>
      {/* Page Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">Billing & Revenue</h1>
        <p className="text-muted-foreground text-sm mt-2">
          Manage billing, payments, and revenue tracking.
        </p>
      </div>

      {/* Revenue Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <Card className="bg-card border-border p-6">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Total Revenue</p>
              <p className="text-2xl font-bold text-foreground mt-2">$178.2K</p>
              <p className="text-xs text-green-400 mt-2">↑ 12% from last month</p>
            </div>
            <TrendingUp className="w-8 h-8 text-primary opacity-20" />
          </div>
        </Card>
        <Card className="bg-card border-border p-6">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Active Subscriptions</p>
              <p className="text-2xl font-bold text-foreground mt-2">2,847</p>
              <p className="text-xs text-green-400 mt-2">↑ 5% from last month</p>
            </div>
            <CreditCard className="w-8 h-8 text-primary opacity-20" />
          </div>
        </Card>
        <Card className="bg-card border-border p-6">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Monthly Recurring</p>
              <p className="text-2xl font-bold text-foreground mt-2">$35.8K</p>
              <p className="text-xs text-green-400 mt-2">↑ 8% from last month</p>
            </div>
            <TrendingUp className="w-8 h-8 text-primary opacity-20" />
          </div>
        </Card>
      </div>

      {/* Revenue Chart */}
      <Card className="bg-card border-border p-6 mb-8">
        <div className="mb-6">
          <h3 className="text-lg font-semibold text-foreground">Revenue Trend</h3>
          <p className="text-xs text-muted-foreground mt-1">Last 7 months</p>
        </div>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={revenueData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#ffffff11" />
            <XAxis stroke="#9CA3AF" />
            <YAxis stroke="#9CA3AF" />
            <Tooltip
              contentStyle={{
                backgroundColor: 'rgba(20, 20, 30, 0.95)',
                border: '1px solid rgba(255, 255, 255, 0.1)',
                borderRadius: '8px',
              }}
              labelStyle={{ color: '#E5E7EB' }}
            />
            <Line
              type="monotone"
              dataKey="revenue"
              stroke="#A78BFA"
              strokeWidth={3}
              dot={{ fill: '#A78BFA', r: 5 }}
            />
          </LineChart>
        </ResponsiveContainer>
      </Card>

      {/* Transactions Table */}
      <DataTable
        title="Recent Transactions"
        searchPlaceholder="Search by description..."
        columns={[
          { key: 'id', label: 'Transaction ID' },
          { key: 'description', label: 'Description' },
          { key: 'type', label: 'Type' },
          { key: 'amount', label: 'Amount' },
          { key: 'date', label: 'Date' },
          { key: 'status', label: 'Status' },
        ]}
        data={transactionsData.map((txn) => ({
          ...txn,
          type: (
            <Badge className="bg-input text-foreground text-xs">
              {txn.type}
            </Badge>
          ),
          status: (
            <Badge className="bg-green-500/20 text-green-400 text-xs">
              {txn.status}
            </Badge>
          ),
          amount: (
            <span className={txn.amount.startsWith('-') ? 'text-red-400' : 'text-green-400'}>
              {txn.amount}
            </span>
          ),
        }))}
        itemsPerPage={10}
      />
    </AdminLayout>
  )
}