"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { EnvironmentBadge } from "@/components/subscription/environment-badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Loader2, Search, DollarSign, TrendingUp, Users as UsersIcon, Filter } from "lucide-react"
import { format } from "date-fns"
import { useToast } from "@/components/ui/toast"
import Link from "next/link"

interface Subscription {
  userId: string
  userName: string
  userEmail: string
  subscription: {
    status: string
    environment: string
    currentPeriodStart?: string
    currentPeriodEnd?: string
    cancelAtPeriodEnd: boolean
  }
  businessName: string
  claimedFacilities: number
  grandfatheredFacilities: number
  mrr: number
  createdAt: string
}

interface Stats {
  totalSubscriptions: number
  active: number
  inactive: number
  cancelled: number
  pastDue: number
  sandbox: number
  production: number
}

export default function AdminSubscriptionsPage() {
  const [subscriptions, setSubscriptions] = useState<Subscription[]>([])
  const [stats, setStats] = useState<Stats | null>(null)
  const [totalMRR, setTotalMRR] = useState(0)
  const toast = useToast()
  const [isLoading, setIsLoading] = useState(true)
  const [search, setSearch] = useState("")
  const [environmentFilter, setEnvironmentFilter] = useState("all")
  const [statusFilter, setStatusFilter] = useState("all")
  const [page, setPage] = useState(1)
  const [pagination, setPagination] = useState<any>(null)

  const fetchSubscriptions = async () => {
    try {
      setIsLoading(true)
      const token = localStorage.getItem('geezer_guide_token')
      
      const params = new URLSearchParams({
        environment: environmentFilter,
        status: statusFilter,
        search: search,
        page: page.toString(),
        limit: '20',
      })

      const response = await fetch(`/api/admin/subscriptions?${params}`, {
        headers: {
          'Authorization': `Bearer ${token}`,
        },
      })

      const data = await response.json()

      if (data.success) {
        setSubscriptions(data.data.subscriptions)
        setStats(data.data.stats)
        setTotalMRR(data.data.totalMRR)
        setPagination(data.data.pagination)
      } else {
        toast.error(data.message || "Failed to fetch subscriptions", { title: "Error" })
      }
    } catch (error) {
      console.error('Error fetching subscriptions:', error)
      toast.error("Failed to fetch subscriptions", { title: "Error" })
    } finally {
      setIsLoading(false)
    }
  }

  useEffect(() => {
    fetchSubscriptions()
  }, [environmentFilter, statusFilter, page])

  const handleSearch = () => {
    setPage(1)
    fetchSubscriptions()
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'active':
        return <Badge className="bg-green-100 text-green-800 border-green-300">Active</Badge>
      case 'past_due':
        return <Badge variant="destructive">Past Due</Badge>
      case 'cancelled':
        return <Badge variant="outline" className="bg-red-50 text-red-700 border-red-300">Cancelled</Badge>
      default:
        return <Badge variant="secondary">Inactive</Badge>
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-3 md:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto space-y-4 md:space-y-6">
        {/* Page Header */}
        <div>
          <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-2">Subscription Management</h1>
          <p className="text-sm md:text-base text-gray-600">Manage and monitor facility owner subscriptions</p>
        </div>

      {/* Stats Cards */}
      {stats && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
          <Card>
            <CardContent className="p-4 md:p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-green-600 text-xs md:text-sm font-medium">Total MRR</p>
                  <p className="text-xl md:text-2xl lg:text-3xl font-bold text-green-900 flex items-center gap-1">
                    <DollarSign className="h-4 w-4 md:h-5 md:w-5" />
                    {totalMRR.toFixed(2)}
                  </p>
                </div>
                <DollarSign className="h-6 w-6 md:h-8 md:w-8 text-green-600" />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-4 md:p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-blue-600 text-xs md:text-sm font-medium">Active Subscriptions</p>
                  <p className="text-xl md:text-2xl lg:text-3xl font-bold text-blue-900">
                    {stats.active}
                  </p>
                </div>
                <TrendingUp className="h-6 w-6 md:h-8 md:w-8 text-blue-600" />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-4 md:p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-gray-600 text-xs md:text-sm font-medium">Total Users</p>
                  <p className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900">
                    {stats.totalSubscriptions}
                  </p>
                </div>
                <UsersIcon className="h-6 w-6 md:h-8 md:w-8 text-gray-600" />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-4 md:p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-purple-600 text-xs md:text-sm font-medium">Sandbox / Production</p>
                  <p className="text-xl md:text-2xl font-bold text-purple-900">
                    {stats.sandbox} / {stats.production}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* Filters */}
      <Card>
        <CardHeader className="p-4 md:p-6">
          <div className="flex items-center gap-2">
            <Filter className="h-4 w-4 md:h-5 md:w-5" />
            <CardTitle className="text-lg md:text-xl">Filters</CardTitle>
          </div>
        </CardHeader>
        <CardContent className="p-4 md:p-6 pt-0">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-3 md:gap-4">
            <div className="md:col-span-2">
              <div className="flex gap-2">
                <Input
                  placeholder="Search by name or email..."
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                  className="flex-1"
                />
                <Button onClick={handleSearch} className="shrink-0">
                  <Search className="h-4 w-4 sm:mr-2" />
                  <span className="hidden sm:inline">Search</span>
                </Button>
              </div>
            </div>

            <Select value={environmentFilter} onValueChange={setEnvironmentFilter}>
              <SelectTrigger>
                <SelectValue placeholder="Environment" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Environments</SelectItem>
                <SelectItem value="sandbox">Sandbox</SelectItem>
                <SelectItem value="production">Production</SelectItem>
              </SelectContent>
            </Select>

            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger>
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Statuses</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="inactive">Inactive</SelectItem>
                <SelectItem value="cancelled">Cancelled</SelectItem>
                <SelectItem value="past_due">Past Due</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Subscriptions Table */}
      <Card>
        <CardHeader className="p-4 md:p-6">
          <CardTitle className="text-lg md:text-xl">Subscriptions</CardTitle>
          <CardDescription className="text-xs md:text-sm">
            {pagination && `Showing ${pagination.page} of ${pagination.pages} pages (${pagination.total} total)`}
          </CardDescription>
        </CardHeader>
        <CardContent className="p-0 md:p-6 md:pt-0">
          {isLoading ? (
            <div className="flex items-center justify-center py-12">
              <Loader2 className="h-6 w-6 md:h-8 md:w-8 animate-spin text-[#3F5CEA]" />
            </div>
          ) : subscriptions.length === 0 ? (
            <div className="text-center py-12 text-sm md:text-base text-gray-500">
              No subscriptions found matching your filters.
            </div>
          ) : (
            <>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>User</TableHead>
                      <TableHead>Business</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Environment</TableHead>
                      <TableHead>Facilities</TableHead>
                      <TableHead>Next Billing</TableHead>
                      <TableHead>MRR</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {subscriptions.map((sub) => (
                      <TableRow key={sub.userId}>
                        <TableCell>
                          <div>
                            <div className="font-medium">{sub.userName}</div>
                            <div className="text-sm text-gray-500">{sub.userEmail}</div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">{sub.businessName}</div>
                        </TableCell>
                        <TableCell>{getStatusBadge(sub.subscription.status)}</TableCell>
                        <TableCell>
                          <EnvironmentBadge environment={sub.subscription.environment as any} />
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">
                            <div>{sub.claimedFacilities} claimed</div>
                            {sub.grandfatheredFacilities > 0 && (
                              <div className="text-blue-600">{sub.grandfatheredFacilities} grandfathered</div>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          {sub.subscription.currentPeriodEnd ? (
                            <div className="text-sm">
                              {format(new Date(sub.subscription.currentPeriodEnd), 'MMM dd, yyyy')}
                            </div>
                          ) : (
                            <span className="text-gray-400">-</span>
                          )}
                        </TableCell>
                        <TableCell>
                          <div className="font-semibold text-green-600">${sub.mrr.toFixed(2)}</div>
                        </TableCell>
                        <TableCell>
                          <Link href={`/admin/subscriptions/${sub.userId}`}>
                            <Button variant="outline" size="sm">
                              View Details
                            </Button>
                          </Link>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

              {/* Pagination */}
              {pagination && pagination.pages > 1 && (
                <div className="flex flex-col sm:flex-row items-center justify-between gap-3 mt-4 px-4 md:px-0">
                  <div className="text-xs md:text-sm text-gray-600">
                    Page {pagination.page} of {pagination.pages}
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage(page - 1)}
                      disabled={!pagination.hasPrev}
                    >
                      Previous
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage(page + 1)}
                      disabled={!pagination.hasNext}
                    >
                      Next
                    </Button>
                  </div>
                </div>
              )}
            </>
          )}
        </CardContent>
      </Card>
      </div>
    </div>
  )
}