import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import {
  ChevronLeft,
  ChevronRight,
  Loader2,
  ShoppingCart,
  Trash2,
  RefreshCw,
  Eye,
  User,
  Mail,
  Ticket,
  CheckCircle2,
  XCircle,
  Clock,
  ExternalLink,
  Package,
} from "lucide-react"
import { useAbandonedCartCarts, useCartDetails } from "../../hooks/use-abandoned-cart"
import { CartDetailsResponse } from "../../types"

function StatusBadge({ status }: { status: string }) {
  switch (status) {
    case 'abandoned':
      return <Badge variant="destructive">Abandoned</Badge>
    case 'recovered':
      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Recovered</Badge>
    case 'restored':
      return <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">Restored</Badge>
    case 'ordered':
      return <Badge className="bg-amber-100 text-amber-800 hover:bg-amber-100">Awaiting Payment</Badge>
    case 'unsubscribed':
      return <Badge variant="secondary">Unsubscribed</Badge>
    case 'active':
      return <Badge variant="outline">Active</Badge>
    default:
      return <Badge variant="secondary">{status}</Badge>
  }
}

function formatDate(dateStr: string) {
  if (!dateStr) return '—'
  const date = new Date(dateStr)
  return date.toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

function formatCurrency(amount: string, currency: string) {
  const num = parseFloat(amount)
  if (isNaN(num)) return '—'
  try {
    return new Intl.NumberFormat(undefined, {
      style: 'currency',
      currency: currency || 'USD',
    }).format(num)
  } catch {
    return `${currency} ${num.toFixed(2)}`
  }
}

function CartDetailsSheet({
  details,
  loading,
  open,
  onOpenChange,
}: {
  details: CartDetailsResponse | null
  loading: boolean
  open: boolean
  onOpenChange: (open: boolean) => void
}) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="sm:max-w-lg overflow-y-auto">
        <SheetHeader>
          <SheetTitle className="flex items-center gap-2">
            <ShoppingCart className="h-5 w-5" />
            Cart Details
          </SheetTitle>
          <SheetDescription>
            Full breakdown of this abandoned cart.
          </SheetDescription>
        </SheetHeader>

        {loading ? (
          <div className="flex items-center justify-center py-12">
            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
          </div>
        ) : details ? (
          <div className="space-y-6 mt-6">
            {/* Customer Info */}
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <User className="h-4 w-4" />
                  Customer
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Name</span>
                  <span className="font-medium">{details.customer.name || 'Unknown'}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Email</span>
                  <span className="font-medium">{details.customer.email || '—'}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Type</span>
                  <Badge variant="outline" className="capitalize">{details.customer.type}</Badge>
                </div>
              </CardContent>
            </Card>

            {/* Status & Recovery */}
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Clock className="h-4 w-4" />
                  Status
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between text-sm items-center">
                  <span className="text-muted-foreground">Status</span>
                  <StatusBadge status={details.status} />
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Created</span>
                  <span>{formatDate(details.created_at)}</span>
                </div>
                {details.recovered_at && (
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Recovered</span>
                    <span className="text-green-600">{formatDate(details.recovered_at)}</span>
                  </div>
                )}
                {details.order_id && (
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Order</span>
                    <span className="font-medium">#{details.order_id}</span>
                  </div>
                )}
                {details.coupon_code && (
                  <div className="flex justify-between text-sm items-center">
                    <span className="text-muted-foreground flex items-center gap-1">
                      <Ticket className="h-3 w-3" /> Coupon
                    </span>
                    <code className="bg-muted px-2 py-0.5 rounded text-xs font-mono">{details.coupon_code}</code>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Products */}
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Package className="h-4 w-4" />
                  Products ({details.products.length})
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {details.products.map((product, idx) => (
                    <div key={idx} className="flex items-center gap-3">
                      <div className="h-12 w-12 rounded border bg-muted flex-shrink-0 overflow-hidden">
                        {product.image ? (
                          <img
                            src={product.image}
                            alt={product.name}
                            className="h-full w-full object-cover"
                          />
                        ) : (
                          <div className="h-full w-full flex items-center justify-center">
                            <Package className="h-5 w-5 text-muted-foreground" />
                          </div>
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">{product.name}</p>
                        <p className="text-xs text-muted-foreground">
                          Qty: {product.quantity} × {formatCurrency(product.price, details.currency)}
                        </p>
                      </div>
                      {!product.in_stock && (
                        <Badge variant="secondary" className="text-xs flex-shrink-0">Out of stock</Badge>
                      )}
                    </div>
                  ))}
                </div>
                <Separator className="my-3" />
                <div className="flex justify-between font-medium text-sm">
                  <span>Cart Total</span>
                  <span>{formatCurrency(details.cart_total, details.currency)}</span>
                </div>
              </CardContent>
            </Card>

            {/* Email History */}
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Mail className="h-4 w-4" />
                  Email History ({details.email_history.length})
                </CardTitle>
              </CardHeader>
              <CardContent>
                {details.email_history.length === 0 ? (
                  <p className="text-sm text-muted-foreground">No emails sent yet.</p>
                ) : (
                  <div className="space-y-3">
                    {details.email_history.map((email, idx) => (
                      <div key={idx} className="rounded-lg border p-3 space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-xs font-medium bg-muted px-2 py-0.5 rounded">
                            Email #{email.email_number}
                          </span>
                          <span className="text-xs text-muted-foreground">{formatDate(email.sent_at)}</span>
                        </div>
                        <p className="text-sm font-medium">{email.subject}</p>
                        <div className="flex items-center gap-3 text-xs">
                          <span className={`flex items-center gap-1 ${email.opened_at ? 'text-green-600' : 'text-muted-foreground'}`}>
                            {email.opened_at ? <CheckCircle2 className="h-3 w-3" /> : <XCircle className="h-3 w-3" />}
                            {email.opened_at ? `Opened ${formatDate(email.opened_at)}` : 'Not opened'}
                          </span>
                          <span className={`flex items-center gap-1 ${email.clicked_at ? 'text-green-600' : 'text-muted-foreground'}`}>
                            {email.clicked_at ? <ExternalLink className="h-3 w-3" /> : <XCircle className="h-3 w-3" />}
                            {email.clicked_at ? `Clicked ${formatDate(email.clicked_at)}` : 'Not clicked'}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <ShoppingCart className="h-10 w-10 text-muted-foreground/50 mb-3" />
            <p className="text-sm text-muted-foreground">Could not load cart details.</p>
          </div>
        )}
      </SheetContent>
    </Sheet>
  )
}

export function CartsTab() {
  const {
    carts,
    total,
    page,
    pages,
    loading,
    statusFilter,
    setPage,
    deleteCart,
    changeStatusFilter,
    refresh,
  } = useAbandonedCartCarts()

  const [selectedCartId, setSelectedCartId] = useState<number | null>(null)
  const [sheetOpen, setSheetOpen] = useState(false)
  const { details, loading: detailsLoading } = useCartDetails(selectedCartId)

  const handleView = (cartId: number) => {
    setSelectedCartId(cartId)
    setSheetOpen(true)
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center p-12">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    )
  }

  return (
    <div className="space-y-4 p-1">
      {/* Filters */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Select value={statusFilter || 'all'} onValueChange={(val) => changeStatusFilter(val === 'all' ? '' : val)}>
            <SelectTrigger className="w-[160px]">
              <SelectValue placeholder="All Statuses" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="abandoned">Abandoned</SelectItem>
              <SelectItem value="restored">Restored</SelectItem>
              <SelectItem value="ordered">Awaiting Payment</SelectItem>
              <SelectItem value="recovered">Recovered</SelectItem>
              <SelectItem value="unsubscribed">Unsubscribed</SelectItem>
            </SelectContent>
          </Select>
          <span className="text-sm text-muted-foreground">
            {total} {total === 1 ? 'cart' : 'carts'} total
          </span>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={refresh} className="gap-2">
            <RefreshCw className="h-4 w-4" />
            Refresh
          </Button>
        </div>
      </div>

      {/* Table */}
      {carts.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <ShoppingCart className="h-12 w-12 text-muted-foreground/50 mb-4" />
          <h3 className="text-lg font-medium">No abandoned carts yet</h3>
          <p className="text-sm text-muted-foreground mt-1">
            Abandoned carts will appear here once customers leave items in their carts.
          </p>
        </div>
      ) : (
        <>
          <div className="border rounded-lg overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="pl-4">Customer</TableHead>
                  <TableHead>Items</TableHead>
                  <TableHead>Total</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Emails</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead className="w-[90px] pr-4 text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {carts.map((cart) => (
                  <TableRow key={cart.id}>
                    <TableCell className="pl-4">
                      <div>
                        {cart.customer_name && (
                          <p className="font-medium text-sm">{cart.customer_name}</p>
                        )}
                        <p className="text-sm text-muted-foreground">{cart.email || '—'}</p>
                      </div>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm">{cart.item_count} {cart.item_count === 1 ? 'item' : 'items'}</span>
                    </TableCell>
                    <TableCell>
                      <span className="font-medium text-sm">{formatCurrency(cart.cart_total, cart.currency)}</span>
                    </TableCell>
                    <TableCell>
                      <StatusBadge status={cart.status} />
                    </TableCell>
                    <TableCell>
                      <span className="text-sm">{cart.emails_sent}</span>
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-muted-foreground">{formatDate(cart.created_at)}</span>
                    </TableCell>
                    <TableCell className="pr-4">
                      <div className="flex items-center justify-end gap-1">
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-muted-foreground hover:text-foreground"
                          onClick={() => handleView(cart.id)}
                        >
                          <Eye className="h-4 w-4" />
                        </Button>
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-destructive">
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Delete this cart record?</AlertDialogTitle>
                              <AlertDialogDescription>
                                This will permanently delete this abandoned cart record and its email history. This action cannot be undone.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                              <AlertDialogAction onClick={() => deleteCart(cart.id)}>Delete</AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {/* Pagination */}
          {pages > 1 && (
            <div className="flex items-center justify-between">
              <p className="text-sm text-muted-foreground">
                Page {page} of {pages}
              </p>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  disabled={page <= 1}
                  onClick={() => setPage(page - 1)}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={page >= pages}
                  onClick={() => setPage(page + 1)}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          )}
        </>
      )}

      {/* Cart Details Sheet */}
      <CartDetailsSheet
        details={details}
        loading={detailsLoading}
        open={sheetOpen}
        onOpenChange={(open) => {
          setSheetOpen(open)
          if (!open) setSelectedCartId(null)
        }}
      />
    </div>
  )
}