// src/features/admin-review-removal/ReviewRemovalQueue.tsx
// Admin: review removal queue - pending requests with Approve / Reject actions,
// plus history view (APPROVED / REJECTED decisions).

'use client';

import { useState, useMemo } from 'react';
import { AlertTriangle, Star } from 'lucide-react';
import { getCsrfToken } from '@/lib/csrf';
import { useT } from '@/lib/i18n/react';
import { usePaginatedQuery } from '@/lib/hooks/usePaginatedQuery';
import { Pagination } from '@/components/ui/primitives/Pagination';
import { Button } from '@/components/ui/primitives/Button';
import { Badge } from '@/components/ui/primitives/Badge';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { Tabs } from '@/components/ui/layout/Tabs';
import { formatDate } from '@/lib/format';

// ─── Types ────────────────────────────────────────────────────────────────────

export type RemovalStatusFilter = 'PENDING' | 'APPROVED' | 'REJECTED';

export interface RemovalRequestRow {
  id: string;
  reviewId: string;
  reviewBody: string;
  reviewRating: number | null;
  reviewCreatedAt: string;
  reviewerName: string | null;
  vendorId: string;
  vendorName: string;
  vendorRemovedCount: number;
  dealTitle: string;
  dealType: string;
  removalReason: string;
  aiScore: string | null;
  status: RemovalStatusFilter;
  decidedAt: string | null;
  createdAt: string;
}

export interface ReviewRemovalQueueProps {
  requests: RemovalRequestRow[];
  initialStatus?: RemovalStatusFilter;
  initialTotal: number;
  initialPage?: number;
}

// ─── Helpers ──────────────────────────────────────────────────────────────────

function interpolate(template: string, values: Record<string, string | number>): string {
  return Object.entries(values).reduce(
    (acc, [key, val]) => acc.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), String(val)),
    template,
  );
}

// ─── Component ────────────────────────────────────────────────────────────────

export function ReviewRemovalQueue({
  requests: initialRequests,
  initialStatus = 'PENDING',
  initialTotal,
  initialPage,
}: ReviewRemovalQueueProps) {
  const t = useT('admin');

  const [statusFilter, setStatusFilter] = useState<RemovalStatusFilter>(initialStatus);
  const [loading, setLoading] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const params = useMemo<Record<string, string>>(() => ({ status: statusFilter }), [statusFilter]);

  const {
    data: requests,
    page,
    totalPages,
    isLoading: isPaginationLoading,
    error: queryError,
    setPage,
    refetch,
  } = usePaginatedQuery<RemovalRequestRow>({
    endpoint: '/api/admin/review-removals/pending',
    params,
    initialData: initialRequests,
    initialTotal,
    initialPage,
    dataKey: 'removals',
    limit: 20,
  });

  function handleFilterChange(status: RemovalStatusFilter) {
    setStatusFilter(status);
    const url = new URL(window.location.href);
    url.searchParams.set('status', status);
    window.history.replaceState(null, '', url.toString());
  }

  async function handleApprove(id: string) {
    setLoading(id);
    setError(null);
    try {
      const res = await fetch(`/api/admin/review-removals/${id}/approve`, {
        method: 'POST',
        headers: { 'x-csrf-token': getCsrfToken() },
      });
      if (!res.ok) throw new Error(await res.text());
      refetch();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setLoading(null);
    }
  }

  async function handleReject(id: string) {
    setLoading(id);
    setError(null);
    try {
      const res = await fetch(`/api/admin/review-removals/${id}/reject`, {
        method: 'POST',
        headers: { 'x-csrf-token': getCsrfToken() },
      });
      if (!res.ok) throw new Error(await res.text());
      refetch();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setLoading(null);
    }
  }

  const dealTypeLabels: Record<string, string> = {
    COUPON: t('deal_type_coupon'),
    ITEM: t('deal_type_item'),
    GROUP: t('deal_type_group'),
  };

  const filterLabels: Record<RemovalStatusFilter, string> = {
    PENDING: t('filter_pending'),
    APPROVED: t('filter_approved'),
    REJECTED: t('filter_rejected'),
  };

  const statusPanels = {
    PENDING: (
      <RemovalStatusPanel
        isPendingTab
        requests={requests}
        isPaginationLoading={isPaginationLoading}
        error={error ?? queryError}
        loading={loading}
        dealTypeLabels={dealTypeLabels}
        onApprove={handleApprove}
        onReject={handleReject}
      />
    ),
    APPROVED: (
      <RemovalStatusPanel
        isPendingTab={false}
        requests={requests}
        isPaginationLoading={isPaginationLoading}
        error={error ?? queryError}
        loading={loading}
        dealTypeLabels={dealTypeLabels}
        onApprove={handleApprove}
        onReject={handleReject}
      />
    ),
    REJECTED: (
      <RemovalStatusPanel
        isPendingTab={false}
        requests={requests}
        isPaginationLoading={isPaginationLoading}
        error={error ?? queryError}
        loading={loading}
        dealTypeLabels={dealTypeLabels}
        onApprove={handleApprove}
        onReject={handleReject}
      />
    ),
  };

  return (
    <Stack gap="6" as="section" aria-label={t('review_removal_title')}>
      {/* Status filter tabs */}
      <Tabs
        items={(['PENDING', 'APPROVED', 'REJECTED'] as RemovalStatusFilter[]).map((s) => ({
          value: s,
          label: filterLabels[s],
        }))}
        value={statusFilter}
        onValueChange={(value) => handleFilterChange(value as RemovalStatusFilter)}
        ariaLabel={t('filter_status')}
        panels={statusPanels}
      />

      <Pagination
        page={page}
        totalPages={totalPages}
        onPageChange={setPage}
        isLoading={isPaginationLoading}
      />
    </Stack>
  );
}

interface RemovalStatusPanelProps {
  isPendingTab: boolean;
  requests: RemovalRequestRow[];
  isPaginationLoading: boolean;
  error: string | null;
  loading: string | null;
  dealTypeLabels: Record<string, string>;
  onApprove: (id: string) => void;
  onReject: (id: string) => void;
}

function RemovalStatusPanel({
  isPendingTab,
  requests,
  isPaginationLoading,
  error,
  loading,
  dealTypeLabels,
  onApprove,
  onReject,
}: RemovalStatusPanelProps) {
  const t = useT('admin');
  const emptyMessage = isPendingTab ? t('no_pending') : t('no_history');
  const emptyDescription = isPendingTab ? t('no_pending_body') : undefined;

  return (
    <>
      {error && (
        <p role="alert" className="text-danger-600 text-sm">
          {error}
        </p>
      )}

      {isPaginationLoading ? (
        <p className="text-text-secondary py-8 text-center text-sm">{t('removal_loading')}</p>
      ) : requests.length === 0 ? (
        <EmptyState title={emptyMessage} description={emptyDescription} className="py-8" />
      ) : (
        <Stack gap="4" as="ul">
          {requests.map((req) => (
            <li key={req.id} className="bg-surface-default rounded-2xl p-4 shadow-md">
              <Stack gap="3">
                {/* Review header */}
                <Stack gap="1">
                  <Row gap="2" align="center" wrap>
                    <span className="text-text-primary text-sm font-semibold">
                      {req.vendorName}
                    </span>
                    {req.reviewRating !== null && (
                      <span
                        className="text-text-secondary inline-flex items-center gap-1 text-sm"
                        aria-label={`${t('rating_label')}: ${req.reviewRating}/5`}
                      >
                        <span className="inline-flex items-center gap-px" aria-hidden="true">
                          {Array.from({ length: 5 }, (_, i) => (
                            <Star
                              key={i}
                              width={12}
                              height={12}
                              className={
                                i < req.reviewRating!
                                  ? 'text-warning-500'
                                  : 'text-text-muted opacity-30'
                              }
                              fill="currentColor"
                            />
                          ))}
                        </span>
                        {req.reviewRating}/5
                      </span>
                    )}
                    <span className="text-text-muted text-xs">
                      {formatDate(req.reviewCreatedAt, 'he')}
                    </span>
                  </Row>

                  {/* Reviewer identity */}
                  <Row gap="1" align="center">
                    <span className="text-text-secondary text-xs font-medium">
                      {t('reviewer_label')}:
                    </span>
                    <span className="text-text-primary text-xs">
                      {req.reviewerName ?? t('reviewer_anonymous')}
                    </span>
                  </Row>

                  {/* Deal context */}
                  <Row gap="1" align="center" wrap>
                    <span className="text-text-secondary text-xs font-medium">
                      {t('deal_label')}:
                    </span>
                    <span className="text-text-primary text-xs">{req.dealTitle}</span>
                    <Badge tone="neutral" size="sm">
                      {dealTypeLabels[req.dealType] ?? req.dealType}
                    </Badge>
                  </Row>

                  {/* Review body */}
                  <p className="text-text-secondary text-sm">{req.reviewBody}</p>
                </Stack>

                {/* Vendor pattern warning */}
                {req.vendorRemovedCount > 0 && (
                  <div className="border-warning-200 bg-warning-50 rounded-md border px-3 py-2">
                    <p className="text-warning-700 flex items-start gap-1 text-xs font-medium">
                      <AlertTriangle
                        width={14}
                        height={14}
                        className="mt-px shrink-0"
                        aria-hidden="true"
                      />
                      {interpolate(
                        req.vendorRemovedCount === 1
                          ? t('vendor_pattern_warning_one')
                          : t('vendor_pattern_warning'),
                        { count: req.vendorRemovedCount },
                      )}
                    </p>
                  </div>
                )}

                {/* Vendor's removal reason */}
                <div className="bg-surface-inset rounded-md p-3">
                  <p className="text-text-secondary mb-1 text-xs font-medium uppercase">
                    {t('vendor_reason_label')}:
                  </p>
                  <p className="text-text-primary text-sm">{req.removalReason}</p>
                </div>

                {/* AI score */}
                {req.aiScore !== null && (
                  <Row gap="2" align="center">
                    <span className="text-text-secondary text-xs">{t('ai_score')}:</span>
                    <span className="text-text-primary text-sm font-medium">
                      {(parseFloat(req.aiScore) * 100).toFixed(0)}%
                    </span>
                  </Row>
                )}

                {/* History decision badge (non-pending) */}
                {!isPendingTab && (
                  <Row gap="2" align="center">
                    <Badge tone={req.status === 'APPROVED' ? 'success' : 'warning'} size="sm">
                      {req.status === 'APPROVED'
                        ? t('removal_status_approved')
                        : t('removal_status_rejected')}
                    </Badge>
                    {req.decidedAt && (
                      <span className="text-text-muted text-xs">
                        {t('decided_at_label')}: {formatDate(req.decidedAt, 'he')}
                      </span>
                    )}
                  </Row>
                )}

                {isPendingTab && (
                  <p className="text-text-muted text-xs">
                    {t('submitted_at_label')}: {formatDate(req.createdAt, 'he')}
                  </p>
                )}

                {/* Actions - only for PENDING */}
                {isPendingTab && (
                  <Row gap="2">
                    <Button
                      variant="danger"
                      size="sm"
                      loading={loading === req.id}
                      onClick={() => onApprove(req.id)}
                    >
                      {t('approve_remove')}
                    </Button>
                    <Button
                      variant="secondary"
                      size="sm"
                      disabled={loading === req.id}
                      onClick={() => onReject(req.id)}
                    >
                      {t('reject_keep')}
                    </Button>
                  </Row>
                )}
              </Stack>
            </li>
          ))}
        </Stack>
      )}
    </>
  );
}