const AccountForm = ({ onSubmit, onCancel, initial = {} }) => {
    const [form, setForm]   = React.useState({
        name: '', type: 'organization', main_email: '', main_phone: '',
        notes: '', reference_only: false, callback_date: '', ...initial
    });
    const [error, setError] = React.useState('');
    const [saving, setSaving] = React.useState(false);

    const set = (key) => (e) => setForm(p => ({ ...p, [key]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSaving(true); setError('');
        try { await onSubmit(form); }
        catch (err) { setError(err.message); setSaving(false); }
    };

    return (
        <form onSubmit={handleSubmit}>
            {error && <div className="api-error"><i className="fas fa-exclamation-circle"></i> {error}</div>}
            <div className="form-grid">
                <div className="form-group">
                    <label className="form-label">Account Name *</label>
                    <input type="text" className="form-input" value={form.name} onChange={set('name')} required />
                </div>
                <div className="form-group">
                    <label className="form-label">Type</label>
                    <select className="form-input" value={form.type} onChange={set('type')}>
                        <option value="personal">Personal</option>
                        <option value="organization">Organization</option>
                        <option value="business">Business</option>
                    </select>
                </div>
                <div className="form-group">
                    <label className="form-label">Email</label>
                    <input type="email" className="form-input" value={form.main_email} onChange={set('main_email')} />
                </div>
                <div className="form-group">
                    <label className="form-label">Phone</label>
                    <input type="tel" className="form-input" value={form.main_phone} onChange={set('main_phone')} />
                </div>
                <div className="form-group">
                    <label className="form-label">Next Follow-up</label>
                    <input type="date" className="form-input" value={form.callback_date || ''} onChange={set('callback_date')} />
                </div>
                <div className="form-group" style={{ justifyContent: 'flex-end' }}>
                    <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', marginTop: '1.5rem' }}>
                        <input type="checkbox" checked={form.reference_only} onChange={set('reference_only')} />
                        Reference Only
                    </label>
                </div>
                <div className="form-group full-width">
                    <label className="form-label">Notes</label>
                    <textarea className="form-input form-textarea" value={form.notes || ''} onChange={set('notes')} />
                </div>
            </div>
            <div className="btn-group">
                <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={saving}>Cancel</button>
                <button type="submit" className="btn btn-primary" disabled={saving}>
                    {saving ? <><i className="fas fa-spinner fa-spin"></i> Saving…</> : <><i className="fas fa-check"></i> {initial.id ? 'Save Changes' : 'Create Account'}</>}
                </button>
            </div>
        </form>
    );
};

const TaskForm = ({ accounts, onSubmit, onCancel, defaultAccountId }) => {
    const [form, setForm]   = React.useState({ title: '', account_id: defaultAccountId || accounts[0]?.id || '', due_date: '', priority: 'normal', task_type: 'follow_up', notes: '' });
    const [error, setError] = React.useState('');
    const [saving, setSaving] = React.useState(false);
    const set = (key) => (e) => setForm(p => ({ ...p, [key]: e.target.value }));

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSaving(true); setError('');
        try { await onSubmit({ ...form, account_id: parseInt(form.account_id) }); }
        catch (err) { setError(err.message); setSaving(false); }
    };

    return (
        <form onSubmit={handleSubmit}>
            {error && <div className="api-error">{error}</div>}
            <div className="form-grid">
                <div className="form-group full-width">
                    <label className="form-label">Title *</label>
                    <input type="text" className="form-input" value={form.title} onChange={set('title')} required />
                </div>
                <div className="form-group">
                    <label className="form-label">Account *</label>
                    <select className="form-input" value={form.account_id} onChange={set('account_id')} required>
                        {accounts.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                    </select>
                </div>
                <div className="form-group">
                    <label className="form-label">Due Date *</label>
                    <input type="date" className="form-input" value={form.due_date} onChange={set('due_date')} required />
                </div>
                <div className="form-group">
                    <label className="form-label">Priority</label>
                    <select className="form-input" value={form.priority} onChange={set('priority')}>
                        <option value="low">Low</option>
                        <option value="normal">Normal</option>
                        <option value="high">High</option>
                        <option value="urgent">Urgent</option>
                    </select>
                </div>
                <div className="form-group">
                    <label className="form-label">Type</label>
                    <select className="form-input" value={form.task_type} onChange={set('task_type')}>
                        <option value="follow_up">Follow Up</option>
                        <option value="check_in">Check In</option>
                        <option value="appointment">Appointment</option>
                        <option value="reminder">Reminder</option>
                        <option value="call">Call</option>
                        <option value="email">Email</option>
                    </select>
                </div>
                <div className="form-group full-width">
                    <label className="form-label">Notes</label>
                    <textarea className="form-input form-textarea" value={form.notes} onChange={set('notes')} />
                </div>
            </div>
            <div className="btn-group">
                <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={saving}>Cancel</button>
                <button type="submit" className="btn btn-primary" disabled={saving}>
                    {saving ? <><i className="fas fa-spinner fa-spin"></i> Saving…</> : <><i className="fas fa-plus"></i> Create Task</>}
                </button>
            </div>
        </form>
    );
};

const CommForm = ({ accountId, contacts, onSubmit, onCancel }) => {
    const [form, setForm]   = React.useState({ type: 'phone', direction: 'outbound', subject: '', content: '', contact_id: '' });
    const [error, setError] = React.useState('');
    const [saving, setSaving] = React.useState(false);
    const accountContacts = contacts.filter(c => c.account_id === accountId);
    const set = (key) => (e) => setForm(p => ({ ...p, [key]: e.target.value }));

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSaving(true); setError('');
        try {
            await onSubmit({ ...form, account_id: accountId, contact_id: form.contact_id ? parseInt(form.contact_id) : null });
        } catch (err) { setError(err.message); setSaving(false); }
    };

    return (
        <form onSubmit={handleSubmit}>
            {error && <div className="api-error">{error}</div>}
            <div className="form-grid">
                <div className="form-group">
                    <label className="form-label">Type</label>
                    <select className="form-input" value={form.type} onChange={set('type')}>
                        <option value="phone">Phone</option>
                        <option value="email">Email</option>
                        <option value="meeting">Meeting</option>
                        <option value="note">Note</option>
                        <option value="sms">SMS</option>
                    </select>
                </div>
                <div className="form-group">
                    <label className="form-label">Direction</label>
                    <select className="form-input" value={form.direction} onChange={set('direction')}>
                        <option value="outbound">Outbound</option>
                        <option value="inbound">Inbound</option>
                        <option value="internal">Internal</option>
                    </select>
                </div>
                {accountContacts.length > 0 && (
                    <div className="form-group full-width">
                        <label className="form-label">Contact (optional)</label>
                        <select className="form-input" value={form.contact_id} onChange={set('contact_id')}>
                            <option value="">— None —</option>
                            {accountContacts.map(c => <option key={c.id} value={c.id}>{c.first_name} {c.last_name}</option>)}
                        </select>
                    </div>
                )}
                <div className="form-group full-width">
                    <label className="form-label">Subject</label>
                    <input type="text" className="form-input" value={form.subject} onChange={set('subject')} />
                </div>
                <div className="form-group full-width">
                    <label className="form-label">Notes / Content</label>
                    <textarea className="form-input form-textarea" value={form.content} onChange={set('content')} />
                </div>
            </div>
            <div className="btn-group">
                <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={saving}>Cancel</button>
                <button type="submit" className="btn btn-primary" disabled={saving}>
                    {saving ? <><i className="fas fa-spinner fa-spin"></i> Saving…</> : <><i className="fas fa-plus"></i> Log Communication</>}
                </button>
            </div>
        </form>
    );
};