import { useState } from 'react';
import { useNavigate, Navigate } from 'react-router-dom';
import { BookOpen, ArrowRight, LogOut } from 'lucide-react';
import { useApp } from '../store/AppContext';
import Card from '../components/ui/Card';
import Button from '../components/ui/Button';

const Onboarding = () => {
  const { state, enrollCurrentUser, logout } = useApp();
  const navigate = useNavigate();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  if (state.isLoading) return <div className="p-8">Loading...</div>;
  if (!state.currentUser) return <Navigate to="/login" replace />;
  if (state.currentUser.enrollment_status === 'active') {
    return <Navigate to="/" replace />;
  }

  const handleStart = async () => {
    setBusy(true);
    setError('');
    try {
      await enrollCurrentUser();
      navigate('/', { replace: true });
    } catch (e) {
      setError(e.message || 'Could not start the curriculum. Please try again.');
      setBusy(false);
    }
  };

  return (
    <div className="min-h-screen bg-bg flex items-center justify-center p-4">
      <div className="w-full max-w-lg">
        <div className="text-center mb-8">
          <img src="/images/icon.png" alt="Respellion Icon" className="h-20 mx-auto mb-4" />
          <h1 className="text-3xl text-teal font-bold tracking-tight">Welcome, {state.currentUser.name}</h1>
        </div>

        <Card className="border border-bg-warm">
          <div className="text-center py-2">
            <BookOpen size={48} className="mx-auto text-teal mb-4" />
            <h2 className="text-2xl font-bold mb-3">Start your learning journey</h2>
            <p className="text-fg-muted mb-2">
              The curriculum is a 26-week cycle of weekly learning sessions and tests.
            </p>
            <p className="text-fg-muted mb-6">
              When you click <strong>Start</strong>, week 1 begins today. You can pick this up at any moment — the cycle is yours.
            </p>

            {error && (
              <div className="text-red-500 text-sm font-medium mb-4">{error}</div>
            )}

            <Button onClick={handleStart} disabled={busy} className="text-lg px-8 py-3">
              {busy ? 'Starting...' : <>Start my journey <ArrowRight size={20} className="ml-2" /></>}
            </Button>

            <div className="mt-6">
              <button
                onClick={logout}
                className="text-xs text-fg-muted hover:text-fg inline-flex items-center gap-1"
              >
                <LogOut size={12} /> Sign out
              </button>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Onboarding;
