import { useCallback, useEffect, useMemo, useState } from 'react';
import {
  ArrowDownIcon,
  ArrowUpIcon,
  CornerDownRightIcon,
  DownloadIcon,
  Trash2Icon,
} from 'lucide-react';
import { toast } from 'sonner';

import { SeoPage, SeoPageHeader } from '../../components/seo/seo-page';
import { ListError, SkeletonRows } from '../../components/seo/list-state';
import { ModuleOffNotice } from '../../components/seo/module-off-notice';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import { Checkbox } from '../../components/ui/checkbox';
import ConfirmDialog from '../../components/ui/confirm-dialog';
import { Input } from '../../components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../../components/ui/table';
import { nextSort, type ListSort } from '../../lib/seo/sort';
import type {
  ISeoNotFoundEntry,
  ISeoNotFoundList,
  ISeoRedirectInput,
} from '../../service/seo/seo.interface';
import {
  bulkSeoNotFound,
  exportSeoNotFound,
  fetchSeoNotFound,
} from '../../service/seo/seo.service';

import { RedirectDialog } from './SeoRedirects';
import { PAGES } from './settings.copy';

const PER_PAGE = 20;

type OrderBy = 'accessed_at' | 'times_accessed' | 'uri';

const download = (name: string, text: string): void => {
  const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
  const link = document.createElement('a');
  link.href = url;
  link.download = name;
  link.click();
  URL.revokeObjectURL(url);
};

const when = (value: string): string =>
  value ? new Date(value).toLocaleString() : '';

/** The 404 log: what was asked for, how often, from where, and a button to redirect it. */
const SeoNotFound = (): JSX.Element => {
  const [list, setList] = useState<ISeoNotFoundList | null>(null);
  const [error, setError] = useState('');
  const [search, setSearch] = useState('');
  const [query, setQuery] = useState('');
  const [sort, setSort] = useState<ListSort<OrderBy>>({
    by: 'accessed_at',
    order: 'desc',
  });
  const [page, setPage] = useState(1);
  const [selected, setSelected] = useState<number[]>([]);
  const [redirecting, setRedirecting] = useState<ISeoNotFoundEntry | null>(
    null
  );
  const [confirm, setConfirm] = useState<'clear' | number[] | null>(null);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async (): Promise<void> => {
    try {
      setList(
        await fetchSeoNotFound({
          search: query,
          page,
          per_page: PER_PAGE,
          orderby: sort.by,
          order: sort.order,
        })
      );
      setError('');
    } catch (reason) {
      setError((reason as Error).message);
    }
  }, [query, page, sort]);

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

  useEffect(() => {
    const timer = setTimeout(() => {
      setQuery(search.trim());
      setPage(1);
    }, 400);
    return () => clearTimeout(timer);
  }, [search]);

  const pages = useMemo(
    () => (list ? Math.max(1, Math.ceil(list.total / PER_PAGE)) : 1),
    [list]
  );
  const advanced = list?.mode === 'advanced';
  // The selection is of the rows on screen: a new page, tab or search
  // leaves only those, so a bulk action never reaches rows nobody sees.
  useEffect(() => {
    setSelected(current =>
      current.filter(id => list?.items.some(item => item.id === id))
    );
  }, [list]);
  const allSelected =
    !!list &&
    list.items.length > 0 &&
    list.items.every(item => selected.includes(item.id));

  const run = async (
    action: 'delete' | 'clear' | 'redirected',
    payload: { ids?: number[]; uri?: string },
    message: string
  ): Promise<void> => {
    setBusy(true);
    try {
      await bulkSeoNotFound(action, payload);
      toast.success(message);
      setSelected([]);
      await load();
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
      setConfirm(null);
    }
  };

  const exportCsv = async (): Promise<void> => {
    try {
      const { csv } = await exportSeoNotFound();
      download('recomaze-404-log.csv', csv);
    } catch (reason) {
      toast.error((reason as Error).message);
    }
  };

  const redirectInput = (entry: ISeoNotFoundEntry): ISeoRedirectInput => ({
    sources: [
      {
        pattern: entry.uri.replace(/[?#].*$/, ''),
        comparison: 'exact',
        ignore_case: false,
      },
    ],
    url_to: '',
    header_code: Number(list?.default_code ?? 301),
    status: 'active',
  });

  const sortButton = (key: OrderBy, label: string): JSX.Element => (
    <button
      type="button"
      className={
        sort.by === key
          ? 'inline-flex items-center gap-1 font-semibold text-foreground'
          : 'inline-flex items-center gap-1 text-muted-foreground hover:text-foreground'
      }
      onClick={() => {
        setSort(current => nextSort(current, key, ['uri']));
        setPage(1);
      }}
    >
      {label}
      {sort.by === key &&
        (sort.order === 'asc' ? (
          <ArrowUpIcon className="size-3" />
        ) : (
          <ArrowDownIcon className="size-3" />
        ))}
    </button>
  );

  return (
    <SeoPage>
      <SeoPageHeader
        title={PAGES.notFound.title}
        description={PAGES.notFound.description}
        actions={
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" size="sm" onClick={exportCsv}>
              <DownloadIcon /> Export CSV
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={!list || list.count === 0}
              onClick={() => setConfirm('clear')}
            >
              <Trash2Icon /> Clear log
            </Button>
          </div>
        }
      />
      <ModuleOffNotice module="monitor_404" onSwitchedOn={() => void load()}>
        The 404 monitor is off: nothing new is logged. The rows below are what
        it logged while it ran.
      </ModuleOffNotice>

      <div className="flex flex-col gap-3">
        <div className="flex flex-wrap items-center gap-3">
          <Input
            className="w-64"
            placeholder="Search address or referer"
            value={search}
            onChange={event => setSearch(event.target.value)}
          />
          <span className="text-sm text-muted-foreground">
            Sort by {sortButton('accessed_at', 'last seen')} ·{' '}
            {sortButton('times_accessed', 'hits')} ·{' '}
            {sortButton('uri', 'address')}
          </span>
          {selected.length > 0 && (
            <Button
              size="sm"
              variant="destructive"
              disabled={busy}
              onClick={() => setConfirm(selected)}
            >
              Delete {selected.length} selected
            </Button>
          )}
          {list && (
            <span className="ml-auto text-sm text-muted-foreground">
              {list.total} of {list.count} row{list.count === 1 ? '' : 's'}
              {advanced ? ', one per visit' : ', one per address'}
            </span>
          )}
        </div>

        {error && <ListError message={error} onRetry={() => void load()} />}

        {!list && error ? null : list && list.items.length === 0 ? (
          <div className="rounded-xl border border-dashed border-border p-10 text-center text-sm text-muted-foreground">
            {list.count === 0
              ? 'Nothing logged yet. Rows appear as soon as someone opens an address that does not exist.'
              : 'Nothing matches this search.'}
          </div>
        ) : (
          <div className="overflow-x-auto rounded-2xl border border-border bg-card">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-8">
                    <Checkbox
                      checked={allSelected}
                      aria-label="Select all"
                      onCheckedChange={checked =>
                        setSelected(
                          checked && list ? list.items.map(item => item.id) : []
                        )
                      }
                    />
                  </TableHead>
                  <TableHead>Address</TableHead>
                  <TableHead className="text-right">Hits</TableHead>
                  <TableHead className="hidden @4xl:table-cell">
                    Last seen
                  </TableHead>
                  <TableHead className="hidden @5xl:table-cell">
                    Referer
                  </TableHead>
                  {advanced && (
                    <TableHead className="hidden @6xl:table-cell">
                      Browser
                    </TableHead>
                  )}
                  <TableHead className="w-40" />
                </TableRow>
              </TableHeader>
              <TableBody aria-busy={!list}>
                {!list && (
                  <SkeletonRows
                    cells={[
                      '',
                      '',
                      '',
                      'hidden @4xl:table-cell',
                      'hidden @5xl:table-cell',
                      ...(advanced ? ['hidden @6xl:table-cell'] : []),
                      '',
                    ]}
                  />
                )}
                {(list?.items ?? []).map(item => (
                  <TableRow key={item.id}>
                    <TableCell>
                      <Checkbox
                        checked={selected.includes(item.id)}
                        aria-label={`Select ${item.uri}`}
                        onCheckedChange={checked =>
                          setSelected(current =>
                            checked
                              ? [...current, item.id]
                              : current.filter(id => id !== item.id)
                          )
                        }
                      />
                    </TableCell>
                    <TableCell className="max-w-[240px] @5xl:max-w-[360px]">
                      <span className="block truncate font-mono text-xs">
                        {item.uri}
                      </span>
                      {item.redirected && (
                        <Badge variant="secondary" className="mt-1">
                          Redirected now
                        </Badge>
                      )}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {item.times_accessed}
                    </TableCell>
                    {/* Narrow, the secondary columns give way so the
                        actions stay on screen. */}
                    <TableCell className="hidden whitespace-nowrap text-xs text-muted-foreground @4xl:table-cell">
                      {when(item.accessed_at)}
                    </TableCell>
                    <TableCell className="hidden max-w-[240px] truncate text-xs text-muted-foreground @5xl:table-cell">
                      {item.referer || '—'}
                    </TableCell>
                    {advanced && (
                      <TableCell className="hidden max-w-[200px] truncate text-xs text-muted-foreground @6xl:table-cell">
                        {item.user_agent || '—'}
                      </TableCell>
                    )}
                    <TableCell className="text-right whitespace-nowrap">
                      {!item.redirected && (
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => setRedirecting(item)}
                        >
                          <CornerDownRightIcon /> Redirect
                        </Button>
                      )}
                      <Button
                        variant="ghost"
                        size="icon-sm"
                        aria-label="Delete"
                        onClick={() => setConfirm([item.id])}
                      >
                        <Trash2Icon />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}

        {pages > 1 && (
          <div className="flex items-center justify-end gap-2 text-sm">
            <Button
              variant="outline"
              size="sm"
              disabled={page <= 1}
              onClick={() => setPage(page - 1)}
            >
              Previous
            </Button>
            <span className="text-muted-foreground">
              Page {page} of {pages}
            </span>
            <Button
              variant="outline"
              size="sm"
              disabled={page >= pages}
              onClick={() => setPage(page + 1)}
            >
              Next
            </Button>
          </div>
        )}
      </div>

      <RedirectDialog
        announce={false}
        open={redirecting !== null}
        initial={
          redirecting ? { id: 0, input: redirectInput(redirecting) } : null
        }
        onClose={() => setRedirecting(null)}
        onSaved={() => {
          if (redirecting) {
            run(
              'redirected',
              { uri: redirecting.uri },
              'Redirect added; the address leaves the log'
            );
          }
        }}
      />

      <ConfirmDialog
        open={confirm !== null}
        onOpenChange={next => !next && setConfirm(null)}
        title={
          confirm === 'clear' ? 'Clear the whole log?' : 'Delete these rows?'
        }
        description={
          confirm === 'clear'
            ? 'Every row goes. New 404s keep being logged.'
            : 'The rows go; the addresses are logged again if they are visited again.'
        }
        confirmLabel={confirm === 'clear' ? 'Clear log' : 'Delete'}
        tone="destructive"
        busy={busy}
        onConfirm={() =>
          confirm === 'clear'
            ? run('clear', {}, 'Log cleared')
            : confirm && run('delete', { ids: confirm }, 'Rows deleted')
        }
      />
    </SeoPage>
  );
};

export default SeoNotFound;