import React, { useCallback } from 'react';
import { useRegistration } from '../../context/RegistrationContext';

// Business industry categories (from tbBusinessCategory)
const INDUSTRY_CATEGORIES = [
    { value: 'retail',        label: 'Retail & E-Commerce' },
    { value: 'technology',    label: 'Technology' },
    { value: 'healthcare',    label: 'Healthcare' },
    { value: 'finance',       label: 'Finance & Insurance' },
    { value: 'real_estate',   label: 'Real Estate' },
    { value: 'food_beverage', label: 'Restaurant & Food Service' },
    { value: 'professional',  label: 'Professional Services' },
    { value: 'home_services', label: 'Home Services' },
    { value: 'education',     label: 'Education' },
    { value: 'entertainment', label: 'Entertainment & Media' },
    { value: 'automotive',    label: 'Automotive' },
    { value: 'travel',        label: 'Travel & Hospitality' },
    { value: 'other',         label: 'Other' },
];

// Account type options — map to tbClientCategory (General/Franchisee/Franchisor)
const ACCOUNT_TYPES = [
    {
        value: 'General',
        icon: '🏢',
        label: 'Independent Business',
        description: 'A standalone business running its own advertising campaigns.',
    },
    {
        value: 'Franchisee',
        icon: '🏪',
        label: 'Franchisee',
        description: 'You operate one or more franchise locations under a brand.',
    },
    {
        value: 'Franchisor',
        icon: '🏗️',
        label: 'Franchisor / Brand',
        description: 'You manage advertising across a network of franchise locations.',
    },
];

export default function BusinessStep() {
    const { businessData, setBusinessData, saveBusiness, goBack, loading, error } = useRegistration();

    const handleChange = useCallback((e) => {
        const { name, value } = e.target;
        setBusinessData(prev => ({ ...prev, [name]: value }));
    }, [setBusinessData]);

    const handleAccountType = useCallback((value) => {
        setBusinessData(prev => ({ ...prev, clientCategory: value }));
    }, [setBusinessData]);

    const handleSubmit = useCallback((e) => {
        e.preventDefault();
        saveBusiness();
    }, [saveBusiness]);

    return (
        <div className="step-card">
            <div className="step-header">
                <span className="step-icon">🏢</span>
                <h2>Business Information</h2>
                <p className="step-description">
                    Tell us about your business so we can set up your advertising accounts.
                </p>
            </div>

            {error && <div className="error-message">{error}</div>}

            <form onSubmit={handleSubmit}>

                {/* ── Account Type ─────────────────────────────────── */}
                <div className="form-group">
                    <label>Account Type <span className="required">*</span></label>
                    <span className="form-help" style={{ display: 'block', marginBottom: '10px' }}>
                        How best describes your business structure?
                    </span>
                    <div className="account-type-list">
                        {ACCOUNT_TYPES.map(type => (
                            <button
                                key={type.value}
                                type="button"
                                className={`account-type-option${businessData.clientCategory === type.value ? ' selected' : ''}`}
                                onClick={() => handleAccountType(type.value)}
                            >
                                <span className="account-type-icon">{type.icon}</span>
                                <div className="account-type-text">
                                    <span className="account-type-label">{type.label}</span>
                                    <span className="account-type-desc">{type.description}</span>
                                </div>
                                <span className="account-type-check">
                                    {businessData.clientCategory === type.value ? '✓' : ''}
                                </span>
                            </button>
                        ))}
                    </div>
                </div>

                {/* ── Business Name ────────────────────────────────── */}
                <div className="form-group">
                    <label htmlFor="businessName">Business Name <span className="required">*</span></label>
                    <input
                        type="text"
                        id="businessName"
                        name="businessName"
                        value={businessData.businessName}
                        onChange={handleChange}
                        placeholder="Acme Corp"
                        required
                    />
                    <span className="form-help">This name will appear on your advertising accounts</span>
                </div>

                {/* ── Website ──────────────────────────────────────── */}
                <div className="form-group">
                    <label htmlFor="websiteUrl">Website</label>
                    <input
                        type="url"
                        id="websiteUrl"
                        name="websiteUrl"
                        value={businessData.websiteUrl}
                        onChange={handleChange}
                        placeholder="https://example.com"
                    />
                </div>

                {/* ── Industry ─────────────────────────────────────── */}
                <div className="form-group">
                    <label htmlFor="businessCategory">Industry / Category</label>
                    <select
                        id="businessCategory"
                        name="businessCategory"
                        value={businessData.businessCategory}
                        onChange={handleChange}
                    >
                        <option value="">Select a category...</option>
                        {INDUSTRY_CATEGORIES.map(cat => (
                            <option key={cat.value} value={cat.value}>{cat.label}</option>
                        ))}
                    </select>
                </div>

                {/* ── Description ──────────────────────────────────── */}
                <div className="form-group">
                    <label htmlFor="businessDescription">About Your Business</label>
                    <textarea
                        id="businessDescription"
                        name="businessDescription"
                        value={businessData.businessDescription}
                        onChange={handleChange}
                        rows={4}
                        placeholder="Tell us about your business, your advertising goals, and your target audience..."
                    />
                    <span className="form-help">
                        This helps our team understand your needs and set up the right campaigns
                    </span>
                </div>

                <div className="step-actions">
                    <button type="button" className="btn-secondary" onClick={goBack}>
                        ← Back
                    </button>
                    <button type="submit" className="btn-primary" disabled={loading}>
                        {loading ? 'Saving...' : 'Continue →'}
                    </button>
                </div>
            </form>
        </div>
    );
}
