"use client"

import { useState, useEffect } from "react"
import {
  Star,
  MessageSquare,
  Trash2,
  CheckCircle,
  Flag,
  Sparkles,
  ArrowUpRight,
  Filter,
  Search,
} from "lucide-react"
import api from "@/lib/axios"
import Swal from "sweetalert2";

type ProductReview = {
  id: string
  userName: string
  userAvatar: string
  rating: number
  comment: string
  date: string
  productName: string
  productImage: string
  status: "PENDING" | "APPROVED" | "FLAGGED"
}

export default function ReviewsPage() {
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("ALL")
  const [loading, setLoading] = useState(true)
  const [reviews, setReviews] = useState<ProductReview[]>([])

  useEffect(() => {
    async function loadReviews() {
      try {
        const res = await api.get("/admin/reviews")
        setReviews(res.data)
      } catch (err) {
        console.error(err)
      } finally {
        setLoading(false)
      }
    }
    loadReviews()
  }, [])



  // Filter Logic
  const filteredReviews = reviews.filter((r) => {
    const matchesSearch =
      r.userName.toLowerCase().includes(search.toLowerCase()) ||
      r.productName.toLowerCase().includes(search.toLowerCase()) ||
      (r.comment && r.comment.toLowerCase().includes(search.toLowerCase()))
    
    const matchesStatus = statusFilter === "ALL" || r.status === statusFilter
    return matchesSearch && matchesStatus
  })

  // Moderation Handlers
  function handleApprove(id: string) {
    setReviews((prev) =>
      prev.map((r) => (r.id === id ? { ...r, status: "APPROVED" } : r))
    )
  }

  function handleFlag(id: string) {
    setReviews((prev) =>
      prev.map((r) => (r.id === id ? { ...r, status: "FLAGGED" } : r))
    )
  }

  async function handleDelete(id: string) {
    if (!(await Swal.fire({ title: "Are you sure?", text: "Are you sure you want to permanently remove this review?", icon: "warning", showCancelButton: true, confirmButtonColor: "#18181b", cancelButtonColor: "#ef4444", confirmButtonText: "Yes" })).isConfirmed) return
    setReviews((prev) => prev.filter((r) => r.id !== id))
  }

  // Aggregate calculations
  const totalReviewsCount = reviews.length
  const averageRating = totalReviewsCount === 0 ? "0.0" : (
    reviews.reduce((acc, curr) => acc + curr.rating, 0) / totalReviewsCount
  ).toFixed(1)

  const countRating = (r: number) => reviews.filter(rev => rev.rating === r).length
  const percRating = (r: number) => totalReviewsCount === 0 ? 0 : Math.round((countRating(r) / totalReviewsCount) * 100)

  return (
    <div className="space-y-10 max-w-7xl mx-auto p-2">
      {/* HEADER */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <div className="flex items-center gap-3">
            <div className="p-3 bg-zinc-900 text-white rounded-2xl shadow-xl">
              <MessageSquare size={24} />
            </div>
            <h1 className="text-4xl font-extrabold tracking-tight text-zinc-900">
              Product Reviews
            </h1>
          </div>
          <p className="text-zinc-500 mt-2 text-sm max-w-md">
            Review customer feedback, rate products, and moderate product testimonial listings.
          </p>
        </div>
      </div>

      {/* MATRIX AND HIGHLIGHT ROW */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
        {/* TOTAL SUMMARY CARD */}
        <div className="bg-white rounded-3xl border border-zinc-100 p-8 shadow-sm flex flex-col items-center text-center justify-center relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/5 rounded-full blur-3xl -mr-8 -mt-8" />
          
          <span className="text-xs font-semibold text-zinc-400 uppercase tracking-widest mb-4">
            Curated Sentiment
          </span>

          {/* Average circle indicator */}
          <div className="relative w-32 h-32 rounded-full border-4 border-zinc-50 flex flex-col items-center justify-center bg-zinc-950 text-white shadow-xl ring-8 ring-zinc-50/50 mb-6">
            <span className="text-4xl font-black font-mono tracking-tight">
              {averageRating}
            </span>
            <span className="text-[10px] font-bold text-zinc-400 mt-1 uppercase tracking-widest">
              Out of 5
            </span>
          </div>

          <div className="flex items-center gap-1 text-yellow-500 mb-2">
            {[1, 2, 3, 4, 5].map((s) => (
              <Star
                key={s}
                className={`w-5 h-5 ${
                  s <= Math.round(Number(averageRating))
                    ? "fill-yellow-500 stroke-yellow-500"
                    : "stroke-zinc-200 fill-zinc-50"
                }`}
              />
            ))}
          </div>

          <p className="text-xs text-zinc-400 font-bold uppercase tracking-wider">
            Based on {totalReviewsCount} Customer Submissions
          </p>
        </div>

        {/* DETAILS STAR INDEX RATINGS */}
        <div className="lg:col-span-2 bg-white rounded-3xl border border-zinc-100 p-8 shadow-sm flex flex-col justify-between">
          <div>
            <h3 className="text-lg font-black text-zinc-950 flex items-center gap-2 mb-6">
              <Sparkles className="text-indigo-600 w-5 h-5" />
              Rating Breakdown Matrix
            </h3>

            <div className="space-y-4">
              {[5, 4, 3, 2, 1].map((star) => (
                <div key={star} className="flex items-center gap-4 text-xs font-semibold text-zinc-700">
                  <span className="w-12 text-right">{star} Stars</span>
                  <div className="flex-1 bg-zinc-50 border border-zinc-100 h-3 rounded-full overflow-hidden">
                    <div className="h-full bg-yellow-500 rounded-full shadow-inner" style={{ width: `${percRating(star)}%` }} />
                  </div>
                  <span className="w-8 font-mono text-right text-zinc-400">{percRating(star)}%</span>
                </div>
              ))}
            </div>
          </div>

          <div className="text-right text-xs font-bold text-indigo-600 bg-indigo-50/50 p-3 rounded-2xl border border-indigo-100/30 mt-4">
            * Verified Purchase filters are active for all testimonial lists.
          </div>
        </div>
      </div>

      {/* FILTER & SEARCH */}
      <div className="bg-white rounded-3xl border border-zinc-100 p-6 shadow-sm">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400 w-5 h-5" />
            <input
              type="text"
              placeholder="Search comments by client names, product title keywords..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full border border-zinc-200 rounded-2xl pl-12 pr-5 py-4 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent transition bg-zinc-50/50 text-sm"
            />
          </div>

          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="border border-zinc-200 rounded-2xl px-5 py-4 bg-zinc-50/50 text-sm focus:outline-none focus:ring-2 focus:ring-zinc-950 text-zinc-600 font-medium"
          >
            <option value="ALL">All Feedbacks</option>
            <option value="PENDING">Pending Moderation</option>
            <option value="APPROVED">Approved Reviews</option>
            <option value="FLAGGED">Flagged Warnings</option>
          </select>
        </div>

        {/* REVIEWS GRID FEED */}
        <div className="mt-8 grid grid-cols-1 gap-6">
          {filteredReviews.map((review) => {
            const isPending = review.status === "PENDING"
            const isFlagged = review.status === "FLAGGED"

            return (
              <div
                key={review.id}
                className={`group border rounded-3xl p-6 transition flex flex-col md:flex-row md:items-start justify-between gap-6 ${
                  isFlagged
                    ? "bg-rose-50/10 border-rose-100"
                    : isPending
                    ? "bg-amber-50/10 border-amber-100"
                    : "bg-white border-zinc-100 hover:shadow-xl"
                }`}
              >
                {/* DETAILS CONTAINER */}
                <div className="flex-1 space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-zinc-950 text-white font-extrabold text-xs flex items-center justify-center">
                      {review.userAvatar}
                    </div>
                    <div>
                      <h5 className="font-bold text-zinc-950 text-sm">
                        {review.userName}
                      </h5>
                      <span className="text-[10px] text-zinc-400 font-bold font-mono">
                        Submitted: {review.date}
                      </span>
                    </div>
                  </div>

                  {/* Rating Stars */}
                  <div className="flex items-center gap-1 text-yellow-500">
                    {[1, 2, 3, 4, 5].map((s) => (
                      <Star
                        key={s}
                        className={`w-4 h-4 ${
                          s <= review.rating
                            ? "fill-yellow-500 stroke-yellow-500"
                            : "stroke-zinc-200 fill-zinc-50"
                        }`}
                      />
                    ))}
                  </div>

                  {/* Comment */}
                  <p className="text-zinc-700 text-sm leading-relaxed font-medium">
                    &ldquo;{review.comment}&rdquo;
                  </p>

                  {/* Associated Product Link */}
                  <div className="flex items-center gap-3 bg-zinc-50 border rounded-2xl p-3 max-w-md">
                    <img
                      src={review.productImage}
                      alt={review.productName}
                      className="w-10 h-10 rounded-lg object-cover"
                    />
                    <div className="min-w-0">
                      <p className="text-xs font-bold text-zinc-950 truncate">
                        {review.productName}
                      </p>
                      <span className="text-[9px] font-bold text-indigo-600 flex items-center gap-0.5 mt-0.5">
                        Testimonial Subject
                        <ArrowUpRight className="w-2.5 h-2.5" />
                      </span>
                    </div>
                  </div>
                </div>

                {/* CONTROL ACTION BUTTONS */}
                <div className="flex md:flex-col items-center gap-2 self-center md:self-start shrink-0">
                  {/* Status Indicator Badge */}
                  <span
                    className={`px-3 py-1 rounded-full text-[9px] font-extrabold tracking-wider ${
                      review.status === "APPROVED"
                        ? "bg-emerald-50 text-emerald-700 border border-emerald-100"
                        : isFlagged
                        ? "bg-rose-50 text-rose-700 border border-rose-100"
                        : "bg-amber-50 text-amber-700 border border-amber-100"
                    }`}
                  >
                    {review.status}
                  </span>

                  <div className="flex gap-1.5 mt-2">
                    {/* Approve button */}
                    {isPending && (
                      <button
                        onClick={() => handleApprove(review.id)}
                        className="p-2.5 rounded-xl border border-emerald-100 bg-emerald-50 text-emerald-600 hover:bg-emerald-500 hover:text-white transition cursor-pointer"
                        title="Approve Testimony"
                      >
                        <CheckCircle size={15} />
                      </button>
                    )}

                    {/* Flag button */}
                    {!isFlagged && (
                      <button
                        onClick={() => handleFlag(review.id)}
                        className="p-2.5 rounded-xl border border-amber-100 bg-amber-50/50 text-amber-600 hover:bg-amber-500 hover:text-white transition cursor-pointer"
                        title="Flag Testimony"
                      >
                        <Flag size={15} />
                      </button>
                    )}

                    {/* Delete button */}
                    <button
                      onClick={() => handleDelete(review.id)}
                      className="p-2.5 rounded-xl border border-transparent hover:border-red-100 text-zinc-400 hover:text-red-500 hover:bg-red-50/50 transition cursor-pointer"
                      title="Remove Testimony"
                    >
                      <Trash2 size={15} />
                    </button>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}