app/admin/testimonials/page.tsx

"use client"

import { useState, useEffect, useCallback } from "react"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Plus, Pencil, Trash2, Star, CheckCircle, XCircle, Loader2 } from "lucide-react"

const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"

type Testimonial = {
    id: string
    clientName: string
    company: string | null
    content: string
    rating: number
    imageUrl: string | null
    approved: boolean
    createdAt: string
}

type FormData = {
    clientName: string
    company: string
    content: string
    rating: number
    imageUrl: string
}

const emptyForm: FormData = {
    clientName: "",
    company: "",
    content: "",
    rating: 5,
    imageUrl: "",
}

export default function AdminTestimonialsPage() {
    const { data: session, status } = useSession()
    const router = useRouter()

    const [items, setItems] = useState<Testimonial[]>([])
    const [loading, setLoading] = useState(true)
    const [saving, setSaving] = useState(false)
    const [formError, setFormError] = useState("")

    const [dialogOpen, setDialogOpen] = useState(false)
    const [editingId, setEditingId] = useState<string | null>(null)
    const [form, setForm] = useState<FormData>(emptyForm)

    const [deleteId, setDeleteId] = useState<string | null>(null)
    const [deleteName, setDeleteName] = useState("")

    useEffect(() => {
        if (status === "unauthenticated") router.push("/admin/login")
    }, [status, router])

    const fetchItems = useCallback(async () => {
        try {
            const res = await fetch(`${API_URL}/admin/testimonials`, {
                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
                credentials: "include",
            })
            if (res.ok) {
                const data = await res.json()
                setItems(data)
            }
        } catch (err) {
            console.error("Failed to fetch testimonials:", err)
        } finally {
            setLoading(false)
        }
    }, [session])

    useEffect(() => {
        if (status === "authenticated") fetchItems()
    }, [status, fetchItems])

    const openCreate = () => {
        setEditingId(null)
        setForm(emptyForm)
        setFormError("")
        setDialogOpen(true)
    }

    const openEdit = (item: Testimonial) => {
        setEditingId(item.id)
        setForm({
            clientName: item.clientName,
            company: item.company || "",
            content: item.content,
            rating: item.rating,
            imageUrl: item.imageUrl || "",
        })
        setFormError("")
        setDialogOpen(true)
    }

    const handleSubmit = async () => {
        if (!form.clientName.trim()) return setFormError("Client name is required")
        if (!form.content.trim()) return setFormError("Testimonial content is required")
        if (form.rating < 1 || form.rating > 5) return setFormError("Rating must be between 1 and 5")

        setSaving(true)
        setFormError("")

        try {
            const url = editingId
                ? `${API_URL}/admin/testimonials/${editingId}`
                : `${API_URL}/admin/testimonials`

            const res = await fetch(url, {
                method: editingId ? "PATCH" : "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${(session as any)?.accessToken || "session"}`,
                },
                credentials: "include",
                body: JSON.stringify({
                    clientName: form.clientName.trim(),
                    company: form.company.trim() || null,
                    content: form.content.trim(),
                    rating: form.rating,
                    imageUrl: form.imageUrl.trim() || null,
                }),
            })

            const data = await res.json()
            if (!res.ok) {
                setFormError(data.error || "Something went wrong")
                return
            }

            setDialogOpen(false)
            fetchItems()
        } catch (err) {
            setFormError("Network error. Please try again.")
        } finally {
            setSaving(false)
        }
    }

    const handleToggle = async (id: string) => {
        try {
            await fetch(`${API_URL}/admin/testimonials/${id}/toggle`, {
                method: "PATCH",
                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
                credentials: "include",
            })
            fetchItems()
        } catch (err) {
            console.error("Toggle failed:", err)
        }
    }

    const handleDelete = async () => {
        if (!deleteId) return
        try {
            await fetch(`${API_URL}/admin/testimonials/${deleteId}`, {
                method: "DELETE",
                headers: { Authorization: `Bearer ${(session as any)?.accessToken || "session"}` },
                credentials: "include",
            })
            setDeleteId(null)
            fetchItems()
        } catch (err) {
            console.error("Delete failed:", err)
        }
    }

    if (status === "loading" || loading) {
        return (
            <div className="flex items-center justify-center min-h-[60vh]">

                <Loader2 className="h-8 w-8 animate-spin text-primary" suppressHydrationWarning />

            </div>
        )
    }

    return (
        <div className="p-8 space-y-8">

            {/* Header */}

            <div className="flex items-center justify-between">

                <div>

                    <h1 className="text-3xl font-bold">Testimonials</h1>

                    <p className="text-muted-foreground mt-1">Manage client testimonials and approval status</p>

                </div>

                <Button onClick={openCreate}>

                    <Plus className="mr-2 h-4 w-4" suppressHydrationWarning />

                    New Testimonial

                </Button>

            </div>



            {/* Testimonials list */}

            {items.length === 0 ? (

                <Card>

                    <CardContent className="flex flex-col items-center justify-center py-16 text-center">

                        <p className="text-muted-foreground mb-4">No testimonials yet.</p>

                        <Button onClick={openCreate} variant="outline">

                            <Plus className="mr-2 h-4 w-4" suppressHydrationWarning />

                            Add Your First Testimonial

                        </Button>

                    </CardContent>

                </Card>

            ) : (

                <div className="grid gap-4">

                    {items.map((item) => (

                        <Card key={item.id} className="hover:shadow-md transition-shadow">

                            <CardContent className="flex items-start justify-between py-4 gap-4">

                                <div className="flex-1 min-w-0">

                                    <div className="flex items-center gap-3 mb-1">

                                        <h3 className="font-semibold">{item.clientName}</h3>

                                        {item.company && (

                                            <span className="text-sm text-muted-foreground">

                                                {item.company}

                                            </span>

                                        )}

                                        {/* Approval badge */}

                                        {item.approved ? (

                                            <span className="inline-flex items-center gap-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 px-2 py-0.5 rounded-full text-xs font-medium">

                                                <CheckCircle className="h-3 w-3" suppressHydrationWarning />

                                                Approved

                                            </span>

                                        ) : (

                                            <span className="inline-flex items-center gap-1 bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 px-2 py-0.5 rounded-full text-xs font-medium">

                                                <XCircle className="h-3 w-3" suppressHydrationWarning />

                                                Pending

                                            </span>

                                        )}

                                    </div>

                                    <p className="text-sm text-muted-foreground line-clamp-2 mb-2">

                                        &ldquo;{item.content}&rdquo;

                                    </p>

                                    <div className="flex items-center gap-1">

                                        {[...Array(5)].map((_, j) => (

                                            <Star

                                                key={j}

                                                className={`h-3.5 w-3.5 ${j < item.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`}

                                                suppressHydrationWarning

                                            />

                                        ))}

                                        <span className="text-xs text-muted-foreground ml-2">

                                            {new Date(item.createdAt).toLocaleDateString()}

                                        </span>

                                    </div>

                                </div>

                                <div className="flex items-center gap-1 shrink-0">

                                    <Button

                                        variant="ghost"

                                        size="sm"

                                        onClick={() => handleToggle(item.id)}

                                        className={item.approved ? "text-amber-600 hover:text-amber-700" : "text-green-600 hover:text-green-700"}

                                    >

                                        {item.approved ? "Unpublish" : "Approve"}

                                    </Button>

                                    <Button variant="ghost" size="icon-sm" onClick={() => openEdit(item)}>

                                        <Pencil className="h-4 w-4" suppressHydrationWarning />

                                    </Button>

                                    <Button

                                        variant="ghost"

                                        size="icon-sm"

                                        className="text-destructive hover:text-destructive"

                                        onClick={() => { setDeleteId(item.id); setDeleteName(item.clientName) }}

                                    >

                                        <Trash2 className="h-4 w-4" suppressHydrationWarning />

                                    </Button>

                                </div>

                            </CardContent>

                        </Card>

                    ))}

                </div>

            )}



            {/* Create/Edit Dialog */}

            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>

                <DialogContent className="max-w-lg">

                    <DialogHeader>

                        <DialogTitle>{editingId ? "Edit Testimonial" : "New Testimonial"}</DialogTitle>

                        <DialogDescription>

                            {editingId ? "Update the testimonial details." : "Add a new client testimonial."}

                        </DialogDescription>

                    </DialogHeader>

                    <div className="space-y-4 py-4">

                        <div className="grid grid-cols-2 gap-4">

                            <div>

                                <label className="text-sm font-medium mb-1 block">Client Name *</label>

                                <Input

                                    value={form.clientName}

                                    onChange={(e) => setForm((p) => ({ ...p, clientName: e.target.value }))}

                                    placeholder="Jane Doe"

                                />

                            </div>

                            <div>

                                <label className="text-sm font-medium mb-1 block">Company</label>

                                <Input

                                    value={form.company}

                                    onChange={(e) => setForm((p) => ({ ...p, company: e.target.value }))}

                                    placeholder="Acme Inc."

                                />

                            </div>

                        </div>

                        <div>

                            <label className="text-sm font-medium mb-1 block">Testimonial *</label>

                            <textarea

                                className="flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"

                                value={form.content}

                                onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))}

                                placeholder="What the client said about your work..."

                            />

                        </div>

                        <div>

                            <label className="text-sm font-medium mb-1 block">Rating (1-5)</label>

                            <div className="flex items-center gap-1">

                                {[1, 2, 3, 4, 5].map((val) => (

                                    <button

                                        key={val}

                                        type="button"

                                        onClick={() => setForm((p) => ({ ...p, rating: val }))}

                                        className="p-1 hover:scale-110 transition-transform"

                                    >

                                        <Star

                                            className={`h-6 w-6 ${val <= form.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`}

                                            suppressHydrationWarning

                                        />

                                    </button>

                                ))}

                                <span className="text-sm text-muted-foreground ml-2">{form.rating}/5</span>

                            </div>

                        </div>

                        <div>

                            <label className="text-sm font-medium mb-1 block">Avatar URL</label>

                            <Input

                                value={form.imageUrl}

                                onChange={(e) => setForm((p) => ({ ...p, imageUrl: e.target.value }))}

                                placeholder="https://example.com/avatar.jpg"

                            />

                        </div>

                        {formError && (

                            <p className="text-sm text-destructive font-medium">{formError}</p>

                        )}

                    </div>

                    <DialogFooter>

                        <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={saving}>

                            Cancel

                        </Button>

                        <Button onClick={handleSubmit} disabled={saving}>

                            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" suppressHydrationWarning />}

                            {editingId ? "Save Changes" : "Add Testimonial"}

                        </Button>

                    </DialogFooter>

                </DialogContent>

            </Dialog>



            {/* Delete Confirmation */}

            <AlertDialog open={!!deleteId} onOpenChange={(open) => { if (!open) setDeleteId(null) }}>

                <AlertDialogContent>

                    <AlertDialogHeader>

                        <AlertDialogTitle>Delete testimonial from &quot;{deleteName}&quot;?</AlertDialogTitle>

                        <AlertDialogDescription>

                            This action cannot be undone. This will permanently remove this testimonial.

                        </AlertDialogDescription>

                    </AlertDialogHeader>

                    <AlertDialogFooter>

                        <AlertDialogCancel>Cancel</AlertDialogCancel>

                        <AlertDialogAction

                            onClick={handleDelete}

                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"

                        >

                            Delete

                        </AlertDialogAction>

                    </AlertDialogFooter>

                </AlertDialogContent>

            </AlertDialog>

        </div>
    )
}