// Company Profile — business name + the letterhead block that prints on
// quote/invoice PDFs (tenants.settings.billing). Until this screen existed,
// only the platform operator could set these.

const CompanySection = ({ tenant, onTenantChange }) => {
    const [form, setForm] = React.useState({
        name:    tenant?.name || '',
        address: tenant?.billing?.address || '',
        phone:   tenant?.billing?.phone   || '',
        email:   tenant?.billing?.email   || '',
        website: tenant?.billing?.website || '',
    });
    const [saving, setSaving] = React.useState(false);
    const [saved, setSaved]   = React.useState(false);
    const [error, setError]   = React.useState('');
    const set = (k) => (e) => { setForm(p => ({ ...p, [k]: e.target.value })); setSaved(false); };

    const handleSave = async (e) => {
        e.preventDefault();
        setSaving(true); setError(''); setSaved(false);
        try {
            const updated = await api.updateTenant({
                name: form.name,
                billing: { address: form.address, phone: form.phone, email: form.email, website: form.website },
            });
            onTenantChange && onTenantChange(updated);
            setSaved(true);
        } catch (err) { setError(err.message); }
        finally { setSaving(false); }
    };

    return (
        <form onSubmit={handleSave} className="settings-form">
            {error && <div className="api-error">{error}</div>}
            {saved && <div className="api-success"><i className="fas fa-check"></i> Saved — new quotes and invoices will use these details.</div>}

            <div className="form-group" style={{ marginBottom: '1rem' }}>
                <label className="form-label">Business name</label>
                <input className="form-input" value={form.name} onChange={set('name')} maxLength={255} required />
                <p className="form-hint" style={{ marginTop: '0.375rem' }}>Shown across the CRM and at the top of your PDFs.</p>
            </div>

            <div className="form-section">
                <h4><i className="fas fa-file-invoice" style={{ marginRight: '0.375rem' }}></i>Letterhead</h4>
                <p className="form-hint" style={{ marginTop: 0, marginBottom: '1rem' }}>
                    These appear under your business name on every quote and invoice you send.
                    Leave anything blank to keep it off the documents.
                </p>
                <div className="form-grid">
                    <div className="form-group full-width">
                        <label className="form-label">Address</label>
                        <input className="form-input" value={form.address} onChange={set('address')} maxLength={500} placeholder="123 Main St, Suite 4, Springfield" />
                    </div>
                    <div className="form-group">
                        <label className="form-label">Phone</label>
                        <input className="form-input" value={form.phone} onChange={set('phone')} maxLength={50} placeholder="(555) 010-0000" />
                    </div>
                    <div className="form-group">
                        <label className="form-label">Email</label>
                        <input className="form-input" type="email" value={form.email} onChange={set('email')} maxLength={255} placeholder="billing@yourbusiness.com" />
                    </div>
                    <div className="form-group full-width">
                        <label className="form-label">Website</label>
                        <input className="form-input" value={form.website} onChange={set('website')} maxLength={255} placeholder="yourbusiness.com" />
                    </div>
                </div>
            </div>

            <div className="btn-group" style={{ marginTop: 0 }}>
                <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> Save</>}
                </button>
            </div>
        </form>
    );
};