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' | 'role' | 'delivery', string>>;

export function BookADemo() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [company, setCompany] = useState('');
  const [role, setRole] = useState('');
  const [delivery, setDelivery] = useState<string[]>([]);
  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 toggleDelivery = (value: string) => {
    setDelivery((prev) =>
    prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
    );
    setErrors((prev) => ({
      ...prev,
      delivery: 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 (!role) next.role = 'Please select your role.';
    if (delivery.length === 0)
    next.delivery = 'Select at least one delivery type.';
    setErrors(next);
    if (Object.keys(next).length > 0) return;
    setSubmitError(null);
    setStatus('submitting');
    try {
      await submitToFormspree({
        form: 'Book a demo',
        name: name.trim(),
        email: email.trim(),
        company: company.trim(),
        role,
        delivery: delivery.join(', '),
        message: message.trim() || undefined,
        _subject: 'intellectOne — Demo request',
        _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="Book a demo"
        title="Request received"
        description="We'll be in touch shortly to schedule your walkthrough.">
        
        <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 demo request is in. Our team will reach out to{' '}
            <span className="font-semibold text-brand-ink">{email}</span> within
            one business day to find a time.
          </p>
          <Link
            to="/"
            className="group mt-8 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 home
            <ArrowRightIcon
              size={16}
              className="transition-transform group-hover:translate-x-0.5"
              aria-hidden="true" />
            
          </Link>
        </motion.div>
      </FormPageLayout>);

  }
  return (
    <FormPageLayout
      eyebrow="Book a demo"
      title={
      <>
          See IntellectOne <span className="text-brand-bright">live</span>
        </>
      }
      description="A 30-minute walkthrough of online, in-person, and blended delivery — tailored to how you train.">
      
      <form onSubmit={handleSubmit} noValidate>
        <div className="space-y-5">
          <div className="grid gap-5 sm:grid-cols-2">
            <TextField
              id="demo-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="demo-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>
          <div className="grid gap-5 sm:grid-cols-2">
            <TextField
              id="demo-company"
              label="Company"
              value={company}
              onChange={(v) => {
                setCompany(v);
                setErrors((prev) => ({
                  ...prev,
                  company: undefined
                }));
              }}
              required
              error={errors.company}
              placeholder="Acme Industrial"
              autoComplete="organization" />
            
            <SelectField
              id="demo-role"
              label="I am a…"
              value={role}
              onChange={(v) => {
                setRole(v);
                setErrors((prev) => ({
                  ...prev,
                  role: undefined
                }));
              }}
              options={['Training Provider', 'Company / Employer', 'Other']}
              required
              error={errors.role} />
            
          </div>
          <CheckboxGroup
            legend="What do you deliver?"
            required
            error={errors.delivery}
            options={['Online', 'In-person', 'Blended']}
            selected={delivery}
            onToggle={toggleDelivery} />
          
          <TextAreaField
            id="demo-message"
            label="Anything specific you'd like to see? (optional)"
            value={message}
            onChange={setMessage}
            placeholder="e.g. QR exams, certificate seats, white-label setup…" />
          
        </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 my demo
              <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 arrange the demo.
        </p>
      </form>
    </FormPageLayout>);

}