import { ShieldAlert, Cable, ArrowRight } from 'lucide-react';
import { AdminButton } from './settings-ui';
import { Card, CardContent } from './card';

export function CloudConnectionRequired({ section }: { section: string }) {
  const handleConnect = () => {
    window.dispatchEvent(new CustomEvent('wawp-navigate', { detail: 'connector' }));
  };

  const getSectionName = (s: string) => {
    switch (s) {
      case 'meta-api-sender': return 'WhatsApp Business API';
      case 'firebase-sender': return 'Firebase SMS Gateway';
      case 'abandoned_carts': return 'Abandoned Cart Recovery';
      case 'campaigns': return 'Bulk Campaigns';
      case 'email_templates': return 'Email Builder';
      default: return 'this feature';
    }
  };

  return (
    <div className="flex items-center justify-center min-h-[500px] p-6">
      <Card className="max-w-md w-full text-center border-dashed border-2 border-emerald-500/20 bg-emerald-500/[0.02] shadow-none">
        <CardContent className="pt-8 pb-8">
          <div className="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <ShieldAlert className="w-8 h-8 text-emerald-500" />
          </div>
          
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Service Connection Required</h2>
          <p className="text-gray-600 mb-8 leading-relaxed">
            The <strong>{getSectionName(section)}</strong> is a cloud-powered service. 
            To enable and configure it, you must first connect your site to the WAWP Cloud Platform.
          </p>

          <div className="space-y-4">
            <AdminButton 
              onClick={handleConnect}
              className="w-full text-white gap-2 h-12 text-lg shadow-sm"
              icon={Cable}
            >
              Connect Now
              <ArrowRight className="w-5 h-5" />
            </AdminButton>
            
            <p className="text-sm text-gray-400 font-medium">
              Connecting is free and takes less than 30 seconds.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}