import { useEffect, useState } from 'react';
import apiFetch from '@wordpress/api-fetch';

import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';

import { FieldHeader } from './fields';

interface PostRedirectState {
  path: string;
  redirect: {
    id: number;
    url_to: string;
    header_code: number;
    active: boolean;
    sources: number;
  } | null;
}

const CODES = [
  { value: '301', label: '301 Moved for good' },
  { value: '302', label: '302 Moved for now' },
  { value: '307', label: '307 Moved for now, same method' },
  { value: '410', label: '410 Gone for good' },
  { value: '451', label: '451 Taken down for legal reasons' },
];

const gone = (code: string): boolean => code === '410' || code === '451';

/**
 * Advanced → Redirect: where the page's address sends visitors instead of
 * the page, kept in the Redirects module like any other rule, so it shows
 * and can be changed there too.
 */
export const PostRedirect = ({
  postId,
  appUrl,
}: {
  postId: number;
  appUrl: string;
}): JSX.Element => {
  const [state, setState] = useState<PostRedirectState | null>(null);
  const [code, setCode] = useState('301');
  const [destination, setDestination] = useState('');
  const [editing, setEditing] = useState(false);
  const [busy, setBusy] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const [message, setMessage] = useState('');
  const path = `/recomaze/v1/seo/redirects/post/${postId}`;

  const show = (next: PostRedirectState): void => {
    setState(next);
    setCode(String(next.redirect?.header_code ?? 301));
    setDestination(next.redirect?.url_to ?? '');
    setEditing(false);
    setConfirming(false);
  };

  useEffect(() => {
    apiFetch<PostRedirectState>({ path })
      .then(show)
      .catch(() => setState(null));
  }, [path]);

  const send = async (method: 'POST' | 'DELETE'): Promise<void> => {
    setBusy(true);
    setMessage('');
    try {
      show(
        await apiFetch<PostRedirectState>({
          path,
          method,
          data:
            method === 'POST'
              ? { url_to: destination.trim(), header_code: Number(code) }
              : undefined,
        })
      );
    } catch (reason) {
      setMessage((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  if (!state) {
    return <></>;
  }

  const current = state.redirect;
  return (
    <div className="flex flex-col gap-2">
      <FieldHeader
        label="Redirect"
        tip="Visitors and search engines who open this page's address go to the destination instead, or get a 410 when the page is gone for good. The page stays in WordPress; the rule is kept with the others in SEO → Redirects."
      />
      {!current && !editing ? (
        <Button
          size="sm"
          variant="outline"
          className="self-start"
          onClick={() => setEditing(true)}
        >
          Redirect this page…
        </Button>
      ) : current && !editing ? (
        <div className="flex flex-col gap-2 rounded-md border border-border p-2.5 text-xs">
          <p>
            {state.path}{' '}
            {gone(String(current.header_code))
              ? `answers ${current.header_code}: the page is gone.`
              : `sends visitors to ${current.url_to} (${current.header_code}).`}
            {!current.active && ' The rule is switched off.'}
          </p>
          {confirming ? (
            <div className="flex flex-col gap-2">
              <p className="font-medium">
                {current.sources > 1
                  ? `Stop redirecting ${state.path}? Its address shows the page again; the rule keeps its other addresses.`
                  : `Remove the redirect? ${state.path} shows the page again, to visitors and search engines.`}
              </p>
              <div className="flex flex-wrap gap-2">
                <Button
                  size="sm"
                  variant="destructive"
                  disabled={busy}
                  onClick={() => void send('DELETE')}
                >
                  {current.sources > 1 ? 'Stop redirecting' : 'Remove it'}
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => setConfirming(false)}
                >
                  Keep it
                </Button>
              </div>
            </div>
          ) : (
            <div className="flex flex-wrap gap-2">
              <Button
                size="sm"
                variant="outline"
                onClick={() => setEditing(true)}
              >
                Change
              </Button>
              <Button
                size="sm"
                variant="ghost"
                disabled={busy}
                onClick={() => setConfirming(true)}
              >
                {current.sources > 1 ? 'Stop redirecting this page' : 'Remove'}
              </Button>
              {appUrl !== '' && (
                <a
                  href={`${appUrl}#/seo/redirects?search=${encodeURIComponent(state.path.replace(/^\/+|\/+$/g, ''))}`}
                  target="_blank"
                  rel="noreferrer"
                  className="self-center underline underline-offset-2"
                >
                  In Redirects
                </a>
              )}
            </div>
          )}
        </div>
      ) : (
        <div className="flex flex-col gap-2">
          <p className="text-xs break-all text-muted-foreground">
            From {state.path}
          </p>
          <Select
            items={CODES}
            value={code}
            onValueChange={next => setCode(String(next))}
          >
            <SelectTrigger className="w-full" aria-label="Redirect type">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {CODES.map(option => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {!gone(code) && (
            <Input
              placeholder="Where to: /new-page/ or https://…"
              value={destination}
              onChange={event => setDestination(event.target.value)}
            />
          )}
          <div className="flex flex-wrap gap-2">
            <Button
              size="sm"
              disabled={busy || (!gone(code) && destination.trim() === '')}
              onClick={() => void send('POST')}
            >
              {current ? 'Save the redirect' : 'Redirect this page'}
            </Button>
            <Button size="sm" variant="ghost" onClick={() => show(state)}>
              Cancel
            </Button>
          </div>
        </div>
      )}
      {message && <p className="text-xs text-destructive">{message}</p>}
    </div>
  );
};