import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  ArrowDownIcon,
  ArrowUpIcon,
  ChartColumnIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ExternalLinkIcon,
  LoaderCircleIcon,
  RefreshCwIcon,
  SearchIcon,
  UnplugIcon,
} from 'lucide-react';
import { useSearchParams } from 'react-router-dom';
import { toast } from 'sonner';

import ChartCanvas from '../../components/agent-analytics/ChartCanvas';
import { SeoPage, SeoPageHeader } from '../../components/seo/seo-page';
import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '../../components/ui/card';
import ConfirmDialog from '../../components/ui/confirm-dialog';
import EmptyState from '../../components/ui/empty-state';
import { Input } from '../../components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../../components/ui/table';
import { Tabs, TabsList, TabsTrigger } from '../../components/ui/tabs';
import { classNames } from '../../lib/utils';
import type {
  ISeoAnalyticsList,
  ISeoAnalyticsOverview,
  ISeoAnalyticsPeriod,
  ISeoAnalyticsRow,
  ISeoAnalyticsTotals,
  ISeoGoogleProperties,
  ISeoGoogleStatus,
  SeoAnalyticsSort,
} from '../../service/seo/seo-analytics.interface';
import {
  chooseGoogleProperties,
  disconnectGoogle,
  fetchAnalyticsKeywords,
  fetchAnalyticsOverview,
  fetchAnalyticsPages,
  fetchGoogleConnectUrl,
  fetchGoogleProperties,
  fetchGoogleStatus,
  requestAnalyticsSync,
} from '../../service/seo/seo-analytics.service';

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

const PERIODS = [
  { key: '28d', label: 'Last 28 days', days: 28 },
  { key: '3m', label: '3 months', days: 91 },
  { key: '6m', label: '6 months', days: 182 },
  { key: '12m', label: '12 months', days: 365 },
  { key: '16m', label: '16 months', days: 487 },
] as const;

type PeriodKey = (typeof PERIODS)[number]['key'];

// Search Console publishes a day two to three days after it ends.
const LAG_DAYS = 3;
const PER_PAGE = 25;
const SYNC_POLL_MS = 10000;

const NOT_CONNECTED: ISeoGoogleStatus = {
  connected: false,
  email: null,
  site_url: null,
  ga4_property: null,
  last_synced_at: null,
  syncing: false,
  rows: 0,
  error: null,
};

const isoDay = (date: Date): string => date.toISOString().slice(0, 10);

const periodOf = (key: PeriodKey): ISeoAnalyticsPeriod => {
  const days = PERIODS.find(period => period.key === key)?.days ?? 28;
  const to = new Date();
  to.setUTCDate(to.getUTCDate() - LAG_DAYS);
  const from = new Date(to);
  from.setUTCDate(from.getUTCDate() - days + 1);
  return { from: isoDay(from), to: isoDay(to) };
};

const number = (value: number | null): string =>
  Math.round(value ?? 0).toLocaleString();
const percent = (value: number | null): string =>
  `${((value ?? 0) * 100).toFixed(1)}%`;
const position = (value: number | null): string =>
  value !== null && value > 0 ? value.toFixed(1) : '—';

const when = (iso: string | null): string =>
  iso ? new Date(iso).toLocaleString() : 'never';

/** Change against the previous period, as a signed percentage; null without a base. */
const change = (now: number | null, before: number | null): number | null =>
  now !== null && before !== null && before > 0
    ? ((now - before) / before) * 100
    : null;

const Delta = ({
  now,
  before,
  lowerIsBetter = false,
}: {
  now: number | null;
  before: number | null;
  lowerIsBetter?: boolean;
}): JSX.Element | null => {
  const value = change(now, before);
  if (value === null || Math.abs(value) < 0.05) {
    return <span className="text-xs text-muted-foreground">—</span>;
  }
  const good = lowerIsBetter ? value < 0 : value > 0;
  return (
    <span
      className={classNames(
        'inline-flex items-center gap-0.5 text-xs font-medium tabular-nums',
        good
          ? 'text-emerald-600 dark:text-emerald-400'
          : 'text-red-600 dark:text-red-400'
      )}
    >
      {value > 0 ? (
        <ArrowUpIcon className="size-3" />
      ) : (
        <ArrowDownIcon className="size-3" />
      )}
      {Math.abs(value).toFixed(0)}%
    </span>
  );
};

const METRICS: {
  key: SeoAnalyticsSort;
  label: string;
  format: (value: number | null) => string;
  lowerIsBetter?: boolean;
  hint: string;
}[] = [
  {
    key: 'clicks',
    label: 'Clicks',
    format: number,
    hint: 'Visits from Google search results.',
  },
  {
    key: 'impressions',
    label: 'Impressions',
    format: number,
    hint: 'How often a page of the site appeared in results.',
  },
  {
    key: 'ctr',
    label: 'CTR',
    format: percent,
    hint: 'Clicks divided by impressions.',
  },
  {
    key: 'position',
    label: 'Position',
    format: position,
    lowerIsBetter: true,
    hint: 'Average rank in results, weighted by impressions; 1 is the top.',
  },
];

const Tile = ({
  metric,
  totals,
  previous,
}: {
  metric: (typeof METRICS)[number];
  totals: ISeoAnalyticsTotals;
  previous: ISeoAnalyticsTotals;
}): JSX.Element => (
  <Card size="sm">
    <CardContent>
      <div className="text-xs font-medium text-muted-foreground">
        {metric.label}
      </div>
      <div className="mt-1 flex items-baseline gap-2">
        <span className="text-3xl font-semibold tabular-nums">
          {metric.format(totals[metric.key])}
        </span>
        <Delta
          now={totals[metric.key]}
          before={previous[metric.key]}
          lowerIsBetter={metric.lowerIsBetter}
        />
      </div>
      <p className="mt-1 text-xs text-muted-foreground">{metric.hint}</p>
    </CardContent>
  </Card>
);

const chartData = (overview: ISeoAnalyticsOverview) => ({
  labels: overview.daily.map(day => day.date.slice(5)),
  datasets: [
    {
      label: 'Clicks',
      data: overview.daily.map(day => day.clicks),
      borderColor: '#b7007c',
      backgroundColor: 'rgba(183,0,124,0.08)',
      fill: true,
      tension: 0.35,
      pointRadius: 0,
      yAxisID: 'y',
    },
    {
      label: 'Impressions',
      data: overview.daily.map(day => day.impressions),
      borderColor: '#60b5ff',
      backgroundColor: 'transparent',
      tension: 0.35,
      pointRadius: 0,
      yAxisID: 'y1',
    },
  ],
});

const CHART_OPTIONS = {
  interaction: { mode: 'index' as const, intersect: false },
  plugins: { legend: { display: true, position: 'bottom' as const } },
  scales: {
    x: { grid: { display: false }, ticks: { maxTicksLimit: 12 } },
    y: { beginAtZero: true, position: 'left' as const },
    y1: {
      beginAtZero: true,
      position: 'right' as const,
      grid: { drawOnChartArea: false },
    },
  },
};

const RowsTable = ({
  title,
  keyLabel,
  period,
  fetchRows,
  linkKeys = false,
}: {
  title: string;
  keyLabel: string;
  period: ISeoAnalyticsPeriod;
  fetchRows: (
    query: Parameters<typeof fetchAnalyticsKeywords>[0]
  ) => Promise<ISeoAnalyticsList>;
  linkKeys?: boolean;
}): JSX.Element => {
  const [list, setList] = useState<ISeoAnalyticsList | null>(null);
  const [sort, setSort] = useState<SeoAnalyticsSort>('clicks');
  const [order, setOrder] = useState<'asc' | 'desc'>('desc');
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [typed, setTyped] = useState('');
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const handle = window.setTimeout(() => {
      setSearch(typed.trim());
      setPage(1);
    }, 400);
    return () => window.clearTimeout(handle);
  }, [typed]);

  useEffect(() => {
    let live = true;
    fetchRows({
      ...period,
      sort,
      order,
      page,
      per_page: PER_PAGE,
      search: search || undefined,
    })
      .then(next => {
        if (live) {
          setList(next);
          setError(null);
        }
      })
      .catch(reason => {
        if (live) setError((reason as Error).message);
      });
    return () => {
      live = false;
    };
  }, [fetchRows, period, sort, order, page, search]);

  const sortBy = (key: SeoAnalyticsSort): void => {
    if (key === sort) {
      setOrder(current => (current === 'desc' ? 'asc' : 'desc'));
    } else {
      setSort(key);
      setOrder(key === 'position' ? 'asc' : 'desc');
    }
    setPage(1);
  };

  const pages = list ? Math.max(1, list.total_pages) : 1;

  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>
          {list
            ? `${list.total.toLocaleString()} ${list.total === 1 ? 'row' : 'rows'} for ${period.from} to ${period.to}.`
            : 'Loading…'}
        </CardDescription>
        <div className="relative mt-2 max-w-xs">
          <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            value={typed}
            onChange={event => setTyped(event.target.value)}
            placeholder={`Search ${keyLabel.toLowerCase()}s`}
            className="pl-8"
            aria-label={`Search ${keyLabel.toLowerCase()}s`}
          />
        </div>
      </CardHeader>
      <CardContent>
        {error && <Callout tone="danger">{error}</Callout>}
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>{keyLabel}</TableHead>
                {METRICS.map(metric => (
                  <TableHead key={metric.key} className="text-right">
                    <button
                      type="button"
                      onClick={() => sortBy(metric.key)}
                      className={classNames(
                        'inline-flex items-center gap-1',
                        sort === metric.key && 'text-foreground'
                      )}
                      title={metric.hint}
                    >
                      {metric.label}
                      {sort === metric.key &&
                        (order === 'desc' ? (
                          <ArrowDownIcon className="size-3" />
                        ) : (
                          <ArrowUpIcon className="size-3" />
                        ))}
                    </button>
                  </TableHead>
                ))}
                <TableHead className="text-right">vs. before</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {(list?.rows ?? []).map((row: ISeoAnalyticsRow) => (
                <TableRow key={row.key}>
                  <TableCell className="max-w-[28rem]">
                    {linkKeys ? (
                      <a
                        href={row.key}
                        target="_blank"
                        rel="noreferrer"
                        className="inline-flex max-w-full items-center gap-1 truncate underline-offset-4 hover:underline"
                        title={row.key}
                      >
                        <span className="truncate">
                          {row.key.replace(/^https?:\/\/[^/]+/, '') || row.key}
                        </span>
                        <ExternalLinkIcon className="size-3 shrink-0 text-muted-foreground" />
                      </a>
                    ) : (
                      <span className="block truncate" title={row.key}>
                        {row.key}
                      </span>
                    )}
                  </TableCell>
                  {METRICS.map(metric => (
                    <TableCell
                      key={metric.key}
                      className="text-right tabular-nums"
                    >
                      {metric.format(row[metric.key])}
                    </TableCell>
                  ))}
                  <TableCell className="text-right">
                    {row.previous ? (
                      <Delta
                        now={row[sort]}
                        before={row.previous[sort]}
                        lowerIsBetter={sort === 'position'}
                      />
                    ) : (
                      <span className="text-xs text-muted-foreground">new</span>
                    )}
                  </TableCell>
                </TableRow>
              ))}
              {list && list.rows.length === 0 && (
                <TableRow>
                  <TableCell
                    colSpan={METRICS.length + 2}
                    className="text-center text-muted-foreground"
                  >
                    Nothing for this period{search ? ' and search' : ''}.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
        {pages > 1 && (
          <div className="mt-3 flex items-center justify-end gap-2 text-xs text-muted-foreground">
            Page {page} of {pages}
            <Button
              size="sm"
              variant="outline"
              disabled={page <= 1}
              onClick={() => setPage(current => current - 1)}
              aria-label="Previous page"
            >
              <ChevronLeftIcon />
            </Button>
            <Button
              size="sm"
              variant="outline"
              disabled={page >= pages}
              onClick={() => setPage(current => current + 1)}
              aria-label="Next page"
            >
              <ChevronRightIcon />
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

const ConnectCard = ({
  busy,
  onConnect,
}: {
  busy: boolean;
  onConnect: () => void;
}): JSX.Element => (
  <Card>
    <CardHeader>
      <CardTitle>Connect Google Search Console</CardTitle>
      <CardDescription>
        The queries people typed, the pages that answered, clicks, impressions
        and positions, kept by Recomaze and refreshed every day. Read-only:
        nothing in Search Console changes, and you can disconnect here at any
        time.
      </CardDescription>
    </CardHeader>
    <CardContent className="flex flex-wrap items-center gap-3">
      <Button onClick={onConnect} disabled={busy}>
        {busy ? (
          <LoaderCircleIcon className="animate-spin" />
        ) : (
          <ChartColumnIcon />
        )}
        Connect Google
      </Button>
      <p className="text-xs text-muted-foreground">
        Google asks which account to use and shows the two read-only permissions
        before anything is shared.
      </p>
    </CardContent>
  </Card>
);

const PropertyPicker = ({
  properties,
  busy,
  onPick,
}: {
  properties: ISeoGoogleProperties | null;
  busy: boolean;
  onPick: (siteUrl: string) => void;
}): JSX.Element => (
  <Card>
    <CardHeader>
      <CardTitle>Which Search Console property is this site?</CardTitle>
      <CardDescription>
        The Google account is connected. Pick the property that matches this
        site; the first fetch brings the last 90 days.
      </CardDescription>
    </CardHeader>
    <CardContent className="flex flex-col gap-2">
      {!properties && (
        <p className="text-sm text-muted-foreground">Asking Google…</p>
      )}
      {properties && properties.sites.length === 0 && (
        <Callout tone="warning">
          This Google account has no Search Console properties. Add the site in
          Search Console first, or connect another account.
        </Callout>
      )}
      {(properties?.sites ?? []).map(site => (
        <Button
          key={site.site_url}
          variant="outline"
          className="justify-start"
          disabled={busy}
          onClick={() => onPick(site.site_url)}
        >
          {site.site_url}
          <span className="ml-auto text-xs text-muted-foreground">
            {site.permission_level}
          </span>
        </Button>
      ))}
    </CardContent>
  </Card>
);

const SeoAnalytics = (): JSX.Element => {
  const [params, setParams] = useSearchParams();
  const [status, setStatus] = useState<ISeoGoogleStatus | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [properties, setProperties] = useState<ISeoGoogleProperties | null>(
    null
  );
  const [periodKey, setPeriodKey] = useState<PeriodKey>('28d');
  const [overview, setOverview] = useState<ISeoAnalyticsOverview | null>(null);
  const [confirmDisconnect, setConfirmDisconnect] = useState(false);
  const poll = useRef<number | null>(null);
  const period = useMemo(() => periodOf(periodKey), [periodKey]);

  const [notice, setNotice] = useState<string | null>(null);

  const loadStatus = useCallback(async (): Promise<ISeoGoogleStatus | null> => {
    try {
      const next = await fetchGoogleStatus();
      setStatus(next);
      setError(null);
      setNotice(null);
      return next;
    } catch (reason) {
      const text = (reason as Error).message;
      // An API without the Google routes yet answers 404: show the page as
      // it will be, with a line saying why the button will not work today.
      if (/\b404\b/.test(text)) {
        setStatus(NOT_CONNECTED);
        setNotice(
          'Google data is not switched on for this account on the Recomaze API yet.'
        );
        return null;
      }
      setError(text);
      return null;
    }
  }, []);

  // Google sends the browser back here with ?google=connected (or error);
  // with a hash router it may sit before or after the hash.
  useEffect(() => {
    const outside = new URLSearchParams(window.location.search).get('google');
    const inside = params.get('google');
    const result = inside ?? outside;
    if (!result) return;
    if (result === 'connected') {
      toast.success('Google is connected.');
    } else {
      toast.error(
        `Google did not connect${params.get('reason') ? `: ${params.get('reason')}` : '.'}`
      );
    }
    if (inside) setParams({}, { replace: true });
    if (outside) {
      const url = new URL(window.location.href);
      url.searchParams.delete('google');
      url.searchParams.delete('reason');
      window.history.replaceState(null, '', url.toString());
    }
  }, [params, setParams]);

  useEffect(() => {
    void loadStatus();
  }, [loadStatus]);

  // While the first fetch runs there is nothing to show; ask again until it lands.
  const syncing = Boolean(
    status?.connected && status.site_url && status.syncing
  );
  useEffect(() => {
    if (!syncing) return undefined;
    poll.current = window.setInterval(() => void loadStatus(), SYNC_POLL_MS);
    return () => {
      if (poll.current) window.clearInterval(poll.current);
    };
  }, [syncing, loadStatus]);

  useEffect(() => {
    if (status?.connected && !status.site_url && !properties) {
      fetchGoogleProperties()
        .then(setProperties)
        .catch(reason => setError((reason as Error).message));
    }
  }, [status, properties]);

  const ready = Boolean(
    status?.connected && status.site_url && status.rows > 0
  );
  useEffect(() => {
    if (!ready) return undefined;
    let live = true;
    fetchAnalyticsOverview(period)
      .then(next => {
        if (live) setOverview(next);
      })
      .catch(reason => {
        if (live) setError((reason as Error).message);
      });
    return () => {
      live = false;
    };
  }, [ready, period, status?.last_synced_at]);

  const connect = async (): Promise<void> => {
    setBusy(true);
    try {
      const returnUrl = `${window.location.href.split('#')[0]}#/seo/analytics`;
      const { url } = await fetchGoogleConnectUrl(returnUrl);
      window.location.assign(url);
    } catch (reason) {
      toast.error((reason as Error).message);
      setBusy(false);
    }
  };

  const pick = async (siteUrl: string): Promise<void> => {
    setBusy(true);
    try {
      await chooseGoogleProperties({ site_url: siteUrl });
      await loadStatus();
      toast.success('Property saved; fetching the last 90 days.');
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const refresh = async (): Promise<void> => {
    setBusy(true);
    try {
      await requestAnalyticsSync();
      toast.info('Fetching fresh data from Google; a minute or two.');
      await loadStatus();
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const disconnect = async (): Promise<void> => {
    setBusy(true);
    try {
      await disconnectGoogle();
      setOverview(null);
      setProperties(null);
      await loadStatus();
      toast.success('Google disconnected; the cached data is gone.');
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
      setConfirmDisconnect(false);
    }
  };

  const data = useMemo(
    () => (overview ? chartData(overview) : null),
    [overview]
  );

  return (
    <SeoPage>
      <SeoPageHeader
        title={PAGES.analytics.title}
        description={PAGES.analytics.description}
        actions={
          status?.connected ? (
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={busy || syncing}
                onClick={refresh}
              >
                <RefreshCwIcon
                  className={syncing ? 'animate-spin' : undefined}
                />
                Refresh
              </Button>
              <Button
                variant="ghost"
                size="sm"
                disabled={busy}
                onClick={() => setConfirmDisconnect(true)}
              >
                <UnplugIcon /> Disconnect
              </Button>
            </div>
          ) : undefined
        }
      />

      {error && <Callout tone="danger">{error}</Callout>}
      {notice && <Callout tone="info">{notice}</Callout>}

      {!status && !error && (
        <p className="text-sm text-muted-foreground">
          Checking the connection…
        </p>
      )}

      {status && !status.connected && (
        <ConnectCard busy={busy} onConnect={connect} />
      )}

      {status?.connected && status.error === 'reconnect' && (
        <Callout tone="warning">
          Google no longer accepts the saved access; connect again.{' '}
          <button
            type="button"
            className="font-medium underline-offset-4 hover:underline"
            onClick={connect}
          >
            Connect Google
          </button>
        </Callout>
      )}

      {status?.connected && !status.site_url && (
        <PropertyPicker properties={properties} busy={busy} onPick={pick} />
      )}

      {status?.connected && status.site_url && !ready && (
        <Callout tone="info">
          <span className="inline-flex items-center gap-2">
            {syncing && <LoaderCircleIcon className="size-4 animate-spin" />}
            {syncing
              ? `Fetching the last 90 days for ${status.site_url} from Google; this page fills in by itself.`
              : status.error
                ? `The last fetch failed: ${status.error}`
                : `No data yet for ${status.site_url}.`}
          </span>
        </Callout>
      )}

      {ready && (
        <>
          <div className="flex flex-wrap items-center justify-between gap-3">
            <Tabs
              value={periodKey}
              onValueChange={next => setPeriodKey(next as PeriodKey)}
            >
              <TabsList aria-label="Period">
                {PERIODS.map(item => (
                  <TabsTrigger key={item.key} value={item.key} className="px-3">
                    {item.label}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
            <p className="text-xs text-muted-foreground">
              {status?.site_url} · {status?.email} · updated{' '}
              {when(overview?.last_synced_at ?? status?.last_synced_at ?? null)}
              {overview?.stale ? ' · refreshing' : ''}
            </p>
          </div>

          {overview ? (
            <>
              <div className="@container">
                <div className="grid gap-3 @lg:grid-cols-2 @2xl:grid-cols-4">
                  {METRICS.map(metric => (
                    <Tile
                      key={metric.key}
                      metric={metric}
                      totals={overview.totals}
                      previous={overview.previous_totals}
                    />
                  ))}
                </div>
              </div>
              <Card>
                <CardHeader>
                  <CardTitle>Clicks and impressions by day</CardTitle>
                  <CardDescription>
                    {period.from} to {period.to}, against the{' '}
                    {overview.previous.from}
                    {' – '}
                    {overview.previous.to} before it.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {data && overview.daily.length > 0 ? (
                    <ChartCanvas
                      type="line"
                      data={data}
                      options={CHART_OPTIONS}
                    />
                  ) : (
                    <EmptyState
                      icon={ChartColumnIcon}
                      title="No days in this period"
                      description="Google has not published data for these days yet."
                    />
                  )}
                </CardContent>
              </Card>
            </>
          ) : (
            <p className="text-sm text-muted-foreground">Loading…</p>
          )}

          <RowsTable
            title="Keywords"
            keyLabel="Query"
            period={period}
            fetchRows={fetchAnalyticsKeywords}
          />
          <RowsTable
            title="Pages"
            keyLabel="Page"
            period={period}
            fetchRows={fetchAnalyticsPages}
            linkKeys
          />
        </>
      )}

      <ConfirmDialog
        open={confirmDisconnect}
        onOpenChange={setConfirmDisconnect}
        title="Disconnect Google?"
        description="Recomaze forgets the access and deletes the cached Search Console rows for this site. Nothing changes in Google. You can connect again at any time."
        confirmLabel="Disconnect"
        tone="destructive"
        busy={busy}
        onConfirm={disconnect}
      />
    </SeoPage>
  );
};

export default SeoAnalytics;