"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Loader2, Plus, Trash2, Edit } from "lucide-react"

export default function CouponsAdmin() {
  const [coupons, setCoupons] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [newCoupon, setNewCoupon] = useState({
    code: "",
    discount_percent: 10,
    max_discount_amount: 100,
  })

  useEffect(() => {
    fetchCoupons()
  }, [])

  const fetchCoupons = async () => {
    try {
      const res = await fetch('/api/admin/coupons')
      const data = await res.json()
      setCoupons(data)
    } catch (e) {
      console.error(e)
    } finally {
      setLoading(false)
    }
  }

  const handleCreate = async () => {
    if (!newCoupon.code) return
    setSubmitting(true)
    try {
      await fetch('/api/admin/coupons', {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(newCoupon)
      })
      setNewCoupon({ code: "", discount_percent: 10, max_discount_amount: 100 })
      await fetchCoupons()
    } catch (e) {
      console.error(e)
    } finally {
      setSubmitting(false)
    }
  }

  const handleDelete = async (id: string) => {
    if (!confirm("Delete this coupon?")) return
    try {
      await fetch(`/api/admin/coupons/${id}`, { method: "DELETE" })
      await fetchCoupons()
    } catch (e) {
      console.error(e)
    }
  }

  return (
    <div className="p-8 max-w-6xl mx-auto space-y-8 animate-in fade-in duration-500">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Coupon Management</h1>
        <p className="text-muted-foreground mt-1 font-medium">Create and manage discount codes for subscriptions.</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        <Card className="col-span-1 border-border shadow-sm">
          <CardHeader>
            <CardTitle>Create Coupon</CardTitle>
            <CardDescription>Add a new promo code</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label>Code</Label>
              <Input 
                placeholder="e.g. DIWALI20" 
                value={newCoupon.code}
                onChange={e => setNewCoupon({...newCoupon, code: e.target.value.toUpperCase()})}
              />
            </div>
            <div className="space-y-2">
              <Label>Discount %</Label>
              <Input 
                type="number" 
                value={newCoupon.discount_percent}
                onChange={e => setNewCoupon({...newCoupon, discount_percent: Number(e.target.value)})}
              />
            </div>
            <div className="space-y-2">
              <Label>Max Discount (₹)</Label>
              <Input 
                type="number" 
                value={newCoupon.max_discount_amount}
                onChange={e => setNewCoupon({...newCoupon, max_discount_amount: Number(e.target.value)})}
              />
            </div>
            <Button className="w-full" onClick={handleCreate} disabled={submitting || !newCoupon.code}>
              {submitting ? <Loader2 className="animate-spin" /> : <><Plus size={16} className="mr-2"/> Create Coupon</>}
            </Button>
          </CardContent>
        </Card>

        <Card className="col-span-1 md:col-span-2 border-border shadow-sm">
          <CardHeader>
            <CardTitle>Active Coupons</CardTitle>
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className="flex justify-center p-8"><Loader2 className="animate-spin text-muted-foreground" /></div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Code</TableHead>
                    <TableHead>Discount</TableHead>
                    <TableHead>Max Off</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {coupons.length === 0 && (
                    <TableRow><TableCell colSpan={5} className="text-center text-muted-foreground">No coupons found.</TableCell></TableRow>
                  )}
                  {coupons.map(c => (
                    <TableRow key={c.id}>
                      <TableCell className="font-bold">{c.code}</TableCell>
                      <TableCell>{c.discount_percent}%</TableCell>
                      <TableCell>₹{c.max_discount_amount}</TableCell>
                      <TableCell>
                        {c.is_active ? <Badge className="bg-green-500/20 text-green-500 border-green-500/30">Active</Badge> : <Badge variant="outline">Inactive</Badge>}
                      </TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm" onClick={() => handleDelete(c.id)}>
                          <Trash2 size={16} className="text-red-500" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}