import React, { useState } from 'react';
import { DFYType } from '../types';
import { ClayCard } from './ClayCard';
import { Button } from './Button';
import { ArrowLeft, Check } from 'lucide-react';

interface Props {
  type: DFYType;
  onBack: () => void;
  onComplete: () => void;
}

export const DFYForm: React.FC<Props> = ({ type, onBack, onComplete }) => {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Simulate API call
    setTimeout(() => {
        setSubmitted(true);
        setTimeout(() => {
            onComplete();
        }, 1500);
    }, 1000);
  };

  const renderFields = () => {
    if (type === 'SMS') {
      return (
        <>
          <input className="input-field" placeholder="Business Legal Name" required />
          <input className="input-field" placeholder="Business Address" required />
          <input className="input-field" placeholder="Website URL" required />
          <div className="grid grid-cols-2 gap-4">
             <input className="input-field" placeholder="Contact Email" required type="email" />
             <input className="input-field" placeholder="Contact Phone" required type="tel" />
          </div>
          <textarea className="input-field h-24" placeholder="Sample Message (Use Case)" required />
          <input className="input-field" placeholder="Est. Volume (msgs/day)" type="number" />
        </>
      );
    }
    if (type === 'EMAIL') {
      return (
        <>
          <input className="input-field" placeholder="Sending Domain (e.g. mail.company.com)" required />
          <select className="input-field">
             <option>I have access to DNS</option>
             <option>I need to find a technician</option>
          </select>
          <input className="input-field" placeholder="From Name (e.g. John Doe)" required />
          <input className="input-field" placeholder="Reply-To Email" required type="email" />
        </>
      );
    }
    return (
        <>
         <div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100 mb-4 text-sm text-indigo-800">
            This is a paid service ($199). You will be billed after intake.
         </div>
         <input className="input-field" placeholder="Target Lead Type & Region" required />
         <input className="input-field" placeholder="Main Offer / CTA" required />
         <textarea className="input-field h-24" placeholder="Brand Voice Description" />
         <textarea className="input-field h-24" placeholder="Exclusions (Past clients, DNC...)" />
        </>
    );
  };

  if (submitted) {
      return (
        <div className="max-w-md mx-auto py-20 px-4 text-center animate-fadeIn">
            <div className="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-green-600 shadow-inner">
                <Check size={40} />
            </div>
            <h2 className="text-2xl font-bold text-gray-800">Request Received!</h2>
            <p className="text-gray-500 mt-2">We will start setting this up for you.</p>
        </div>
      );
  }

  return (
    <div className="max-w-xl mx-auto py-10 px-4">
      <button onClick={onBack} className="flex items-center text-gray-500 hover:text-indigo-600 mb-6 transition-colors">
        <ArrowLeft size={18} className="mr-1" /> Back to Dashboard
      </button>

      <ClayCard>
        <div className="mb-6 border-b border-gray-100 pb-4">
            <h2 className="text-2xl font-bold text-gray-800">
                {type === 'SMS' && 'Done-For-You SMS Setup'}
                {type === 'EMAIL' && 'Done-For-You Email Setup'}
                {type === 'CAMPAIGN' && 'Campaign Setup Service'}
            </h2>
            <p className="text-gray-500 mt-1 text-sm">Fill out the details below and our team will handle the technical configuration.</p>
        </div>
        
        <form onSubmit={handleSubmit} className="space-y-4">
            {renderFields()}
            <Button type="submit" fullWidth className="mt-6">
                Submit Request
            </Button>
        </form>
      </ClayCard>
      
      {/* Quick style for inputs inside this component scope */}
      <style>{`
        .input-field {
            width: 100%;
            padding: 12px 16px;
            border-radius: 12px;
            background-color: #F9FAFB;
            border: 1px solid transparent;
            box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);
            outline: none;
            transition: all 0.2s;
        }
        .input-field:focus {
            background-color: #fff;
            box-shadow: 0 0 0 2px #6366f1;
        }
      `}</style>
    </div>
  );
};