"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
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,
  ArrowLeft,
  Building2,
  Mail,
  Phone,
  CreditCard,
  Calendar,
  MapPin,
  ExternalLink,
  FileText,
  AlertCircle
} from "lucide-react"
import { format } from "date-fns"
import { useToast } from "@/components/ui/toast"
import Link from "next/link"

interface SubscriptionDetailsData {
  user: {
    id: string
    firstName: string
    lastName: string
    email: string
    role: string
  }
  profile: {
    businessName: string
    businessType: string
    phone: string
    email: string
  }
  subscription: {
    status: string
    environment: string
    currentPeriodStart?: string
    currentPeriodEnd?: string
    cancelAtPeriodEnd: boolean
    stripeCustomerId?: string
    stripeSubscriptionId?: string
    stripePriceId?: string
  }
  stripeSubscription?: any
  facilities: {
    claimed: Array<{
      _id: string
      name: string
      slug: string
      location: { city: string; state: string }
    }>
    grandfathered: Array<{
      _id: string
      name: string
      slug: string
      location: { city: string; state: string }
    }>
  }
  paymentHistory: Array<{
    id: string
    amount: number
    currency: string
    status: string
    date: string
    invoiceUrl?: string
    pdfUrl?: string
  }>
}

export default function SubscriptionDetailsPage() {
  const params = useParams()
  const router = useRouter()
  const toast = useToast()
  const userId = params?.userId as string

  const [data, setData] = useState<SubscriptionDetailsData | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    fetchSubscriptionDetails()
  }, [userId])

  const fetchSubscriptionDetails = async () => {
    try {
      setIsLoading(true)
      const token = localStorage.getItem('geezer_guide_token')

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

      const result = await response.json()

      if (result.success) {
        setData(result.data)
      } else {
        toast.error(result.message || "Failed to fetch subscription details", { title: "Error" })
      }
    } catch (error) {
      console.error('Error fetching subscription details:', error)
      toast.error("Failed to fetch subscription details", { title: "Error" })
    } finally {
      setIsLoading(false)
    }
  }

  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':
      case 'canceled':
        return <Badge variant="outline" className="bg-red-50 text-red-700 border-red-300">Cancelled</Badge>
      case 'incomplete':
        return <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-300">Incomplete</Badge>
      case 'trialing':
        return <Badge className="bg-blue-100 text-blue-800 border-blue-300">Trialing</Badge>
      default:
        return <Badge variant="secondary">Inactive</Badge>
    }
  }

  const getPaymentStatusBadge = (status: string) => {
    switch (status) {
      case 'paid':
        return <Badge className="bg-green-100 text-green-800 border-green-300">Paid</Badge>
      case 'open':
        return <Badge className="bg-blue-100 text-blue-800 border-blue-300">Open</Badge>
      case 'void':
        return <Badge variant="outline">Void</Badge>
      case 'uncollectible':
        return <Badge variant="destructive">Uncollectible</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="h-8 w-8 animate-spin text-[#3F5CEA]" />
      </div>
    )
  }

  if (!data) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen gap-4">
        <AlertCircle className="h-12 w-12 text-red-500" />
        <h2 className="text-2xl font-bold">Subscription Not Found</h2>
        <p className="text-gray-600">Unable to load subscription details</p>
        <Button onClick={() => router.push('/admin/subscriptions')}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Subscriptions
        </Button>
      </div>
    )
  }

  const { user, profile, subscription, facilities, paymentHistory, stripeSubscription } = data

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button
            variant="outline"
            size="sm"
            onClick={() => router.push('/admin/subscriptions')}
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Subscription Details</h1>
            <p className="text-gray-600">Manage {user.firstName} {user.lastName}'s subscription</p>
          </div>
        </div>
        {subscription.cancelAtPeriodEnd && (
          <Badge variant="destructive" className="h-8">
            Cancels at Period End
          </Badge>
        )}
      </div>

      {/* User & Business Info */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Mail className="h-5 w-5" />
              User Information
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div>
              <div className="text-sm text-gray-600">Name</div>
              <div className="font-medium">{user.firstName} {user.lastName}</div>
            </div>
            <div>
              <div className="text-sm text-gray-600">Email</div>
              <div className="font-medium">{user.email}</div>
            </div>
            <div>
              <div className="text-sm text-gray-600">Role</div>
              <Badge variant="outline">{user.role}</Badge>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building2 className="h-5 w-5" />
              Business Information
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div>
              <div className="text-sm text-gray-600">Business Name</div>
              <div className="font-medium">{profile.businessName}</div>
            </div>
            <div>
              <div className="text-sm text-gray-600">Business Type</div>
              <div className="font-medium">{profile.businessType}</div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <div className="text-sm text-gray-600">Phone</div>
                <div className="font-medium text-sm">{profile.phone || 'N/A'}</div>
              </div>
              <div>
                <div className="text-sm text-gray-600">Email</div>
                <div className="font-medium text-sm">{profile.email || 'N/A'}</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Subscription Status */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <CreditCard className="h-5 w-5" />
            Subscription Status
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <div className="text-sm text-gray-600 mb-2">Status</div>
              {getStatusBadge(subscription.status)}
            </div>
            <div>
              <div className="text-sm text-gray-600 mb-2">Environment</div>
              <EnvironmentBadge environment={subscription.environment as any} />
            </div>
            {subscription.currentPeriodEnd && (
              <div>
                <div className="text-sm text-gray-600 mb-2">Next Billing Date</div>
                <div className="flex items-center gap-2">
                  <Calendar className="h-4 w-4 text-gray-500" />
                  <span className="font-medium">
                    {format(new Date(subscription.currentPeriodEnd), 'MMM dd, yyyy')}
                  </span>
                </div>
              </div>
            )}
          </div>

          {subscription.stripeCustomerId && (
            <div className="mt-6 pt-6 border-t">
              <div className="text-sm text-gray-600 mb-3">Stripe Details</div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div>
                  <div className="text-gray-500">Customer ID</div>
                  <code className="text-xs bg-gray-100 px-2 py-1 rounded">{subscription.stripeCustomerId}</code>
                </div>
                {subscription.stripeSubscriptionId && (
                  <div>
                    <div className="text-gray-500">Subscription ID</div>
                    <code className="text-xs bg-gray-100 px-2 py-1 rounded">{subscription.stripeSubscriptionId}</code>
                  </div>
                )}
                {subscription.stripePriceId && (
                  <div>
                    <div className="text-gray-500">Price ID</div>
                    <code className="text-xs bg-gray-100 px-2 py-1 rounded">{subscription.stripePriceId}</code>
                  </div>
                )}
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Facilities */}
      <Card>
        <CardHeader>
          <CardTitle>Claimed Facilities ({facilities.claimed.length})</CardTitle>
          <CardDescription>Facilities currently managed by this owner</CardDescription>
        </CardHeader>
        <CardContent>
          {facilities.claimed.length === 0 ? (
            <p className="text-sm text-gray-500 text-center py-4">No claimed facilities</p>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              {facilities.claimed.map((facility) => (
                <div key={facility._id} className="flex items-start justify-between p-3 bg-gray-50 rounded-lg">
                  <div className="flex-1">
                    <div className="font-medium">{facility.name}</div>
                    <div className="text-sm text-gray-600 flex items-center gap-1 mt-1">
                      <MapPin className="h-3 w-3" />
                      {facility.location.city}, {facility.location.state}
                    </div>
                  </div>
                  <Link href={`/facility/${facility.slug}`} target="_blank">
                    <Button variant="ghost" size="sm">
                      <ExternalLink className="h-4 w-4" />
                    </Button>
                  </Link>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Payment History */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" />
            Payment History
          </CardTitle>
          <CardDescription>Recent invoices and payments</CardDescription>
        </CardHeader>
        <CardContent>
          {paymentHistory.length === 0 ? (
            <div className="text-center py-8">
              <AlertCircle className="h-12 w-12 text-gray-400 mx-auto mb-3" />
              <p className="text-sm text-gray-600 font-medium mb-2">No payment history available</p>
              <p className="text-xs text-gray-500 max-w-md mx-auto">
                {subscription.environment === 'sandbox'
                  ? "This is a test/sandbox subscription. Real payment invoices only appear for production mode subscriptions. Test payments don't generate real invoices in Stripe."
                  : subscription.status === 'active'
                    ? "First invoice is generated immediately upon subscription (within 1-2 hours). If you don't see invoices yet, check Stripe dashboard or wait a few minutes."
                    : "No invoices have been generated for this subscription yet."}
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Date</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Invoice</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {paymentHistory.map((payment) => (
                    <TableRow key={payment.id}>
                      <TableCell>
                        {format(new Date(payment.date), 'MMM dd, yyyy')}
                      </TableCell>
                      <TableCell className="font-medium">
                        ${payment.amount.toFixed(2)} {payment.currency}
                      </TableCell>
                      <TableCell>
                        {getPaymentStatusBadge(payment.status)}
                      </TableCell>
                      <TableCell>
                        <div className="flex gap-2">
                          {payment.invoiceUrl && (
                            <a href={payment.invoiceUrl} target="_blank" rel="noopener noreferrer">
                              <Button variant="ghost" size="sm">
                                <ExternalLink className="h-4 w-4 mr-1" />
                                View
                              </Button>
                            </a>
                          )}
                          {payment.pdfUrl && (
                            <a href={payment.pdfUrl} target="_blank" rel="noopener noreferrer">
                              <Button variant="ghost" size="sm">
                                <FileText className="h-4 w-4 mr-1" />
                                PDF
                              </Button>
                            </a>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}