'use client';

import { useCallback, useEffect, useState } from 'react';
import { api } from '@/lib/api';

/**
 * Public unsubscribe confirmation page (linked from the footer of candidate
 * emails). The URL carries only an opaque signed token — never an email or id.
 *
 * The token is validated server-side on load (GET, which changes nothing, so
 * email clients that pre-fetch links can't unsubscribe anyone), and the opt-out
 * is only recorded after the candidate explicitly confirms (POST).
 */
type State =
  | { phase: 'loading' }
  | { phase: 'invalid'; message: string }
  | { phase: 'confirm'; masked: string; already: boolean }
  | { phase: 'done'; masked: string }
  | { phase: 'cancelled'; masked: string };

export default function UnsubscribePage() {
  const [state, setState] = useState<State>({ phase: 'loading' });
  const [submitting, setSubmitting] = useState(false);
  const [token, setToken] = useState('');

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const t = params.get('token') || '';
    setToken(t);
    if (!t) {
      setState({ phase: 'invalid', message: 'This unsubscribe link is missing its token.' });
      return;
    }
    api.get(`/candidates/unsubscribe/?token=${encodeURIComponent(t)}`)
      .then((res: unknown) => {
        const d = (res as { data?: { masked_email?: string; already_unsubscribed?: boolean } })?.data;
        setState({
          phase: 'confirm',
          masked: d?.masked_email || 'your email address',
          already: Boolean(d?.already_unsubscribed),
        });
      })
      .catch((err: { data?: { message?: string }; message?: string }) => {
        setState({
          phase: 'invalid',
          message: err?.data?.message || err?.message || 'This unsubscribe link is invalid or has expired.',
        });
      });
  }, []);

  const confirm = useCallback(() => {
    if (!token || state.phase !== 'confirm') return;
    setSubmitting(true);
    const masked = state.masked;
    api.post('/candidates/unsubscribe/', { token })
      .then(() => setState({ phase: 'done', masked }))
      .catch((err: { data?: { message?: string }; message?: string }) =>
        setState({
          phase: 'invalid',
          message: err?.data?.message || err?.message || 'We could not process your request.',
        }))
      .finally(() => setSubmitting(false));
  }, [token, state]);

  return (
    <main className="min-h-screen bg-[#f3f3f9] dark:bg-slate-950 flex items-center justify-center p-4">
      <div className="w-full max-w-md bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm">
        {/* Branding header — matches the app's palette */}
        <div className="px-6 py-5 bg-[#405189] text-center">
          <p className="text-lg font-bold tracking-widest uppercase text-white">TA-ATS</p>
          <p className="text-[11px] text-indigo-200 mt-0.5">Email preferences</p>
        </div>

        <div className="p-6 text-center">
          {state.phase === 'loading' && (
            <>
              <i className="fa-solid fa-spinner fa-spin text-2xl text-[#405189]" />
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-3">Checking your link…</p>
            </>
          )}

          {state.phase === 'invalid' && (
            <>
              <span className="w-12 h-12 mx-auto mb-3 rounded-full bg-rose-500/10 text-rose-600 flex items-center justify-center">
                <i className="fa-solid fa-triangle-exclamation text-xl" />
              </span>
              <h1 className="text-base font-bold text-slate-900 dark:text-white">Link not valid</h1>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">{state.message}</p>
              <p className="text-xs text-slate-400 dark:text-slate-500 mt-4">
                Please use the Unsubscribe link from your most recent email.
              </p>
            </>
          )}

          {state.phase === 'confirm' && (
            <>
              <span className="w-12 h-12 mx-auto mb-3 rounded-full bg-amber-500/10 text-amber-600 flex items-center justify-center">
                <i className="fa-solid fa-envelope-circle-check text-xl" />
              </span>
              <h1 className="text-base font-bold text-slate-900 dark:text-white">
                Are you sure you want to unsubscribe from future recruitment emails?
              </h1>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">
                This applies to <span className="font-semibold text-slate-700 dark:text-slate-200">{state.masked}</span>.
              </p>
              {state.already && (
                <p className="text-xs font-semibold text-emerald-600 dark:text-emerald-400 mt-3">
                  <i className="fa-solid fa-circle-check mr-1" />
                  This address is already unsubscribed.
                </p>
              )}
              <div className="flex gap-2 justify-center mt-6">
                <button
                  onClick={() => setState({ phase: 'cancelled', masked: state.masked })}
                  disabled={submitting}
                  className="px-5 py-2.5 text-sm font-semibold bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700 transition cursor-pointer disabled:opacity-50"
                >
                  Cancel
                </button>
                <button
                  onClick={confirm}
                  disabled={submitting}
                  className="px-5 py-2.5 text-sm font-semibold bg-[#405189] hover:bg-[#364574] text-white transition cursor-pointer disabled:opacity-50 inline-flex items-center gap-2"
                >
                  {submitting && <i className="fa-solid fa-spinner fa-spin text-xs" />}
                  Unsubscribe
                </button>
              </div>
            </>
          )}

          {state.phase === 'done' && (
            <>
              <span className="w-12 h-12 mx-auto mb-3 rounded-full bg-emerald-500/10 text-emerald-600 flex items-center justify-center">
                <i className="fa-solid fa-circle-check text-xl" />
              </span>
              <h1 className="text-base font-bold text-slate-900 dark:text-white">
                You have successfully unsubscribed from future recruitment emails.
              </h1>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">
                We will no longer send recruitment emails to{' '}
                <span className="font-semibold text-slate-700 dark:text-slate-200">{state.masked}</span>.
              </p>
            </>
          )}

          {state.phase === 'cancelled' && (
            <>
              <span className="w-12 h-12 mx-auto mb-3 rounded-full bg-[#405189]/10 text-[#405189] flex items-center justify-center">
                <i className="fa-solid fa-envelope text-xl" />
              </span>
              <h1 className="text-base font-bold text-slate-900 dark:text-white">No changes made</h1>
              <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">
                You are still subscribed to recruitment emails. You can close this page.
              </p>
            </>
          )}
        </div>

        <div className="px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
          <p className="text-[11px] text-slate-400 dark:text-slate-500">
            You received this because you applied through TA-ATS.
          </p>
        </div>
      </div>
    </main>
  );
}