"use client";

import { useEffect, useMemo, useState } from "react";
import {
  PageHeader,
  StatCard,
  Panel,
  AdminButton,
  StatusBadge,
  FilterBar,
  SearchInput,
  SelectFilter,
  EmptyState,
} from "@/components/admin/ui";
import { useStore } from "@/context/StoreContext";

type ReviewRow = {
  id: string;
  product: string;
  author: string;
  rating: number;
  review: string;
  status: "Pending" | "Approved" | "Rejected" | "Reported";
  featured: boolean;
  reply: string;
  date: string;
};

const demoReviews: ReviewRow[] = [
  { id: "REV-D1", product: "Samsung Refrigerator", author: "Ayesha K.", rating: 5, review: "Excellent cooling and quiet operation.", status: "Approved", featured: true, reply: "Thanks for your feedback!", date: "2026-07-26" },
  { id: "REV-D2", product: "Haier Washing Machine", author: "Usman T.", rating: 4, review: "Good wash quality, delivery was fast.", status: "Pending", featured: false, reply: "", date: "2026-07-27" },
  { id: "REV-D3", product: "Orient Ceiling Fan", author: "Bilal A.", rating: 2, review: "Noise level higher than expected.", status: "Reported", featured: false, reply: "", date: "2026-07-25" },
  { id: "REV-D4", product: "Dawlance Microwave", author: "Sana J.", rating: 5, review: "Perfect for everyday use.", status: "Approved", featured: false, reply: "", date: "2026-07-24" },
];

export default function AdminReviewsPage() {
  const { store } = useStore();
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [message, setMessage] = useState("");
  const [replyDrafts, setReplyDrafts] = useState<Record<string, string>>({});
  const [reviews, setReviews] = useState<ReviewRow[]>(demoReviews);

  useEffect(() => {
    if (!store.product_reviews.length) return;
    setReviews((prev) => {
      const existingIds = new Set(prev.map((r) => r.id));
      const additions = store.product_reviews
        .filter((r) => !existingIds.has(r.id))
        .map((r) => {
          const product = store.products.find((p) => p.id === r.product_id);
          return {
            id: r.id,
            product: product?.name || `Product ${r.product_id}`,
            author: `User ${r.user_id}`,
            rating: r.rating,
            review: r.review || "No comment",
            status: "Pending" as const,
            featured: false,
            reply: "",
            date: r.created_at?.slice(0, 10) || "2026-07-20",
          };
        });
      return additions.length ? [...additions, ...prev] : prev;
    });
  }, [store.product_reviews, store.products]);

  const filtered = useMemo(() => {
    return reviews.filter((r) => {
      const q = search.toLowerCase();
      const matchesSearch =
        !q ||
        r.product.toLowerCase().includes(q) ||
        r.author.toLowerCase().includes(q) ||
        r.review.toLowerCase().includes(q);
      const matchesStatus = statusFilter === "all" || r.status === statusFilter;
      return matchesSearch && matchesStatus;
    });
  }, [reviews, search, statusFilter]);

  const analytics = useMemo(() => {
    const avg =
      reviews.length === 0
        ? 0
        : Number((reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1));
    return {
      total: reviews.length,
      pending: reviews.filter((r) => r.status === "Pending").length,
      approved: reviews.filter((r) => r.status === "Approved").length,
      featured: reviews.filter((r) => r.featured).length,
      avg,
    };
  }, [reviews]);

  const flash = (text: string) => {
    setMessage(text);
    window.setTimeout(() => setMessage(""), 2200);
  };

  const updateReview = (id: string, patch: Partial<ReviewRow>) => {
    setReviews((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch } : r)));
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Reviews"
        description="Moderate product reviews, replies, featured highlights, and reports."
      />

      {message ? (
        <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-800">
          {message}
        </div>
      ) : null}

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
        <StatCard label="Total Reviews" value={analytics.total} />
        <StatCard label="Pending" value={analytics.pending} tone="warning" />
        <StatCard label="Approved" value={analytics.approved} tone="success" />
        <StatCard label="Featured" value={analytics.featured} tone="info" />
        <StatCard label="Avg Rating" value={`${analytics.avg}/5`} />
      </div>

      <Panel title="Review Moderation">
        <FilterBar>
          <SearchInput value={search} onChange={setSearch} placeholder="Search product, author, review…" />
          <SelectFilter
            value={statusFilter}
            onChange={setStatusFilter}
            options={[
              { value: "all", label: "All statuses" },
              { value: "Pending", label: "Pending" },
              { value: "Approved", label: "Approved" },
              { value: "Rejected", label: "Rejected" },
              { value: "Reported", label: "Reported" },
            ]}
          />
        </FilterBar>

        {filtered.length === 0 ? (
          <EmptyState title="No reviews found" description="Store reviews and demo entries will appear here." />
        ) : (
          <div className="space-y-4">
            {filtered.map((review) => (
              <div key={review.id} className="rounded-xl border border-border p-4">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="text-sm font-semibold">{review.product}</p>
                    <p className="text-xs text-muted-foreground">
                      {review.author} · {review.date} · {review.rating}/5
                    </p>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <StatusBadge status={review.status} />
                    {review.featured ? <StatusBadge status="Featured" /> : null}
                  </div>
                </div>
                <p className="mt-3 text-sm">{review.review}</p>
                {review.reply ? (
                  <p className="mt-2 rounded-lg bg-secondary/50 px-3 py-2 text-xs text-muted-foreground">
                    Reply: {review.reply}
                  </p>
                ) : null}
                <div className="mt-3 flex flex-wrap gap-2">
                  <input
                    className="min-w-[200px] flex-1 rounded-lg border border-border px-3 py-2 text-sm outline-none focus:border-accent"
                    placeholder="Write a reply…"
                    value={replyDrafts[review.id] ?? ""}
                    onChange={(e) => setReplyDrafts((d) => ({ ...d, [review.id]: e.target.value }))}
                  />
                  <AdminButton
                    variant="secondary"
                    onClick={() => {
                      const reply = (replyDrafts[review.id] || "").trim();
                      if (!reply) return;
                      updateReview(review.id, { reply });
                      flash(`Replied to ${review.id}`);
                    }}
                  >
                    Reply
                  </AdminButton>
                  <AdminButton variant="secondary" onClick={() => { updateReview(review.id, { status: "Approved" }); flash("Approved"); }}>
                    Approve
                  </AdminButton>
                  <AdminButton variant="ghost" onClick={() => { updateReview(review.id, { status: "Rejected" }); flash("Rejected"); }}>
                    Reject
                  </AdminButton>
                  <AdminButton
                    variant="ghost"
                    onClick={() => {
                      updateReview(review.id, { featured: !review.featured });
                      flash(review.featured ? "Unfeatured" : "Featured");
                    }}
                  >
                    {review.featured ? "Unfeature" : "Feature"}
                  </AdminButton>
                  <AdminButton variant="ghost" onClick={() => { updateReview(review.id, { status: "Reported" }); flash("Reported"); }}>
                    Report
                  </AdminButton>
                  <AdminButton
                    variant="danger"
                    onClick={() => {
                      setReviews((prev) => prev.filter((r) => r.id !== review.id));
                      flash("Deleted");
                    }}
                  >
                    Delete
                  </AdminButton>
                </div>
              </div>
            ))}
          </div>
        )}
      </Panel>
    </div>
  );
}