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,
  validateEmail } from
'../components/FormElements';
import { submitToFormspree } from '../lib/formspree';
type Errors = Partial<
  Record<'name' | 'email' | 'company' | 'focus' | 'learners', string>>;

const learnerRanges = [
'Under 500',
'500 – 2,000',
'2,000 – 10,000',
'10,000 – 50,000',
'50,000+'];

export function BecomeAProvider() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [company, setCompany] = useState('');
  const [focus, setFocus] = useState('');
  const [learners, setLearners] = 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 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 or organization.';
    if (!focus.trim()) next.focus = 'Please describe your training focus.';
    if (!learners) next.learners = 'Please select an approximate range.';
    setErrors(next);
    if (Object.keys(next).length > 0) return;
    setSubmitError(null);
    setStatus('submitting');
    try {
      await submitToFormspree({
        form: 'Become a provider',
        name: name.trim(),
        email: email.trim(),
        company: company.trim(),
        focus: focus.trim(),
        learners,
        message: message.trim() || undefined,
        _subject: 'intellectOne — Provider application',
        _replyto: email.trim(),
      });
      setStatus('success');
    } catch (err) {
      setStatus('idle');
      setSubmitError(
        err instanceof Error
          ? err.message
          : 'Something went wrong sending your application. Please try again.'
      );
    }
  };
  if (status === 'success') {
    return (
      <FormPageLayout
        eyebrow="Become a provider"
        title="Application received"
        description="We'll review your details and get back to you 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">
            We've received your provider application. Our team will reach out to{' '}
            <span className="font-semibold text-brand-ink">{email}</span> to
            talk branding, catalog, and onboarding.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Link
              to="/pricing"
              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">
              
              Review provider pricing
            </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">
              
              Back to home
            </Link>
          </div>
        </motion.div>
      </FormPageLayout>);

  }
  return (
    <FormPageLayout
      eyebrow="Become a provider"
      title={
      <>
          Your training. <span className="text-brand-bright">Your brand.</span>
        </>
      }
      description="Tell us about your training business and we'll set up your white-label portal, catalog, and onboarding.">
      
      <form onSubmit={handleSubmit} noValidate>
        <div className="space-y-5">
          <div className="grid gap-5 sm:grid-cols-2">
            <TextField
              id="provider-name"
              label="Name"
              value={name}
              onChange={(v) => {
                setName(v);
                setErrors((prev) => ({
                  ...prev,
                  name: undefined
                }));
              }}
              required
              error={errors.name}
              placeholder="Sam Okafor"
              autoComplete="name" />
            
            <TextField
              id="provider-email"
              label="Work email"
              type="email"
              value={email}
              onChange={(v) => {
                setEmail(v);
                setErrors((prev) => ({
                  ...prev,
                  email: undefined
                }));
              }}
              required
              error={errors.email}
              placeholder="sam@apexsafety.com"
              autoComplete="email" />
            
          </div>
          <TextField
            id="provider-company"
            label="Company / organization"
            value={company}
            onChange={(v) => {
              setCompany(v);
              setErrors((prev) => ({
                ...prev,
                company: undefined
              }));
            }}
            required
            error={errors.company}
            placeholder="Apex Safety Training"
            autoComplete="organization" />
          
          <div className="grid gap-5 sm:grid-cols-2">
            <TextField
              id="provider-focus"
              label="Training focus"
              value={focus}
              onChange={(v) => {
                setFocus(v);
                setErrors((prev) => ({
                  ...prev,
                  focus: undefined
                }));
              }}
              required
              error={errors.focus}
              placeholder="e.g. safety, workforce, trades" />
            
            <SelectField
              id="provider-learners"
              label="Learners per year (approx.)"
              value={learners}
              onChange={(v) => {
                setLearners(v);
                setErrors((prev) => ({
                  ...prev,
                  learners: undefined
                }));
              }}
              options={learnerRanges}
              required
              error={errors.learners} />
            
          </div>
          <TextAreaField
            id="provider-message"
            label="Tell us more (optional)"
            value={message}
            onChange={setMessage}
            placeholder="Your current tools, in-person locations, course catalog size…" />
          
        </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 application…
            </> :

          <>
              Apply to become a provider
              <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. Platform
          fee is $150/month — see{' '}
          <Link
            to="/pricing"
            className="font-semibold text-brand-deep hover:underline">
            
            pricing
          </Link>{' '}
          for revenue share details.
        </p>
      </form>
    </FormPageLayout>);

}