'use client';

import {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import {
  ColumnDef,
  PaginationState,
  SortingState,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from '@tanstack/react-table';
import { format } from 'date-fns';
import {
  Download,
  EllipsisVertical,
  Eye,
  Filter,
  Loader2,
  RefreshCw,
  Search,
  Settings2,
  UserPlus,
  X,
} from 'lucide-react';
import axios from '@/network/axios';
import { fetchCustomersRegistrations } from '@/network/apis/dashboard/customers-registrations/customersRegistrations.apis';
import {
  CustomerRegistration,
  CustomersRegistrationsListResponse,
} from '@/network/apis/dashboard/customers-registrations/type';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardFooter,
  CardHeader,
  CardHeading,
  CardTable,
  CardTitle,
  CardToolbar,
} from '@/components/ui/card';
import { DataGrid } from '@/components/ui/data-grid';
import { DataGridColumnHeader } from '@/components/ui/data-grid-column-header';
import { DataGridColumnVisibility } from '@/components/ui/data-grid-column-visibility';
import { DataGridPagination } from '@/components/ui/data-grid-pagination';
import { DataGridTable } from '@/components/ui/data-grid-table';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Container } from '@/components/common/container';
import {
  Toolbar,
  ToolbarHeading,
} from '@/app/components/layouts/demo1/components/toolbar';
import ConvertToClient from '../ConvertToClient/ConvertToClient';
import CustomerDeleteDialog from '../customerDeleteDialog/CustomerDeleteDialog';

type Customer = CustomerRegistration & {
  isconvert?: boolean;
  created_at?: string;
};

type ConversionStatus = 'all' | 'converted' | 'not_converted';

const PAGE_SIZES = [10, 25, 50, 100];

function initials(name?: string | null) {
  if (!name) return '??';
  const parts = name.trim().split(/\s+/);
  return ((parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? ''))
    .toUpperCase()
    .padEnd(2, '?');
}

function formatDate(d?: string | null) {
  if (!d) return '-';
  try {
    return format(new Date(d), 'dd MMM yyyy');
  } catch {
    return d;
  }
}

const CustomersRegistrations = () => {
  const router = useRouter();
  const sp = useSearchParams();

  // URL-persisted state
  const initialSearch = sp?.get('search') ?? '';
  const initialPerPage = Number(sp?.get('per_page') ?? '25');
  const initialPage = Number(sp?.get('page') ?? '1');
  const initialStatus = (sp?.get('status') ?? 'all') as ConversionStatus;
  const initialCountry = sp?.get('country') ?? '';
  const initialHasWebsite = sp?.get('has_website') === '1';

  const [searchInput, setSearchInput] = useState(initialSearch);
  const [searchQuery, setSearchQuery] = useState(initialSearch);
  const [conversionStatus, setConversionStatus] =
    useState<ConversionStatus>(
      ['all', 'converted', 'not_converted'].includes(initialStatus)
        ? initialStatus
        : 'all',
    );
  const [country, setCountry] = useState(initialCountry);
  const [hasWebsite, setHasWebsite] = useState(initialHasWebsite);

  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: Math.max(0, initialPage - 1),
    pageSize: PAGE_SIZES.includes(initialPerPage) ? initialPerPage : 25,
  });
  const [sorting, setSorting] = useState<SortingState>([]);

  const [customers, setCustomers] = useState<Customer[]>([]);
  const [loading, setLoading] = useState(true);
  const [exporting, setExporting] = useState(false);
  const [meta, setMeta] = useState({
    current_page: 1,
    last_page: 1,
    per_page: 25,
    total: 0,
  });

  const [convertingId, setConvertingId] = useState<number | null>(null);
  const [deleteCustomer, setDeleteCustomer] = useState<Customer | null>(null);

  // Sync URL
  useEffect(() => {
    const p = new URLSearchParams();
    if (searchQuery) p.set('search', searchQuery);
    if (conversionStatus !== 'all') p.set('status', conversionStatus);
    if (country) p.set('country', country);
    if (hasWebsite) p.set('has_website', '1');
    if (pagination.pageSize !== 25)
      p.set('per_page', String(pagination.pageSize));
    if (pagination.pageIndex !== 0)
      p.set('page', String(pagination.pageIndex + 1));
    const qs = p.toString();
    router.replace(qs ? `?${qs}` : '?', { scroll: false });
  }, [
    router,
    searchQuery,
    conversionStatus,
    country,
    hasWebsite,
    pagination.pageIndex,
    pagination.pageSize,
  ]);

  // Reset to page 0 when filters change (skip first render)
  const didMountFilters = useRef(false);
  useEffect(() => {
    if (!didMountFilters.current) {
      didMountFilters.current = true;
      return;
    }
    setPagination((p) => ({ ...p, pageIndex: 0 }));
  }, [searchQuery, conversionStatus, country, hasWebsite]);

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const params: Record<string, string | number> = {
        page: pagination.pageIndex + 1,
        per_page: pagination.pageSize,
      };
      if (searchQuery) params.search = searchQuery;
      if (country) params.country_name = country;

      const data = (await fetchCustomersRegistrations(
        params,
      )) as CustomersRegistrationsListResponse | undefined;

      const items = (data?.items ?? []) as Customer[];
      setCustomers(items);
      setMeta({
        current_page: data?.pagination?.current_page ?? 1,
        last_page: data?.pagination?.last_page ?? 1,
        per_page: data?.pagination?.per_page ?? pagination.pageSize,
        total: data?.pagination?.total ?? items.length,
      });
    } catch (err) {
      console.error('Error fetching customers registrations:', err);
      setCustomers([]);
    } finally {
      setLoading(false);
    }
  }, [
    pagination.pageIndex,
    pagination.pageSize,
    searchQuery,
    country,
  ]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // Client-side filters layered on top of the current page (BE may not support these)
  const visibleCustomers = useMemo(() => {
    return customers.filter((c) => {
      if (conversionStatus === 'converted' && !c.isconvert) return false;
      if (conversionStatus === 'not_converted' && c.isconvert) return false;
      if (hasWebsite && !c.company_website) return false;
      return true;
    });
  }, [customers, conversionStatus, hasWebsite]);

  // Distinct countries from current page (best-effort facet)
  const countryOptions = useMemo(() => {
    const set = new Set<string>();
    customers.forEach((c) => {
      if (c.country_name) set.add(c.country_name);
    });
    return Array.from(set).sort();
  }, [customers]);

  const handleExportCsv = async () => {
    setExporting(true);
    try {
      const res = await axios.get('/customer-registration/export-to-csv', {
        responseType: 'blob',
      });
      const blob = new Blob([res.data], {
        type: 'text/csv;charset=utf-8;',
      });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute(
        'download',
        `customer-registration-${new Date().toISOString().slice(0, 10)}.csv`,
      );
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error(error);
    } finally {
      setExporting(false);
    }
  };

  const activeFilterCount =
    (searchQuery ? 1 : 0) +
    (conversionStatus !== 'all' ? 1 : 0) +
    (country ? 1 : 0) +
    (hasWebsite ? 1 : 0);

  const clearAllFilters = () => {
    setSearchInput('');
    setSearchQuery('');
    setConversionStatus('all');
    setCountry('');
    setHasWebsite(false);
  };

  const columns = useMemo<ColumnDef<Customer>[]>(
    () => [
      {
        id: 'index',
        header: '#',
        cell: ({ row }) => (
          <span className="text-xs text-muted-foreground">
            {pagination.pageIndex * pagination.pageSize + row.index + 1}
          </span>
        ),
        enableSorting: false,
        enableHiding: false,
        size: 60,
      },
      {
        id: 'full_name',
        accessorFn: (row) => row.full_name,
        header: ({ column }) => (
          <DataGridColumnHeader title="Full Name" column={column} />
        ),
        cell: ({ row }) => (
          <div className="flex items-center gap-2.5 min-w-0">
            <Avatar className="h-8 w-8 shrink-0">
              <AvatarFallback className="text-[11px] bg-primary/10 text-primary font-semibold">
                {initials(row.original.full_name)}
              </AvatarFallback>
            </Avatar>
            <div className="flex flex-col min-w-0">
              <Link
                href={`/customers-registrations/${row.original.id}`}
                className="text-sm font-medium text-foreground hover:text-primary truncate"
              >
                {row.original.full_name || '-'}
              </Link>
              {row.original.company_name ? (
                <span className="text-xs text-muted-foreground truncate">
                  {row.original.company_name}
                </span>
              ) : null}
            </div>
          </div>
        ),
        enableSorting: true,
        size: 240,
      },
      {
        id: 'email',
        accessorFn: (row) => row.email,
        header: ({ column }) => (
          <DataGridColumnHeader title="Email" column={column} />
        ),
        cell: ({ row }) =>
          row.original.email ? (
            <a
              href={`mailto:${row.original.email}`}
              className="text-sm text-foreground hover:text-primary"
              onClick={(e) => e.stopPropagation()}
            >
              {row.original.email}
            </a>
          ) : (
            <span className="text-xs text-muted-foreground/50">-</span>
          ),
        enableSorting: true,
        size: 220,
      },
      {
        id: 'mobile',
        accessorFn: (row) => row.mobile,
        header: ({ column }) => (
          <DataGridColumnHeader title="Mobile" column={column} />
        ),
        cell: ({ row }) => (
          <span className="text-sm font-mono">
            {row.original.mobile || '-'}
          </span>
        ),
        enableSorting: true,
        size: 160,
      },
      {
        id: 'country_name',
        accessorFn: (row) => row.country_name,
        header: ({ column }) => (
          <DataGridColumnHeader title="Country" column={column} />
        ),
        cell: ({ row }) => (
          <span className="text-sm">{row.original.country_name || '-'}</span>
        ),
        enableSorting: true,
        size: 140,
      },
      {
        id: 'company_website',
        accessorFn: (row) => row.company_website,
        header: ({ column }) => (
          <DataGridColumnHeader title="Website" column={column} />
        ),
        cell: ({ row }) =>
          row.original.company_website ? (
            <a
              href={
                /^https?:\/\//i.test(row.original.company_website)
                  ? row.original.company_website
                  : `https://${row.original.company_website}`
              }
              target="_blank"
              rel="noreferrer"
              className="text-sm text-blue-600 hover:underline truncate block max-w-[180px]"
              onClick={(e) => e.stopPropagation()}
            >
              {row.original.company_website}
            </a>
          ) : (
            <span className="text-xs text-muted-foreground/50">-</span>
          ),
        enableSorting: true,
        size: 180,
      },
      {
        id: 'company_type_name',
        accessorFn: (row) => row.company_type_name,
        header: ({ column }) => (
          <DataGridColumnHeader title="Company Type" column={column} />
        ),
        cell: ({ row }) =>
          row.original.company_type_name ? (
            <Badge variant="secondary" appearance="outline" size="sm">
              {row.original.company_type_name}
            </Badge>
          ) : (
            <span className="text-xs text-muted-foreground/50">-</span>
          ),
        enableSorting: true,
        size: 160,
      },
      {
        id: 'collaboration_goal_name',
        accessorFn: (row) => row.collaboration_goal_name,
        header: ({ column }) => (
          <DataGridColumnHeader title="Goal" column={column} />
        ),
        cell: ({ row }) => (
          <span className="text-xs text-muted-foreground">
            {row.original.collaboration_goal_name || '-'}
          </span>
        ),
        enableSorting: true,
        size: 160,
      },
      {
        id: 'created_at',
        accessorFn: (row) => row.created_at,
        header: ({ column }) => (
          <DataGridColumnHeader title="Created" column={column} />
        ),
        cell: ({ row }) => (
          <span className="text-xs text-muted-foreground whitespace-nowrap">
            {formatDate(row.original.created_at)}
          </span>
        ),
        enableSorting: true,
        size: 130,
      },
      {
        id: 'created_by',
        accessorFn: (row) => row.created_by?.name,
        header: ({ column }) => (
          <DataGridColumnHeader title="Created By" column={column} />
        ),
        cell: ({ row }) => (
          <span className="text-xs text-muted-foreground">
            {row.original.created_by?.name || '-'}
          </span>
        ),
        enableSorting: true,
        size: 140,
      },
      {
        id: 'status',
        header: 'Status',
        cell: ({ row }) =>
          row.original.isconvert ? (
            <Badge variant="success" appearance="outline" size="sm">
              Converted
            </Badge>
          ) : (
            <Badge variant="warning" appearance="outline" size="sm">
              Pending
            </Badge>
          ),
        enableSorting: false,
        size: 110,
      },
      {
        id: 'actions',
        header: '',
        cell: ({ row }) => (
          <div className="flex items-center justify-end gap-1">
            {!row.original.isconvert ? (
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation();
                  setConvertingId(row.original.id);
                }}
              >
                <UserPlus className="h-3.5 w-3.5" />
                Convert
              </Button>
            ) : null}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  className="size-7"
                  mode="icon"
                  variant="ghost"
                  onClick={(e) => e.stopPropagation()}
                >
                  <EllipsisVertical />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent side="bottom" align="end">
                <DropdownMenuItem asChild>
                  <Link
                    href={`/customers-registrations/${row.original.id}`}
                    className="flex items-center gap-2"
                  >
                    <Eye className="h-4 w-4" />
                    View details
                  </Link>
                </DropdownMenuItem>
                {!row.original.isconvert ? (
                  <DropdownMenuItem
                    onClick={() => setConvertingId(row.original.id)}
                  >
                    <UserPlus className="h-4 w-4" />
                    Convert to client
                  </DropdownMenuItem>
                ) : null}
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  variant="destructive"
                  onClick={() => setDeleteCustomer(row.original)}
                >
                  Delete
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        ),
        enableSorting: false,
        enableHiding: false,
        size: 140,
      },
    ],
    [pagination.pageIndex, pagination.pageSize],
  );

  const table = useReactTable({
    columns,
    data: visibleCustomers,
    pageCount: meta.last_page || 1,
    getRowId: (row) => String(row.id),
    state: { pagination, sorting },
    manualPagination: true,
    manualFiltering: true,
    columnResizeMode: 'onChange',
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <Container>
      <Toolbar>
        <ToolbarHeading>
          <h1 className="text-xl font-semibold text-foreground">
            Customers Registrations
          </h1>
          <p className="text-sm text-muted-foreground">
            Inbound signup leads waiting to be converted into clients.
          </p>
        </ToolbarHeading>
      </Toolbar>

      <div className="space-y-4 pb-8">
        <DataGrid
          table={table}
          recordCount={meta.total}
          isLoading={loading}
          loadingMode="skeleton"
          emptyMessage={
            activeFilterCount > 0
              ? 'No customers match your filters.'
              : 'No customers registered yet.'
          }
          tableLayout={{
            columnsPinnable: true,
            columnsMovable: true,
            columnsVisibility: true,
            cellBorder: true,
            headerBackground: true,
            headerSticky: true,
          }}
        >
          <Card>
            <CardHeader className="flex-col sm:flex-row sm:items-center gap-3">
              <CardHeading>
                <div className="flex flex-wrap items-center gap-3">
                  <CardTitle>Registrations</CardTitle>
                  <div className="relative">
                    <Search className="size-4 text-muted-foreground absolute start-3 top-1/2 -translate-y-1/2" />
                    <Input
                      placeholder="Search name, company, email…"
                      value={searchInput}
                      onChange={(e) => setSearchInput(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') setSearchQuery(searchInput);
                      }}
                      className="ps-9 w-[280px]"
                    />
                    {searchInput.length > 0 ? (
                      <Button
                        mode="icon"
                        variant="ghost"
                        className="absolute end-1.5 top-1/2 -translate-y-1/2 h-6 w-6"
                        onClick={() => {
                          setSearchInput('');
                          setSearchQuery('');
                        }}
                      >
                        <X />
                      </Button>
                    ) : null}
                  </div>
                </div>
              </CardHeading>

              <CardToolbar>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button variant="outline" size="sm">
                      <Filter className="size-4" />
                      Filters
                      {activeFilterCount > 0 ? (
                        <Badge size="sm" variant="primary" className="ml-1">
                          {activeFilterCount}
                        </Badge>
                      ) : null}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent align="end" className="w-80 space-y-3">
                    <div className="space-y-1.5">
                      <Label className="text-xs font-medium text-muted-foreground">
                        Conversion status
                      </Label>
                      <Select
                        value={conversionStatus}
                        onValueChange={(v) =>
                          setConversionStatus(v as ConversionStatus)
                        }
                      >
                        <SelectTrigger className="h-9">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">All</SelectItem>
                          <SelectItem value="not_converted">
                            Not converted
                          </SelectItem>
                          <SelectItem value="converted">Converted</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-1.5">
                      <Label className="text-xs font-medium text-muted-foreground">
                        Country
                      </Label>
                      <Select
                        value={country || '__all__'}
                        onValueChange={(v) =>
                          setCountry(v === '__all__' ? '' : v)
                        }
                      >
                        <SelectTrigger className="h-9">
                          <SelectValue placeholder="All countries" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="__all__">All countries</SelectItem>
                          {countryOptions.map((c) => (
                            <SelectItem key={c} value={c}>
                              {c}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <p className="text-[10px] text-muted-foreground">
                        Options derived from the current page.
                      </p>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-xs font-medium text-muted-foreground">
                        Other
                      </Label>
                      <label className="flex items-center gap-2 text-sm cursor-pointer">
                        <input
                          type="checkbox"
                          checked={hasWebsite}
                          onChange={(e) => setHasWebsite(e.target.checked)}
                          className="rounded"
                        />
                        Has company website
                      </label>
                    </div>

                    {activeFilterCount > 0 ? (
                      <Button
                        variant="outline"
                        size="sm"
                        className="w-full"
                        onClick={clearAllFilters}
                      >
                        <X className="size-3.5" />
                        Clear all filters
                      </Button>
                    ) : null}
                  </PopoverContent>
                </Popover>

                <DataGridColumnVisibility
                  table={table}
                  trigger={
                    <Button variant="outline" size="sm">
                      <Settings2 />
                      Columns
                    </Button>
                  }
                />

                <Button
                  variant="outline"
                  size="sm"
                  onClick={fetchData}
                  disabled={loading}
                >
                  <RefreshCw
                    className={loading ? 'animate-spin' : ''}
                  />
                  Refresh
                </Button>

                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleExportCsv}
                  disabled={exporting}
                >
                  {exporting ? (
                    <Loader2 className="animate-spin" />
                  ) : (
                    <Download />
                  )}
                  Export CSV
                </Button>
              </CardToolbar>
            </CardHeader>

            {/* Active filter chips */}
            {activeFilterCount > 0 ? (
              <div className="px-5 pt-2 flex flex-wrap items-center gap-2">
                <span className="text-xs text-muted-foreground">
                  Active filters:
                </span>
                {searchQuery ? (
                  <Badge variant="secondary" appearance="outline">
                    Search: {searchQuery}
                    <button
                      onClick={() => {
                        setSearchInput('');
                        setSearchQuery('');
                      }}
                      className="ml-1 hover:text-foreground"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </Badge>
                ) : null}
                {conversionStatus !== 'all' ? (
                  <Badge variant="secondary" appearance="outline">
                    {conversionStatus === 'converted'
                      ? 'Converted'
                      : 'Not converted'}
                    <button
                      onClick={() => setConversionStatus('all')}
                      className="ml-1 hover:text-foreground"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </Badge>
                ) : null}
                {country ? (
                  <Badge variant="secondary" appearance="outline">
                    Country: {country}
                    <button
                      onClick={() => setCountry('')}
                      className="ml-1 hover:text-foreground"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </Badge>
                ) : null}
                {hasWebsite ? (
                  <Badge variant="secondary" appearance="outline">
                    Has website
                    <button
                      onClick={() => setHasWebsite(false)}
                      className="ml-1 hover:text-foreground"
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </Badge>
                ) : null}
              </div>
            ) : null}

            <CardTable>
              <ScrollArea>
                <DataGridTable />
                <ScrollBar orientation="horizontal" />
              </ScrollArea>
            </CardTable>
            <CardFooter>
              <DataGridPagination
                sizes={PAGE_SIZES}
                sizesLabel="Rows per page"
              />
            </CardFooter>
          </Card>
        </DataGrid>
      </div>

      <ConvertToClient
        userId={convertingId}
        isOpen={!!convertingId}
        onClose={() => setConvertingId(null)}
        onSuccess={() => {
          setConvertingId(null);
          fetchData();
        }}
      />

      <CustomerDeleteDialog
        open={!!deleteCustomer}
        closeDialog={() => {
          setDeleteCustomer(null);
          fetchData();
        }}
        customer={deleteCustomer}
      />
    </Container>
  );
};

export { CustomersRegistrations };