'use client';

import Link from 'next/link';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';
import { useMyReviews } from '@/lib/queries/use-reviews';
import { ReviewCard } from '@/components/reviews/review-card';
import { ReviewModal } from '@/components/reviews/review-modal';
import { StarPicker } from '@/components/reviews/star-picker';
import type { Review } from '@alqove/api-client';

export function MyReviewsClient() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const page = Math.max(1, Number(searchParams.get('page') ?? '1'));

  const setPage = (next: number) => {
    const params = new URLSearchParams(searchParams.toString());
    if (next <= 1) params.delete('page');
    else params.set('page', String(next));
    const qs = params.toString();
    router.replace(qs ? `${pathname}?${qs}` : pathname);
  };

  const { data, isLoading, isError } = useMyReviews({ page });
  const reviews = data?.data ?? [];
  const meta = data?.meta;

  const [editing, setEditing] = useState<Review | null>(null);

  return (
    <div className="mx-auto max-w-3xl px-4 py-8">
      <Link
        href="/purchases"
        className="mb-4 inline-block text-sm text-forest-600 hover:text-forest-700"
      >
        &larr; Back to purchases
      </Link>

      <h1 className="text-2xl font-bold text-slate-900">My reviews</h1>

      {isLoading && (
        <div className="mt-6 space-y-3" data-testid="my-reviews-loading">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="h-32 animate-pulse rounded-lg bg-slate-100" />
          ))}
        </div>
      )}

      {isError && (
        <div className="mt-6 rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
          Couldn&apos;t load your reviews. Try again later.
        </div>
      )}

      {!isLoading && !isError && reviews.length === 0 && (
        <div
          data-testid="my-reviews-empty"
          className="mt-6 rounded-lg border border-slate-200 bg-white p-8 text-center text-sm text-slate-500"
        >
          You haven&apos;t written any reviews yet.
        </div>
      )}

      {!isLoading && !isError && reviews.length > 0 && (
        <div className="mt-6 space-y-3">
          {reviews.map((r) => {
            const isHidden = r.state === 'hidden';
            return (
              <div key={r.id} className="space-y-1">
                <div className="flex items-center justify-between text-xs">
                  <Link
                    href={`/stores/${r.store_id}#reviews`}
                    className="font-medium text-forest-700 hover:underline"
                  >
                    View store
                  </Link>
                  <div className="flex items-center gap-2">
                    <StarSummaryLine review={r} />
                    {!isHidden && r.is_editable === true && (
                      <button
                        type="button"
                        onClick={() => setEditing(r)}
                        className="rounded border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
                        data-testid={`my-review-edit-${r.id}`}
                      >
                        Edit
                      </button>
                    )}
                  </div>
                </div>
                {isHidden && (
                  <div
                    data-testid={`my-review-hidden-marker-${r.id}`}
                    className="rounded-md border border-red-200 bg-red-50 p-3 text-xs text-slate-700"
                  >
                    <p className="font-medium text-red-800">Hidden by moderation</p>
                    {r.hide_reason && (
                      <p className="mt-1">
                        <span className="font-medium">Reason:</span> {r.hide_reason}
                      </p>
                    )}
                    <p className="mt-1">
                      If you believe this was an error, contact support.
                    </p>
                  </div>
                )}
                <ReviewCard review={r} buyerName="You" />
              </div>
            );
          })}
        </div>
      )}

      {meta && meta.last_page > 1 && (
        <div className="mt-6 flex items-center justify-between text-xs text-slate-500">
          <span>
            Page {meta.current_page} of {meta.last_page} · {meta.total} total
          </span>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => setPage(page - 1)}
              disabled={page <= 1}
              className="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-slate-50"
            >
              Previous
            </button>
            <button
              type="button"
              onClick={() => setPage(page + 1)}
              disabled={page >= meta.last_page}
              className="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-slate-50"
            >
              Next
            </button>
          </div>
        </div>
      )}

      {editing && (
        <ReviewModal
          orderItem={{ id: editing.order_item_id, title_snapshot: '' }}
          storeName="this store"
          mode="edit"
          initial={editing}
          onClose={() => setEditing(null)}
        />
      )}
    </div>
  );
}

function StarSummaryLine({ review }: { review: Review }) {
  return (
    <span className="inline-flex items-center gap-1 text-slate-500">
      <span className="sr-only">Rating: </span>
      <StarPicker value={review.rating} readOnly size="sm" />
    </span>
  );
}