import { Link } from 'react-router-dom';
import { Card } from '../../../components/ui/card';
import { useStaffPermissionServiceContext } from '../../../services/StaffPermissionService';
import CampaignSendingDomainSection from '../OrganizationPage/CampaignSendingDomainSection';
import CampaignMailingAddressSection from '../OrganizationPage/CampaignMailingAddressSection';

export default function CampaignSendingDomainPage() {
    const { activeWorkspace, permissionsSettled, canView, canManage } = useStaffPermissionServiceContext();
    const mayViewCampaigns = Boolean(activeWorkspace) && canView('campaigns');

    return (
        <div className="p-6 space-y-6">
            <div className="space-y-2">
                <Link className="btn btn-blue-ghost" to="/dashboard/campaigns">Back to campaigns</Link>
                <h1 className="ak-page-title">Marketing email setup</h1>
            </div>
            {!permissionsSettled ? (
                <p role="status">Checking your permissions.</p>
            ) : !mayViewCampaigns ? (
                <p>Campaigns are not available in this workspace.</p>
            ) : !canManage('organization') ? (
                <p>Ask a practice administrator to set up or check your marketing email sending domain and mailing address.</p>
            ) : (
                <>
                    <Card id="sending-domain" className="p-6">
                        <CampaignSendingDomainSection key={activeWorkspace} />
                    </Card>
                    <Card id="mailing-address" className="p-6">
                        <CampaignMailingAddressSection key={activeWorkspace} />
                    </Card>
                </>
            )}
        </div>
    );
}