"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import {
  CheckCircle2,
  Clock3,
  Loader2,
  MessageSquareText,
  PencilLine,
  RefreshCw,
  Search,
  ShoppingBag,
  Star,
  UserCircle2,
  XCircle,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

type ReviewStatus = "pending" | "approved" | "rejected";

type ReviewRow = {
  id: string;
  catalog_user_id: string;
  product_id: string;
  client_id: string;
  rating: number;
  comment: string | null;
  status: ReviewStatus;
  created_at: string;
  updated_at?: string | null;
  moderated_at?: string | null;
};

type ReviewView = ReviewRow & {
  product_name: string;
  product_image_url: string | null;
  client_name: string;
  client_avatar_url: string | null;
};

function formatDate(value?: string | null) {
  if (!value) return "-";
  return new Date(value).toLocaleString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

export default function CatalogReviewsPage() {
  const searchParams = useSearchParams();
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [savingId, setSavingId] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState<"all" | ReviewStatus>("pending");
  const [search, setSearch] = useState("");
  const [reviews, setReviews] = useState<ReviewView[]>([]);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [editorOpen, setEditorOpen] = useState(false);
  const [editingReview, setEditingReview] = useState<ReviewView | null>(null);
  const [draftComment, setDraftComment] = useState("");
  const reviewCardRefs = useRef<Record<string, HTMLDivElement | null>>({});
  const highlightedReviewId = String(searchParams.get("review") || "").trim();

  async function loadReviews() {
    try {
      const response = await fetch("/api/catalog/reviews", { cache: "no-store" });
      const payload = (await response.json()) as { error?: string; reviews?: ReviewView[] };
      if (!response.ok || payload.error) {
        throw new Error(payload.error || "Nao foi possivel carregar as avaliacoes.");
      }
      setReviews(Array.isArray(payload.reviews) ? payload.reviews : []);
      setMessage(null);
    } catch (error) {
      setReviews([]);
      setMessage({
        type: "error",
        text: error instanceof Error ? error.message : "Nao foi possivel carregar as avaliacoes.",
      });
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }

  useEffect(() => {
    void loadReviews();
  }, []);

  const filteredReviews = useMemo(() => {
    const query = search.trim().toLowerCase();
    return reviews.filter((review) => {
      const matchesStatus = statusFilter === "all" || review.status === statusFilter;
      const matchesSearch =
        !query ||
        review.product_name.toLowerCase().includes(query) ||
        review.client_name.toLowerCase().includes(query) ||
        String(review.comment || "").toLowerCase().includes(query);
      return matchesStatus && matchesSearch;
    });
  }, [reviews, search, statusFilter]);

  useEffect(() => {
    if (!highlightedReviewId) return;
    setStatusFilter("all");
  }, [highlightedReviewId]);

  useEffect(() => {
    if (!highlightedReviewId) return;
    const target = reviewCardRefs.current[highlightedReviewId];
    if (!target) return;
    window.requestAnimationFrame(() => {
      target.scrollIntoView({ behavior: "smooth", block: "center" });
    });
  }, [filteredReviews, highlightedReviewId]);

  const stats = useMemo(() => {
    return {
      total: reviews.length,
      pending: reviews.filter((review) => review.status === "pending").length,
      approved: reviews.filter((review) => review.status === "approved").length,
      rejected: reviews.filter((review) => review.status === "rejected").length,
    };
  }, [reviews]);

  async function updateReview(review: ReviewView, nextStatus: ReviewStatus | null, nextComment: string) {
    const sanitizedComment = nextComment.trim();
    if (sanitizedComment.length < 3) {
      setMessage({ type: "error", text: "Informe um comentario valido para salvar." });
      return;
    }

    setSavingId(review.id);
    setMessage(null);

    try {
      const response = await fetch("/api/catalog/reviews", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          reviewId: review.id,
          comment: sanitizedComment,
          status: nextStatus,
        }),
      });

      const payload = (await response.json()) as { error?: string };
      if (!response.ok || payload.error) {
        throw new Error(payload.error || "Nao foi possivel atualizar a avaliacao.");
      }

      const moderatedAt = new Date().toISOString();
      setReviews((current) =>
        current.map((item) =>
          item.id === review.id
            ? {
                ...item,
                comment: sanitizedComment,
                status: nextStatus || item.status,
                moderated_at: moderatedAt,
              }
            : item
        )
      );

      setEditorOpen(false);
      setEditingReview(null);
      setDraftComment("");
      setMessage({
        type: "success",
        text:
          nextStatus === "approved"
            ? "Comentario ajustado e avaliacao aprovada."
            : nextStatus === "rejected"
              ? "Comentario ajustado e avaliacao rejeitada."
              : "Comentario atualizado.",
      });
    } catch (error) {
      setMessage({
        type: "error",
        text: error instanceof Error ? error.message : "Nao foi possivel atualizar a avaliacao.",
      });
    } finally {
      setSavingId(null);
    }
  }

  const statusMeta: Record<ReviewStatus, { label: string; className: string; icon: typeof Clock3 }> = {
    pending: {
      label: "Pendente",
      className: "border-amber-200 bg-amber-50 text-amber-700",
      icon: Clock3,
    },
    approved: {
      label: "Aprovada",
      className: "border-emerald-200 bg-emerald-50 text-emerald-700",
      icon: CheckCircle2,
    },
    rejected: {
      label: "Rejeitada",
      className: "border-rose-200 bg-rose-50 text-rose-700",
      icon: XCircle,
    },
  };

  return (
    <main className="space-y-6">
      <PageHeader
        eyebrow="Catálogo"
        title="Avaliações"
        subtitle="Revise, ajuste e aprove os comentários enviados pelos clientes."
      />

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {[
          { label: "Total", value: stats.total },
          { label: "Pendentes", value: stats.pending },
          { label: "Aprovadas", value: stats.approved },
          { label: "Rejeitadas", value: stats.rejected },
        ].map((item) => (
          <div key={item.label} className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white p-4 md:p-5">
            <div className="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ks-color-text-soft)]">{item.label}</div>
            <div className="mt-2 text-3xl font-semibold tracking-[-0.04em] text-[var(--ks-color-text-primary)]">{item.value}</div>
          </div>
        ))}
      </div>

      <section className="rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white p-4 md:p-5 space-y-4">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div className="flex flex-wrap gap-2">
            {[
              { value: "pending", label: "Pendentes" },
              { value: "approved", label: "Aprovadas" },
              { value: "rejected", label: "Rejeitadas" },
              { value: "all", label: "Todas" },
            ].map((item) => (
              <Button
                key={item.value}
                variant={statusFilter === item.value ? "primary" : "outline"}
                onClick={() => setStatusFilter(item.value as "all" | ReviewStatus)}
              >
                {item.label}
              </Button>
            ))}
          </div>

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <Input
              value={search}
              onChange={(event) => setSearch(event.target.value)}
              placeholder="Buscar produto, cliente ou comentario"
              icon={<Search className="h-4 w-4" />}
              className="sm:min-w-[280px]"
            />
            <Button
              variant="outline"
              onClick={() => {
                setRefreshing(true);
                void loadReviews();
              }}
              icon={<RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} />}
            >
              Atualizar
            </Button>
          </div>
        </div>

        {message ? (
          <div
            className={`rounded-xl px-3 py-2 text-sm font-medium ${
              message.type === "success" ? "border border-emerald-200 bg-emerald-50 text-emerald-700" : "border border-rose-200 bg-rose-50 text-rose-700"
            }`}
          >
            {message.text}
          </div>
        ) : null}

        <div className="space-y-3">
          {loading ? (
            <div className="text-sm text-[var(--ks-color-text-secondary)]">
              Carregando avaliacoes...
            </div>
          ) : filteredReviews.length === 0 ? (
            <div className="rounded-xl border border-dashed border-[var(--ks-color-border-subtle)] px-6 py-14 text-center">
              <MessageSquareText className="mx-auto h-10 w-10 text-zinc-300" />
              <div className="mt-4 text-lg font-semibold text-[var(--ks-color-text-primary)]">Nenhuma avaliacao encontrada</div>
              <div className="mt-1 text-sm text-[var(--ks-color-text-secondary)]">
                Ajuste o filtro ou aguarde novos comentarios dos clientes.
              </div>
            </div>
          ) : (
            filteredReviews.map((review) => {
              const meta = statusMeta[review.status];
              const StatusIcon = meta.icon;

              return (
                <div
                  key={review.id}
                  id={`review-${review.id}`}
                  ref={(node) => {
                    reviewCardRefs.current[review.id] = node;
                  }}
                  className={`rounded-xl border p-4 transition-shadow ${
                    highlightedReviewId === review.id
                      ? "border-[var(--ks-color-primary)] shadow-[0_0_0_3px_rgba(109,40,217,0.12)]"
                      : "border-[var(--ks-color-border-subtle)]"
                  }`}
                >
                  <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                    <div className="flex min-w-0 gap-4">
                      <div className="relative flex h-24 w-24 min-w-24 items-center justify-center overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-white">
                        {review.product_image_url ? (
                          <Image
                            src={review.product_image_url}
                            alt={review.product_name}
                            fill
                            className="object-contain p-2"
                            unoptimized
                          />
                        ) : (
                          <ShoppingBag className="h-8 w-8 text-[var(--ks-color-text-soft)]" />
                        )}
                      </div>

                      <div className="min-w-0 flex-1 space-y-3">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] font-semibold ${meta.className}`}>
                            <StatusIcon className="h-3.5 w-3.5" />
                            {meta.label}
                          </span>
                          <span className="text-xs text-zinc-500">{formatDate(review.created_at)}</span>
                        </div>

                        <div>
                          <Link
                            href={`/dashboard/catalog/products`}
                            className="text-lg font-semibold tracking-[-0.03em] text-[var(--ks-color-text-primary)] hover:underline"
                          >
                            {review.product_name}
                          </Link>
                          <div className="mt-1 flex items-center gap-1">
                            {Array.from({ length: 5 }).map((_, index) => (
                              <Star
                                key={index}
                                className={index + 1 <= review.rating ? "h-4 w-4 fill-amber-400 text-amber-400" : "h-4 w-4 text-zinc-300"}
                              />
                            ))}
                          </div>
                        </div>

                        <div className="flex items-center gap-3">
                          <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border border-[var(--ks-color-border-subtle)] bg-white">
                            {review.client_avatar_url ? (
                              <Image
                                src={review.client_avatar_url}
                                alt={review.client_name}
                                width={40}
                                height={40}
                                className="h-10 w-10 object-cover"
                                unoptimized
                              />
                            ) : (
                              <UserCircle2 className="h-5 w-5 text-[var(--ks-color-text-soft)]" />
                            )}
                          </div>
                          <div>
                            <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">{review.client_name}</div>
                            <div className="text-xs text-[var(--ks-color-text-secondary)]">Cliente do catalogo</div>
                          </div>
                        </div>

                        <p className="max-w-3xl text-sm leading-6 text-[var(--ks-color-text-secondary)]">
                          {review.comment || "Sem comentario adicional."}
                        </p>
                      </div>
                    </div>

                    <div className="flex shrink-0 flex-col gap-2 sm:flex-row xl:flex-col">
                      <Button
                        variant="outline"
                        onClick={() => {
                          setEditingReview(review);
                          setDraftComment(review.comment || "");
                          setEditorOpen(true);
                        }}
                        icon={<PencilLine className="h-4 w-4" />}
                      >
                        Editar
                      </Button>
                      <Button
                        variant="primary"
                        disabled={savingId === review.id || review.status === "approved"}
                        onClick={() => void updateReview(review, "approved", review.comment || "")}
                        icon={savingId === review.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle2 className="h-4 w-4" />}
                      >
                        Aprovar
                      </Button>
                      <Button
                        variant="outline"
                        disabled={savingId === review.id || review.status === "rejected"}
                        onClick={() => void updateReview(review, "rejected", review.comment || "")}
                        icon={<XCircle className="h-4 w-4" />}
                        className="border-rose-200 text-rose-700 hover:bg-rose-50"
                      >
                        Rejeitar
                      </Button>
                    </div>
                  </div>
                </div>
              );
            })
          )}
        </div>
      </section>

      <Dialog open={editorOpen} onOpenChange={setEditorOpen}>
        <DialogContent className="sm:max-w-xl">
          <DialogHeader>
            <DialogTitle>Editar comentário</DialogTitle>
            <DialogDescription>
              Ajuste o texto antes de aprovar ou rejeitar a avaliação.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="rounded-xl border border-[var(--ks-color-border-subtle)] bg-white p-4">
              <div className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                {editingReview?.product_name || "Produto"}
              </div>
              <div className="mt-1 text-xs text-[var(--ks-color-text-secondary)]">
                {editingReview?.client_name || "Cliente"}
              </div>
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium text-[var(--ks-color-text-primary)]" htmlFor="review-comment-edit">
                Comentário
              </label>
              <textarea
                id="review-comment-edit"
                value={draftComment}
                onChange={(event) => setDraftComment(event.target.value)}
                rows={7}
                className="w-full rounded-xl border border-[var(--ks-color-border-subtle)] bg-white px-3 py-2 text-sm text-[var(--ks-color-text-primary)] outline-none transition-all focus:border-transparent focus:ring-2 focus:ring-[var(--ks-color-primary)]"
                placeholder="Edite o comentário antes de moderar."
              />
            </div>
          </div>

          <DialogFooter className="gap-2 sm:space-x-0">
            <Button
              variant="outline"
              onClick={() => {
                setEditorOpen(false);
                setEditingReview(null);
                setDraftComment("");
              }}
            >
              Cancelar
            </Button>
            <Button
              variant="outline"
              disabled={!editingReview || savingId === editingReview?.id}
              onClick={() => editingReview && void updateReview(editingReview, null, draftComment)}
            >
              Salvar
            </Button>
            <Button
              variant="primary"
              disabled={!editingReview || savingId === editingReview?.id}
              onClick={() => editingReview && void updateReview(editingReview, "approved", draftComment)}
            >
              Salvar e aprovar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </main>
  );
}