import { useState } from 'preact/hooks';
import { submitLead } from './api';

export const Contact = () => {
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [interest, setInterest] = useState('');
    const [message, setMessage] = useState('');
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState('');

    const handleSubmit = async () => {
        if (!name.trim() || !phone.trim()) return;
        setLoading(true);
        setError('');
        try {
            await submitLead({
                name: name.trim(),
                phone: phone.trim(),
                interest: interest.trim() || undefined,
                message: message.trim() || undefined,
                captchaToken: 'dev-bypass',
            });
            setSuccess(true);
        } catch {
            setError('Submission failed. Please try again.');
        } finally {
            setLoading(false);
        }
    };

    if (success) {
        return (
            <div class="widget-success">
                <div class="widget-success-icon">🙏</div>
                <div class="widget-success-title">Thank you!</div>
                <div class="widget-success-text">
                    An agent will call you shortly on {phone}.<br />
                    We typically respond within 30 minutes during business hours.
                </div>
            </div>
        );
    }

    return (
        <div>
            <div style={{ fontSize: '13px', fontWeight: 600, color: '#1f2937', marginBottom: '12px' }}>
                Get in touch
            </div>
            <div style={{ fontSize: '12px', color: '#6b7280', marginBottom: '16px' }}>
                Leave your details and we'll call you back.
            </div>

            {error && <div style={{ color: '#dc2626', fontSize: '12px', marginBottom: '8px' }}>{error}</div>}

            <div class="widget-field">
                <label class="widget-label">Full Name *</label>
                <input class="widget-input" placeholder="Your name" value={name} onInput={(e: any) => setName(e.target.value)} />
            </div>
            <div class="widget-field">
                <label class="widget-label">Phone Number *</label>
                <input class="widget-input" placeholder="+91 9876543210" value={phone} onInput={(e: any) => setPhone(e.target.value)} />
            </div>
            <div class="widget-field">
                <label class="widget-label">Interested In</label>
                <select class="widget-select" value={interest} onChange={(e: any) => setInterest(e.target.value)}>
                    <option value="">Select (optional)</option>
                    <option value="Consultation">General Consultation</option>
                    <option value="Health Checkup">Health Checkup</option>
                    <option value="Surgery">Surgery</option>
                    <option value="Second Opinion">Second Opinion</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            <div class="widget-field">
                <label class="widget-label">Message</label>
                <textarea class="widget-input widget-textarea" placeholder="How can we help? (optional)" value={message} onInput={(e: any) => setMessage(e.target.value)} />
            </div>
            <button class="widget-btn" disabled={!name.trim() || !phone.trim() || loading} onClick={handleSubmit}>
                {loading ? 'Sending...' : 'Send Message'}
            </button>
        </div>
    );
};