"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Star } from "lucide-react";
import MainTitle from "@/components/layout/dashboard/main-title";
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 DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { cn } from "@/lib/utils";
import { toast } from "sonner";

type ReviewRow = {
  _id: string;
  name: string;
  email?: string;
  rating: number;
  title?: string;
  comment: string;
  status: "pending" | "approved" | "rejected";
  createdAt?: string;
  product?: { _id: string; title: string; slug: string } | null;
};

const STATUS_FILTERS = ["all", "pending", "approved", "rejected"] as const;
type StatusFilter = (typeof STATUS_FILTERS)[number];

function Stars({ value }: { value: number }) {
  return (
    <span className="inline-flex items-center" aria-label={`${value} out of 5`}>
      {[1, 2, 3, 4, 5].map((n) => (
        <Star
          key={n}
          className={cn(
            "size-3.5",
            n <= value ? "fill-amber-400 text-amber-400" : "text-gray-300"
          )}
        />
      ))}
    </span>
  );
}

const STATUS_BADGE: Record<ReviewRow["status"], string> = {
  pending: "bg-amber-100 text-amber-800",
  approved: "bg-green-100 text-green-800",
  rejected: "bg-red-100 text-red-800",
};

export default function ReviewsAdmin() {
  const ready = useRequireSuperAdmin();
  const [loading, setLoading] = useState(true);
  const [rows, setRows] = useState<ReviewRow[]>([]);
  const [busyId, setBusyId] = useState<string | null>(null);
  const [filter, setFilter] = useState<StatusFilter>("pending");

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const query = filter !== "all" ? `?status=${filter}` : "";
      const res = await DataService.get(`/admin/reviews${query}`);
      setRows(res.data?.data || []);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load reviews"));
    } finally {
      setLoading(false);
    }
  }, [filter]);

  useEffect(() => {
    if (ready) load();
  }, [ready, load]);

  const setStatus = async (id: string, status: ReviewRow["status"]) => {
    try {
      setBusyId(id);
      await DataService.patch(`/admin/reviews/${id}`, { status });
      toast.success(`Review ${status}`);
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not update review"));
    } finally {
      setBusyId(null);
    }
  };

  const remove = async (id: string) => {
    if (!window.confirm("Delete this review permanently? This cannot be undone.")) return;
    try {
      setBusyId(id);
      await DataService.delete(`/admin/reviews/${id}`);
      toast.success("Review deleted");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete review"));
    } finally {
      setBusyId(null);
    }
  };

  const pendingCount = useMemo(
    () => rows.filter((r) => r.status === "pending").length,
    [rows]
  );

  if (!ready || loading) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Loading…</div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <MainTitle title="Product reviews" />
        <div className="flex items-center gap-2">
          <Select value={filter} onValueChange={(v) => setFilter(v as StatusFilter)}>
            <SelectTrigger className="w-[150px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {STATUS_FILTERS.map((s) => (
                <SelectItem key={s} value={s}>
                  {s === "all" ? "All statuses" : s.charAt(0).toUpperCase() + s.slice(1)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button type="button" variant="outline" size="sm" onClick={() => load()}>
            Refresh
          </Button>
        </div>
      </div>

      {filter === "pending" && pendingCount > 0 ? (
        <p className="text-sm text-amber-700">
          {pendingCount} review{pendingCount === 1 ? "" : "s"} awaiting your approval.
        </p>
      ) : null}

      <div className="rounded-md border bg-white">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Product</TableHead>
              <TableHead>Reviewer</TableHead>
              <TableHead>Rating</TableHead>
              <TableHead>Review</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Date</TableHead>
              <TableHead className="w-[210px]">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center text-gray-400">
                  No reviews found.
                </TableCell>
              </TableRow>
            ) : (
              rows.map((r) => (
                <TableRow key={r._id}>
                  <TableCell className="max-w-[180px] text-sm">
                    {r.product?.title ?? "—"}
                  </TableCell>
                  <TableCell className="text-sm">
                    <div className="font-medium text-slate-900">{r.name}</div>
                    {r.email ? <div className="text-xs text-gray-400">{r.email}</div> : null}
                  </TableCell>
                  <TableCell>
                    <Stars value={r.rating} />
                  </TableCell>
                  <TableCell className="max-w-[280px] text-sm text-gray-600">
                    {r.title ? <div className="font-medium text-slate-800">{r.title}</div> : null}
                    <div className="line-clamp-3">{r.comment}</div>
                  </TableCell>
                  <TableCell>
                    <span
                      className={cn(
                        "inline-block rounded-full px-2.5 py-0.5 text-xs font-medium capitalize",
                        STATUS_BADGE[r.status]
                      )}
                    >
                      {r.status}
                    </span>
                  </TableCell>
                  <TableCell className="text-sm text-gray-600">
                    {r.createdAt ? new Date(r.createdAt).toLocaleDateString() : "—"}
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-wrap gap-1.5">
                      {r.status !== "approved" ? (
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={busyId === r._id}
                          onClick={() => setStatus(r._id, "approved")}
                        >
                          Approve
                        </Button>
                      ) : null}
                      {r.status !== "rejected" ? (
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={busyId === r._id}
                          onClick={() => setStatus(r._id, "rejected")}
                        >
                          Reject
                        </Button>
                      ) : null}
                      <Button
                        size="sm"
                        variant="ghost"
                        className="text-red-600 hover:text-red-700"
                        disabled={busyId === r._id}
                        onClick={() => remove(r._id)}
                      >
                        Delete
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <p className="text-sm text-gray-500">
        Only <strong>approved</strong> reviews appear on the storefront and count toward a
        product&apos;s star rating in Google search results.
      </p>
    </div>
  );
}