import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { CheckCircleIcon, Loader2Icon, ArrowRightIcon } from 'lucide-react';
import { Link } from 'react-router-dom';
import { FormPageLayout } from '../components/FormPageLayout';
import {
  TextField,
  SelectField,
  TextAreaField,
  CheckboxGroup,
  validateEmail } from
'../components/FormElements';
import { submitToFormspree } from '../lib/formspree';

type Errors = Partial<
  Record<'name' | 'email' | 'company' | 'services' | 'engagement', string>>;

export function RequestCourseServices() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [company, setCompany] = useState('');
  const [services, setServices] = useState<string[]>([]);
  const [engagement, setEngagement] = useState('');
  const [message, setMessage] = useState('');
  const [errors, setErrors] = useState<Errors>({});
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success'>(
    'idle'
  );
  const [submitError, setSubmitError] = useState<string | null>(null);

  const toggleService = (value: string) => {
    setServices((prev) =>
    prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
    );
    setErrors((prev) => ({
      ...prev,
      services: undefined
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const next: Errors = {};
    if (!name.trim()) next.name = 'Please enter your name.';
    if (!email.trim()) next.email = 'Please enter your work email.';else
    if (!validateEmail(email))
    next.email = 'Please enter a valid email address.';
    if (!company.trim()) next.company = 'Please enter your company.';
    if (services.length === 0)
    next.services = 'Select at least one service.';
    if (!engagement) next.engagement = 'Please select a preference.';
    setErrors(next);
    if (Object.keys(next).length > 0) return;

    setSubmitError(null);
    setStatus('submitting');
    try {
      await submitToFormspree({
        form: 'Course services inquiry',
        name: name.trim(),
        email: email.trim(),
        company: company.trim(),
        services: services.join(', '),
        engagement,
        message: message.trim() || undefined,
        _subject: 'intellectOne — Course services inquiry',
        _replyto: email.trim(),
      });
      setStatus('success');
    } catch (err) {
      setStatus('idle');
      setSubmitError(
        err instanceof Error
          ? err.message
          : 'Something went wrong sending your request. Please try again.'
      );
    }
  };

  if (status === 'success') {
    return (
      <FormPageLayout
        eyebrow="Course & design services"
        title="Request received"
        description="We'll review your details and follow up about next steps.">
        
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.4 }}
          className="py-6 text-center"
          role="status">
          
          <span className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-brand-bright/15">
            <CheckCircleIcon
              size={32}
              className="text-brand-deep"
              aria-hidden="true" />
            
          </span>
          <h2 className="mt-6 font-display text-2xl font-bold text-brand-ink">
            Thanks, {name.split(' ')[0]}!
          </h2>
          <p className="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-brand-ink/65">
            Your course services inquiry is in. We'll reach out to{' '}
            <span className="font-semibold text-brand-ink">{email}</span> within
            one business day.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Link
              to="/course-services"
              className="inline-flex items-center gap-2 rounded-full bg-brand-ink px-7 py-3.5 font-display text-sm font-bold text-white transition-colors hover:bg-brand-deep">
              
              Back to services
            </Link>
            <Link
              to="/"
              className="inline-flex items-center gap-2 rounded-full border border-brand-ink/15 px-7 py-3.5 font-display text-sm font-semibold text-brand-ink transition-colors hover:border-brand-deep hover:text-brand-deep">
              
              Home
            </Link>
          </div>
        </motion.div>
      </FormPageLayout>);

  }

  return (
    <FormPageLayout
      eyebrow="Course & design services"
      title={
      <>
          Tell us what you{' '}
          <span className="text-brand-bright">need built</span>
        </>
      }
      description="Share a bit about your project. We'll follow up with how we can help — project or hourly.">
      
      <form onSubmit={handleSubmit} noValidate>
        <div className="space-y-5">
          <div className="grid gap-5 sm:grid-cols-2">
            <TextField
              id="services-name"
              label="Name"
              value={name}
              onChange={(v) => {
                setName(v);
                setErrors((prev) => ({
                  ...prev,
                  name: undefined
                }));
              }}
              required
              error={errors.name}
              placeholder="Jordan Tremblay"
              autoComplete="name" />
            
            <TextField
              id="services-email"
              label="Work email"
              type="email"
              value={email}
              onChange={(v) => {
                setEmail(v);
                setErrors((prev) => ({
                  ...prev,
                  email: undefined
                }));
              }}
              required
              error={errors.email}
              placeholder="jordan@company.com"
              autoComplete="email" />
            
          </div>
          <TextField
            id="services-company"
            label="Company"
            value={company}
            onChange={(v) => {
              setCompany(v);
              setErrors((prev) => ({
                ...prev,
                company: undefined
              }));
            }}
            required
            error={errors.company}
            placeholder="Acme Industrial"
            autoComplete="organization" />
          
          <CheckboxGroup
            legend="What do you need help with?"
            required
            error={errors.services}
            options={[
            'Course creation',
            'Design assistance',
            'Course authoring',
            'Platform setup']}
            selected={services}
            onToggle={toggleService} />
          
          <SelectField
            id="services-engagement"
            label="Preferred engagement"
            value={engagement}
            onChange={(v) => {
              setEngagement(v);
              setErrors((prev) => ({
                ...prev,
                engagement: undefined
              }));
            }}
            options={['Project rate', 'Hourly rate', 'Not sure yet']}
            required
            error={errors.engagement} />
          
          <TextAreaField
            id="services-message"
            label="Tell us about the project (optional)"
            value={message}
            onChange={setMessage}
            placeholder="Topics, timeline, existing materials, number of courses…" />
          
        </div>

        {submitError &&
        <p
          className="mt-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
          role="alert">
          
            {submitError}
          </p>
        }

        <button
          type="submit"
          disabled={status === 'submitting'}
          className="group mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full bg-brand-bright px-7 py-4 font-display text-sm font-bold text-brand-ink transition-colors hover:bg-brand-deep hover:text-white disabled:cursor-not-allowed disabled:opacity-70">
          
          {status === 'submitting' ?
          <>
              <Loader2Icon
              size={16}
              className="animate-spin"
              aria-hidden="true" />
            
              Sending request…
            </> :

          <>
              Request more information
              <ArrowRightIcon
              size={16}
              className="transition-transform group-hover:translate-x-0.5"
              aria-hidden="true" />
            
            </>
          }
        </button>
        <p className="mt-4 text-center text-xs text-brand-ink/45">
          Fields marked <span aria-hidden="true">*</span> are required. We'll
          only use your details to follow up on this inquiry.
        </p>
      </form>
    </FormPageLayout>);

}