import React, { useEffect, useRef, useState } from 'react';

import { DEFAULT_INVITE_MESSAGE } from '../../lib/onboarding-chain/content';
import { isValidEmail } from '../../utils/validators';
import { GRADIENT, MONO } from '../signup-mirror/theme';

import { ModalShell } from './modal-shell';

const FIELD_LABEL = `block ${MONO} text-[10px] tracking-[0.14em] uppercase text-[#8c9196] mb-1.5`;

const FIELD =
  'w-full p-[12px_13px] rounded-[10px] bg-white border border-[#e1e3e5] text-[#202223] text-[14px] outline-none transition focus:border-[#C8175D] focus:shadow-[0_0_0_3px_rgba(200,23,93,0.15)]';

export function InviteModal({
  onSend,
  onClose,
  onDone,
  sending,
  sent,
  sentTo,
}: {
  onSend: (email: string, message: string) => void;
  onClose: () => void;
  onDone: () => void;
  sending: boolean;
  sent: boolean;
  sentTo: string;
}): JSX.Element {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState(DEFAULT_INVITE_MESSAGE);
  const [error, setError] = useState(false);
  const [copied, setCopied] = useState(false);
  const emailRef = useRef<HTMLInputElement | null>(null);
  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    if (!sent) emailRef.current?.focus();
  }, [sent]);

  useEffect(
    () => () => {
      if (copyTimer.current) clearTimeout(copyTimer.current);
    },
    []
  );

  const send = (): void => {
    if (sending) return;
    if (!isValidEmail(email)) {
      setError(true);
      emailRef.current?.focus();

      return;
    }
    setError(false);
    onSend(email.trim(), message);
  };

  const copyMessage = (): void => {
    const done = (): void => {
      setCopied(true);
      if (copyTimer.current) clearTimeout(copyTimer.current);
      copyTimer.current = setTimeout(() => setCopied(false), 1600);
    };
    navigator.clipboard?.writeText(message).then(done).catch(done);
  };

  return (
    <ModalShell
      label="Invite your agency or expert"
      maxWidth={680}
      onClose={onClose}
    >
      {sent ? (
        <div className="flex flex-col items-center text-center gap-[13px] p-[16px_6px_6px]">
          <span
            data-rcm-anim
            style={{
              animation: 'rcm-pop .45s cubic-bezier(.34,1.4,.5,1) both',
            }}
            className="inline-flex items-center justify-center w-[52px] h-[52px] rounded-full bg-[rgba(34,197,94,0.12)] border border-[rgba(34,197,94,0.35)] text-[#16a34a]"
          >
            <svg
              width="26"
              height="26"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <path d="M20 6 9 17l-5-5" />
            </svg>
          </span>
          <h3 className="text-[20px] font-bold tracking-[-0.015em] text-[#202223]">
            Invitation sent
          </h3>
          <p className="max-w-[380px] text-[13.5px] leading-[1.55] text-[#6d7175]">
            We&apos;ve emailed{' '}
            <strong className="text-[#202223] font-semibold">{sentTo}</strong>{' '}
            and cc&apos;d our partner team so we can help them get set up.
          </p>
          <button
            type="button"
            onClick={onDone}
            className={`mt-1.5 inline-flex items-center justify-center w-full max-w-[280px] p-[13px_20px] rounded-[11px] border-none cursor-pointer ${GRADIENT} text-white text-[15px] font-semibold tracking-[-0.01em] shadow-[0_4px_16px_rgba(200,23,93,0.2)] transition hover:brightness-110 hover:-translate-y-px`}
          >
            Done
          </button>
        </div>
      ) : (
        <>
          <div className="pr-[34px]">
            <h3 className="text-[20px] font-bold tracking-[-0.015em] text-[#202223] mb-1.5">
              Invite your agency or expert
            </h3>
            <p className="text-[13.5px] leading-[1.5] text-[#6d7175]">
              We&apos;ll email them everything they need to run your setup. When
              they take care of it, 10,000 extra credits land on your trial.
            </p>
          </div>

          <label htmlFor="rcm-agency-email" className={`${FIELD_LABEL} mt-5`}>
            Their email
          </label>
          <input
            ref={emailRef}
            id="rcm-agency-email"
            type="email"
            inputMode="email"
            autoComplete="email"
            placeholder="name@youragency.com"
            value={email}
            aria-invalid={error}
            onChange={event => {
              setEmail(event.target.value);
              if (error) setError(false);
            }}
            onKeyDown={event => {
              if (event.key === 'Enter') {
                event.preventDefault();
                send();
              }
            }}
            className={FIELD}
          />
          {error && (
            <span
              role="alert"
              className="inline-flex items-center gap-1.5 mt-[7px] text-[12px] text-[#d72c0d]"
            >
              <svg
                width="13"
                height="13"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 8v4" />
                <path d="M12 16h.01" />
              </svg>
              Enter a valid email
            </span>
          )}

          <label htmlFor="rcm-agency-msg" className={`${FIELD_LABEL} mt-4`}>
            The message (edit anything you like)
          </label>
          <textarea
            id="rcm-agency-msg"
            rows={13}
            value={message}
            onChange={event => setMessage(event.target.value)}
            className={`${FIELD} resize-y min-h-[340px] text-[12.5px] leading-[1.55] text-[#454749]`}
          />

          <div className="flex flex-wrap items-center gap-3.5 mt-[18px]">
            <button
              type="button"
              onClick={send}
              disabled={sending}
              className={`inline-flex items-center gap-[9px] p-[13px_22px] rounded-[11px] border-none cursor-pointer ${GRADIENT} text-white text-[14.5px] font-semibold tracking-[-0.01em] shadow-[0_4px_16px_rgba(200,23,93,0.2)] transition hover:brightness-110 hover:-translate-y-px disabled:opacity-60`}
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="m22 2-7 20-4-9-9-4Z" />
                <path d="M22 2 11 13" />
              </svg>
              {sending ? 'Sending…' : 'Send invitation →'}
            </button>
            <button
              type="button"
              onClick={copyMessage}
              className="bg-transparent border-none p-[6px_2px] cursor-pointer text-[12.5px] text-[#6d7175] underline underline-offset-[3px] decoration-[#c9cccf] transition-colors hover:text-[#C8175D]"
            >
              {copied ? 'Copied ✓' : 'or copy the message instead'}
            </button>
          </div>
          <p className="text-[11.5px] text-[#8c9196] mt-[13px] leading-[1.5]">
            A copy goes to Recomaze&apos;s partner team so we can help your
            agency get set up quickly.
          </p>
        </>
      )}
    </ModalShell>
  );
}