import { AdminLayout } from '@/components/admin/layout'
import { DataTable } from '@/components/admin/data-table'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Download, FileText } from 'lucide-react'

const reportsData = [
  {
    id: '#RPT001',
    name: 'Monthly Sales Report',
    type: 'Sales',
    generated: '2024-03-20',
    status: 'Completed',
    size: '2.4 MB',
  },
  {
    id: '#RPT002',
    name: 'User Activity Report',
    type: 'Analytics',
    generated: '2024-03-19',
    status: 'Completed',
    size: '1.8 MB',
  },
  {
    id: '#RPT003',
    name: 'Financial Summary',
    type: 'Finance',
    generated: '2024-03-18',
    status: 'Generating',
    size: '-',
  },
  {
    id: '#RPT004',
    name: 'Quarterly Performance',
    type: 'Performance',
    generated: '2024-03-15',
    status: 'Completed',
    size: '3.1 MB',
  },
  {
    id: '#RPT005',
    name: 'Customer Feedback Summary',
    type: 'Feedback',
    generated: '2024-03-14',
    status: 'Completed',
    size: '956 KB',
  },
  {
    id: '#RPT006',
    name: 'System Health Check',
    type: 'System',
    generated: '2024-03-13',
    status: 'Completed',
    size: '1.2 MB',
  },
]

export default function ReportsPage() {
  return (
    <AdminLayout>
      {/* Page Header */}
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Reports</h1>
          <p className="text-muted-foreground text-sm mt-2">
            Generate and manage system reports.
          </p>
        </div>
        <Button className="gap-2 bg-primary hover:bg-primary/90 text-primary-foreground">
          <FileText className="w-4 h-4" />
          Generate Report
        </Button>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <Card className="bg-card border-border p-4">
          <p className="text-sm text-muted-foreground">Total Reports</p>
          <p className="text-2xl font-bold text-foreground mt-2">48</p>
        </Card>
        <Card className="bg-card border-border p-4">
          <p className="text-sm text-muted-foreground">This Month</p>
          <p className="text-2xl font-bold text-foreground mt-2">12</p>
        </Card>
        <Card className="bg-card border-border p-4">
          <p className="text-sm text-muted-foreground">Total Storage</p>
          <p className="text-2xl font-bold text-foreground mt-2">48.2 GB</p>
        </Card>
        <Card className="bg-card border-border p-4">
          <p className="text-sm text-muted-foreground">Success Rate</p>
          <p className="text-2xl font-bold text-foreground mt-2">98.5%</p>
        </Card>
      </div>

      {/* Reports Table */}
      <DataTable
        title="All Reports"
        searchPlaceholder="Search by report name..."
        columns={[
          { key: 'id', label: 'Report ID' },
          { key: 'name', label: 'Report Name' },
          { key: 'type', label: 'Type' },
          { key: 'generated', label: 'Generated' },
          { key: 'size', label: 'Size' },
          { key: 'status', label: 'Status' },
        ]}
        data={reportsData.map((report) => ({
          ...report,
          type: (
            <Badge className="bg-input text-foreground">
              {report.type}
            </Badge>
          ),
          status: (
            <Badge
              className={
                report.status === 'Completed'
                  ? 'bg-green-500/20 text-green-400'
                  : 'bg-blue-500/20 text-blue-400'
              }
            >
              {report.status}
            </Badge>
          ),
        }))}
        itemsPerPage={10}
      />
    </AdminLayout>
  )
}