smoothschedule/frontend/src/pages/AcceptInvitePage.tsx

import React, { useState, useEffect } from 'react';
import { useSearchParams, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  useInvitationDetails,
  useAcceptInvitation,
  useDeclineInvitation,
} from '../hooks/useInvitations';
import { useAuth } from '../hooks/useAuth';
import {
  Loader2,
  CheckCircle,
  XCircle,
  Building2,
  Mail,
  User,
  Lock,
  AlertCircle,
  Eye,
  EyeOff,
} from 'lucide-react';

const AcceptInvitePage: React.FC = () => {
  const { t } = useTranslation();
  const [searchParams] = useSearchParams();
  const { token: pathToken } = useParams<{ token: string }>();
  const navigate = useNavigate();
  // Support both path parameter (/accept-invite/:token) and query parameter (?token=...)
  const token = pathToken || searchParams.get('token');

  const { data: invitation, isLoading, error } = useInvitationDetails(token);
  const acceptInvitationMutation = useAcceptInvitation();
  const declineInvitationMutation = useDeclineInvitation();
  const { setTokens } = useAuth();

  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [formError, setFormError] = useState('');
  const [accepted, setAccepted] = useState(false);
  const [declined, setDeclined] = useState(false);

  const handleAccept = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormError('');

    // Validate
    if (!firstName.trim()) {
      setFormError(t('acceptInvite.firstNameRequired', 'First name is required'));
      return;
    }

    if (!password || password.length < 8) {
      setFormError(t('acceptInvite.passwordMinLength', 'Password must be at least 8 characters'));
      return;
    }

    if (password !== confirmPassword) {
      setFormError(t('acceptInvite.passwordsMustMatch', 'Passwords do not match'));
      return;
    }

    try {
      const result = await acceptInvitationMutation.mutateAsync({
        token: token!,
        firstName: firstName.trim(),
        lastName: lastName.trim(),
        password,
        invitationType: invitation?.invitation_type,
      });

      // Set auth tokens and redirect to dashboard
      setTokens(result.access, result.refresh);
      setAccepted(true);

      // Redirect after a short delay
      setTimeout(() => {
        navigate('/');
      }, 2000);
    } catch (err: any) {
      setFormError(err.response?.data?.error || t('acceptInvite.acceptFailed', 'Failed to accept invitation'));
    }
  };

  const handleDecline = async () => {
    if (!confirm(t('acceptInvite.confirmDecline', 'Are you sure you want to decline this invitation?'))) {
      return;
    }

    try {
      await declineInvitationMutation.mutateAsync({ token: token!, invitationType: invitation?.invitation_type });
      setDeclined(true);
    } catch (err: any) {
      setFormError(err.response?.data?.error || t('acceptInvite.declineFailed', 'Failed to decline invitation'));
    }
  };

  // No token provided
  if (!token) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
        <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
          <XCircle size={48} className="mx-auto text-red-500 mb-4" />
          <h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
            {t('acceptInvite.invalidLink', 'Invalid Invitation Link')}
          </h1>
          <p className="text-gray-500 dark:text-gray-400">
            {t('acceptInvite.noToken', 'This invitation link is invalid. Please check your email for the correct link.')}
          </p>
        </div>
      </div>
    );
  }

  // Loading state
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <Loader2 size={48} className="mx-auto text-brand-600 animate-spin mb-4" />
          <p className="text-gray-500 dark:text-gray-400">
            {t('acceptInvite.loading', 'Loading invitation...')}
          </p>
        </div>
      </div>
    );
  }

  // Error state (invalid/expired token)
  if (error || !invitation) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
        <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
          <AlertCircle size={48} className="mx-auto text-amber-500 mb-4" />
          <h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
            {t('acceptInvite.expiredTitle', 'Invitation Expired or Invalid')}
          </h1>
          <p className="text-gray-500 dark:text-gray-400">
            {t(
              'acceptInvite.expiredDescription',
              'This invitation has expired or is no longer valid. Please contact the person who sent the invitation to request a new one.'
            )}
          </p>
        </div>
      </div>
    );
  }

  // Accepted state
  if (accepted) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
        <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
          <CheckCircle size={48} className="mx-auto text-green-500 mb-4" />
          <h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
            {t('acceptInvite.welcomeTitle', 'Welcome to the Team!')}
          </h1>
          <p className="text-gray-500 dark:text-gray-400">
            {t('acceptInvite.redirecting', 'Your account has been created. Redirecting to dashboard...')}
          </p>
          <Loader2 size={24} className="mx-auto text-brand-600 animate-spin mt-4" />
        </div>
      </div>
    );
  }

  // Declined state
  if (declined) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
        <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
          <XCircle size={48} className="mx-auto text-gray-400 mb-4" />
          <h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
            {t('acceptInvite.declinedTitle', 'Invitation Declined')}
          </h1>
          <p className="text-gray-500 dark:text-gray-400">
            {t('acceptInvite.declinedDescription', "You've declined this invitation. You can close this page.")}
          </p>
        </div>
      </div>
    );
  }

  // Main acceptance form
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
      <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
        {/* Header */}
        <div className="bg-brand-600 p-6 text-center">
          <h1 className="text-2xl font-bold text-white mb-2">
            {t('acceptInvite.title', "You're Invited!")}
          </h1>
          <p className="text-brand-100">
            {t('acceptInvite.subtitle', 'Join the team and start scheduling')}
          </p>
        </div>

        {/* Invitation Details */}
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="space-y-3">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-lg bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center text-brand-600 dark:text-brand-400">
                <Building2 size={20} />
              </div>
              <div>
                <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                  {t('acceptInvite.business', 'Business')}
                </p>
                <p className="font-semibold text-gray-900 dark:text-white">{invitation.business_name}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400">
                <Mail size={20} />
              </div>
              <div>
                <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                  {t('acceptInvite.invitedAs', 'Invited As')}
                </p>
                <p className="font-semibold text-gray-900 dark:text-white">
                  {invitation.role_display} &bull;{' '}
                  <span className="font-normal text-gray-600 dark:text-gray-400">{invitation.email}</span>
                </p>
              </div>
            </div>

            {invitation.invited_by && (
              <p className="text-sm text-gray-500 dark:text-gray-400 text-center pt-2">
                {t('acceptInvite.invitedBy', 'Invited by')} <span className="font-medium">{invitation.invited_by}</span>
              </p>
            )}
          </div>
        </div>

        {/* Form */}
        <form onSubmit={handleAccept} className="p-6 space-y-4">
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            {t('acceptInvite.formDescription', 'Create your account to accept this invitation.')}
          </p>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                {t('acceptInvite.firstName', 'First Name')} *
              </label>
              <div className="relative">
                <User size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                <input
                  type="text"
                  value={firstName}
                  onChange={(e) => setFirstName(e.target.value)}
                  required
                  className="w-full pl-10 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                  placeholder="John"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                {t('acceptInvite.lastName', 'Last Name')}
              </label>
              <input
                type="text"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                placeholder="Doe"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              {t('acceptInvite.password', 'Password')} *
            </label>
            <div className="relative">
              <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <input
                type={showPassword ? 'text' : 'password'}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                minLength={8}
                className="w-full pl-10 pr-10 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                placeholder="Min. 8 characters"
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
              >
                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
              </button>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              {t('acceptInvite.confirmPassword', 'Confirm Password')} *
            </label>
            <div className="relative">
              <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <input
                type={showPassword ? 'text' : 'password'}
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
                className="w-full pl-10 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                placeholder="Repeat password"
              />
            </div>
          </div>

          {/* Error Message */}
          {formError && (
            <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
              <p className="text-sm text-red-600 dark:text-red-400">{formError}</p>
            </div>
          )}

          {/* Buttons */}
          <div className="flex flex-col gap-3 pt-4">
            <button
              type="submit"
              disabled={acceptInvitationMutation.isPending}
              className="w-full px-4 py-3 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {acceptInvitationMutation.isPending ? (
                <Loader2 size={18} className="animate-spin" />
              ) : (
                <CheckCircle size={18} />
              )}
              {t('acceptInvite.acceptButton', 'Accept Invitation & Create Account')}
            </button>

            <button
              type="button"
              onClick={handleDecline}
              disabled={declineInvitationMutation.isPending}
              className="w-full px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
            >
              {t('acceptInvite.declineButton', 'Decline Invitation')}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default AcceptInvitePage;