'use client';

import { useEffect, useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { Search, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Spinner } from '@/components/ui/spinners';
import PaginationComponent from '@/modules/client-management/components/paginationComponent/paginationComponent';
import { FetchError } from '@/modules/marketplace-admin/components/EndpointPending';
import { NotificationPhoneCard } from '@/modules/marketplace-admin/components/NotificationPhoneCard';
import { fetchInfluencerRegistrations } from '@/network/apis/dashboard/marketplace/influencer-registrations.apis';
import type { InfluencerRegistrationRow } from '@/network/apis/dashboard/marketplace/influencer-registrations.types';
import { formatDateTime } from '@/modules/marketplace-admin/money/format';
import { statusPillClass } from './utils';
import { InfluencerRegistrationDetailSheet } from './InfluencerRegistrationDetailSheet';

const STATUS_CHIPS = [
  { label: 'Pending', value: 'pending' },
  { label: 'Approved', value: 'approved' },
  { label: 'Rejected', value: 'rejected' },
  { label: 'All', value: 'all' },
];

async function fetchWaStatus(): Promise<{ status?: string }> {
  const res = await fetch('/api/admin/notification-wa', { cache: 'no-store' });
  return res.json();
}

export function InfluencerRegistrationsList() {
  const router = useRouter();
  const sp = useSearchParams();

  const status = sp?.get('status') ?? 'pending';
  const search = sp?.get('search') ?? '';
  const page = Number(sp?.get('page') ?? 1);

  const [searchInput, setSearchInput] = useState(search);
  const [selected, setSelected] = useState<InfluencerRegistrationRow | null>(null);
  const [sheetOpen, setSheetOpen] = useState(false);

  useEffect(() => {
    setSearchInput(search);
  }, [search]);

  const queryParams = useMemo(() => {
    const p: Record<string, unknown> = { page, per_page: 20, status };
    if (search) p.search = search;
    return p;
  }, [page, status, search]);

  const { data, isLoading, isFetching, error } = useQuery({
    queryKey: ['admin-influencer-registrations', queryParams],
    queryFn: () => fetchInfluencerRegistrations(queryParams),
    retry: false,
  });

  // Shares the cache key with NotificationPhoneCard so we don't double-poll.
  const { data: waStatus } = useQuery({
    queryKey: ['notification-wa-status'],
    queryFn: fetchWaStatus,
    refetchInterval: (q) => (q.state.data?.status === 'connected' ? 30_000 : 4_000),
  });
  const waConnected = waStatus?.status === 'connected';

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

  const openRow = (row: InfluencerRegistrationRow) => {
    setSelected(row);
    setSheetOpen(true);
  };

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

  return (
    <div className="space-y-5">
      <NotificationPhoneCard />

      {/* Status chips */}
      <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>

      {/* Search bar */}
      <Card>
        <CardContent className="pt-4">
          <div className="grid grid-cols-1 sm:grid-cols-4 gap-3 items-end">
            <div className="sm:col-span-3">
              <Label className="text-xs">Search</Label>
              <Input
                value={searchInput}
                onChange={(e) => setSearchInput(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && updateUrl({ search: searchInput })}
                placeholder="Name, email or phone"
              />
            </div>
            <div className="flex gap-2">
              <Button onClick={() => updateUrl({ search: searchInput })} className="flex-1">
                <Search className="size-4 mr-1" /> Search
              </Button>
              <Button
                variant="outline"
                onClick={() => {
                  setSearchInput('');
                  updateUrl({ search: null });
                }}
              >
                <X className="size-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Table */}
      <Card>
        <CardContent className="p-0">
          {isLoading ? (
            <div className="flex items-center justify-center py-16">
              <Spinner className="size-8 animate-spin text-primary" />
            </div>
          ) : error ? (
            <div className="p-6">
              <FetchError error={error} fallback="Could not load influencer registrations" />
            </div>
          ) : items.length === 0 ? (
            <div className="py-16 text-center text-muted-foreground">
              No registration requests match your filters.
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>#ID</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Email</TableHead>
                  <TableHead>WhatsApp</TableHead>
                  <TableHead>Social</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Requested</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {items.map((r) => (
                  <TableRow
                    key={r.id}
                    className="cursor-pointer hover:bg-muted/40"
                    onClick={() => openRow(r)}
                  >
                    <TableCell className="font-mono text-sm">#{r.id}</TableCell>
                    <TableCell className="font-medium">{r.name}</TableCell>
                    <TableCell className="text-sm">{r.email}</TableCell>
                    <TableCell className="font-mono text-sm whitespace-nowrap">
                      {r.phone_country_code} {r.phone_number}
                    </TableCell>
                    <TableCell className="text-sm">
                      {r.social_platform || r.social_handle ? (
                        <span>
                          {r.social_platform}
                          {r.social_handle ? ` · ${r.social_handle}` : ''}
                        </span>
                      ) : (
                        '—'
                      )}
                    </TableCell>
                    <TableCell>
                      <span
                        className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${statusPillClass(r.status)}`}
                      >
                        {r.status}
                      </span>
                    </TableCell>
                    <TableCell className="text-sm whitespace-nowrap">
                      {formatDateTime(r.created_at)}
                    </TableCell>
                    <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
                      <Button variant="outline" size="sm" onClick={() => openRow(r)}>
                        Review
                      </Button>
                    </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}

      {isFetching && !isLoading ? (
        <div className="text-xs text-muted-foreground text-center">Refreshing…</div>
      ) : null}

      <InfluencerRegistrationDetailSheet
        registration={selected}
        open={sheetOpen}
        onClose={() => setSheetOpen(false)}
        waConnected={waConnected}
      />
    </div>
  );
}