'use client';

import { useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { format } from 'date-fns';
import { Eye, Star } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Spinner } from '@/components/ui/spinners';
import {
  fetchOffers,
  rejectOffer,
} from '@/network/apis/dashboard/marketplace/marketplace.apis';
import { Offer, OfferStatus } from '@/network/apis/dashboard/marketplace/type';
import PaginationComponent from '@/modules/client-management/components/paginationComponent/paginationComponent';
import { StatusPill } from './StatusPill';
import { OfferDetailSheet } from './OfferDetailSheet';

const STATUS_CHIPS: { label: string; value: OfferStatus }[] = [
  { label: 'Published', value: 'Published' },
  { label: 'Draft', value: 'Draft' },
  { label: 'Archived', value: 'Archived' },
];

const VALID_STATUSES: ReadonlySet<OfferStatus> = new Set<OfferStatus>([
  'Published',
  'Draft',
  'Archived',
]);

function safeStatus(raw: string | null | undefined): OfferStatus {
  return raw && VALID_STATUSES.has(raw as OfferStatus)
    ? (raw as OfferStatus)
    : 'Published';
}

function safePage(raw: string | null | undefined): number {
  const n = Number(raw);
  return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;
}

export function OffersList() {
  const router = useRouter();
  const sp = useSearchParams();
  const queryClient = useQueryClient();

  const status = safeStatus(sp?.get('status'));
  const page = safePage(sp?.get('page'));

  const [rejectingOffer, setRejectingOffer] = useState<Offer | null>(null);
  const [rejectReason, setRejectReason] = useState('');
  const [viewingOffer, setViewingOffer] = useState<Offer | null>(null);

  const queryParams = useMemo(
    () => ({ page, per_page: 25, status }),
    [page, status],
  );

  const { data, isLoading } = useQuery({
    queryKey: ['offers', queryParams],
    queryFn: () => fetchOffers(queryParams),
  });

  const updateUrl = (next: Record<string, string | null>) => {
    const params = new URLSearchParams(sp?.toString() ?? '');
    for (const [k, v] of Object.entries(next)) {
      if (!v) params.delete(k);
      else params.set(k, v);
    }
    if (!('page' in next)) params.delete('page');
    router.push(`?${params.toString()}`);
  };

  const handleError = (error: unknown, fallback: string) => {
    const msg =
      (error as { response?: { data?: { message?: string } } })?.response?.data
        ?.message || fallback;
    toast.error(msg);
  };

  const invalidate = () =>
    queryClient.invalidateQueries({ queryKey: ['offers'] });

  const rejectMutation = useMutation({
    mutationFn: (id: number) => rejectOffer(id, { reason: rejectReason.trim() }),
    onSuccess: () => {
      toast.success('Offer rejected');
      invalidate();
      setRejectingOffer(null);
      setRejectReason('');
    },
    onError: (e) => handleError(e, 'Failed to reject'),
  });

  const items = data?.items ?? [];
  const meta = data?.meta;

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap gap-2">
        {STATUS_CHIPS.map((c) => (
          <Button
            key={c.value}
            variant={status === c.value ? 'primary' : 'outline'}
            size="sm"
            onClick={() => updateUrl({ status: c.value })}
          >
            {c.label}
          </Button>
        ))}
      </div>

      <Card>
        <CardContent className="p-0">
          {isLoading ? (
            <div className="flex items-center justify-center py-16">
              <Spinner className="size-8 animate-spin text-primary" />
            </div>
          ) : items.length === 0 ? (
            <div className="py-16 text-center text-muted-foreground">
              No offers in this view.
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>#ID</TableHead>
                  <TableHead>Title</TableHead>
                  <TableHead>Creator</TableHead>
                  <TableHead>Category</TableHead>
                  <TableHead>Platform</TableHead>
                  <TableHead>From</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Created</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {items.map((o) => {
                  const isFeatured =
                    o.is_featured === true || o.is_featured === 1;
                  const price =
                    o.lowest_price != null
                      ? new Intl.NumberFormat('en-US', {
                          style: 'currency',
                          currency: o.base_currency || 'SAR',
                          maximumFractionDigits: 0,
                        }).format(Number(o.lowest_price))
                      : '—';
                  return (
                    <TableRow key={o.id} className="align-top">
                      <TableCell className="font-mono text-sm">
                        #{o.id}
                      </TableCell>
                      <TableCell>
                        <div className="font-medium">{o.title}</div>
                      </TableCell>
                      <TableCell className="text-sm">
                        {o.creator?.name ?? '—'}
                      </TableCell>
                      <TableCell className="text-sm">
                        {o.category?.name ?? '—'}
                      </TableCell>
                      <TableCell className="text-sm">
                        {o.platform ?? '—'}
                      </TableCell>
                      <TableCell className="text-sm">{price}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <StatusPill status={o.status} />
                          {isFeatured ? (
                            <span
                              title="Featured"
                              className="text-yellow-600"
                            >
                              <Star className="size-4 fill-yellow-400" />
                            </span>
                          ) : null}
                        </div>
                      </TableCell>
                      <TableCell className="text-sm">
                        {(() => {
                          try {
                            return format(new Date(o.created_at), 'PP');
                          } catch {
                            return o.created_at;
                          }
                        })()}
                      </TableCell>
                      <TableCell className="text-right space-x-1">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => setViewingOffer(o)}
                          title="View details"
                        >
                          <Eye className="size-4" />
                        </Button>
                        {o.status === 'Published' ? (
                          <Button
                            size="sm"
                            variant="outline"
                            className="text-red-600 border-red-200"
                            onClick={() => {
                              setRejectingOffer(o);
                              setRejectReason('');
                            }}
                          >
                            Reject
                          </Button>
                        ) : null}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      {meta && meta.last_page > 1 ? (
        <div className="flex justify-center">
          <PaginationComponent
            currentPage={meta.current_page}
            totalPages={meta.last_page}
            onPageChange={(p) => updateUrl({ page: String(p) })}
          />
        </div>
      ) : null}

      <Dialog
        open={!!rejectingOffer}
        onOpenChange={(o) => !o && setRejectingOffer(null)}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Reject offer #{rejectingOffer?.id}</DialogTitle>
            <DialogDescription>
              The brand will be notified with this reason.
            </DialogDescription>
          </DialogHeader>
          <div>
            <Label>
              Reason <span className="text-red-500">*</span>
            </Label>
            <Textarea
              value={rejectReason}
              onChange={(e) => setRejectReason(e.target.value)}
              placeholder="Explain why this offer is being rejected"
              rows={4}
            />
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setRejectingOffer(null)}
            >
              Cancel
            </Button>
            <Button
              variant="outline"
              className="text-red-600 border-red-300"
              disabled={
                rejectMutation.isPending || rejectReason.trim().length < 3
              }
              onClick={() =>
                rejectingOffer && rejectMutation.mutate(rejectingOffer.id)
              }
            >
              {rejectMutation.isPending ? (
                <Spinner className="size-4 animate-spin mr-2" />
              ) : null}
              Confirm reject
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <OfferDetailSheet
        offer={viewingOffer}
        onClose={() => setViewingOffer(null)}
      />
    </div>
  );
}