import React from 'react';
import { Link } from 'react-router-dom';
import { SettingsLayout } from '../components/SettingsLayout';
import { SettingsCard } from '../components/SettingsCard';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ChevronLeft, Mail, Bell, MessageCircle, Send, Settings, ChevronRight } from 'lucide-react';
import { __ } from '@/lib/i18n';

interface Channel {
  id: string;
  name: string;
  description: string;
  icon: React.ReactNode;
  type: 'builtin' | 'addon';
  enabled: boolean;
  configPath: string;
}

export default function ChannelConfiguration() {
  const channels: Channel[] = [
    {
      id: 'email',
      name: __('Email'),
      description: __('Email notifications powered by WordPress. Configure templates and SMTP settings.'),
      icon: <Mail className="h-6 w-6" />,
      type: 'builtin',
      enabled: true,
      configPath: '/settings/notifications/channels/email',
    },
    {
      id: 'push',
      name: __('Push Notifications'),
      description: __('Browser push notifications for real-time updates. Perfect for PWA.'),
      icon: <Bell className="h-6 w-6" />,
      type: 'builtin',
      enabled: true,
      configPath: '/settings/notifications/channels/push',
    },
    {
      id: 'whatsapp',
      name: __('WhatsApp'),
      description: __('Send notifications via WhatsApp Business API. Requires addon installation.'),
      icon: <MessageCircle className="h-6 w-6" />,
      type: 'addon',
      enabled: false,
      configPath: '/settings/notifications/channels/whatsapp',
    },
    {
      id: 'telegram',
      name: __('Telegram'),
      description: __('Send notifications via Telegram Bot API. Requires addon installation.'),
      icon: <Send className="h-6 w-6" />,
      type: 'addon',
      enabled: false,
      configPath: '/settings/notifications/channels/telegram',
    },
  ];

  const builtinChannels = channels.filter(c => c.type === 'builtin');
  const addonChannels = channels.filter(c => c.type === 'addon');

  return (
    <SettingsLayout
      title={__('Channel Configuration')}
      description={__('Configure global settings for each notification channel')}
      action={
        <Link to="/settings/notifications">
          <Button variant="ghost" size="sm">
            <ChevronLeft className="mr-2 h-4 w-4" />
            {__('Back to Notifications')}
          </Button>
        </Link>
      }
    >
      <div className="space-y-6">
        {/* Info Card */}
        <SettingsCard
          title={__('About Channel Configuration')}
          description={__('Global settings that apply to all notifications')}
        >
          <div className="text-sm space-y-3">
            <p className="text-muted-foreground">
              {__(
                'Each notification channel has its own configuration for templates and connection settings. These settings apply globally to both staff and customer notifications.'
              )}
            </p>
            <div className="bg-muted/50 rounded-lg p-4">
              <p className="text-xs text-muted-foreground">
                💡 {__('Tip: Configure your channels here, then enable them for specific events in Staff or Customer Notifications.')}
              </p>
            </div>
          </div>
        </SettingsCard>

        {/* Built-in Channels */}
        <SettingsCard
          title={__('Built-in Channels')}
          description={__('Always available notification channels')}
        >
          <div className="space-y-3">
            {builtinChannels.map((channel) => (
              <div
                key={channel.id}
                className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
              >
                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-lg bg-primary/10 text-primary">
                    {channel.icon}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <h3 className="font-semibold text-base">{channel.name}</h3>
                      <Badge variant="secondary" className="text-xs">
                        {__('Built-in')}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">{channel.description}</p>
                  </div>
                </div>
                <Link to={channel.configPath}>
                  <Button variant="outline" size="sm" className="gap-2">
                    <Settings className="h-4 w-4" />
                    {__('Configure')}
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </Link>
              </div>
            ))}
          </div>
        </SettingsCard>

        {/* Addon Channels */}
        <SettingsCard
          title={__('Addon Channels')}
          description={__('Install addons to enable additional notification channels')}
          className='hidden'
        >
          <div className="space-y-3">
            {addonChannels.map((channel) => (
              <div
                key={channel.id}
                className="flex items-center justify-between p-4 rounded-lg border bg-card opacity-60"
              >
                <div className="flex items-center gap-4">
                  <div className="p-3 rounded-lg bg-muted text-muted-foreground">
                    {channel.icon}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <h3 className="font-semibold text-base">{channel.name}</h3>
                      <Badge variant="outline" className="text-xs">
                        {__('Addon Required')}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">{channel.description}</p>
                  </div>
                </div>
                <Button variant="outline" size="sm" disabled>
                  {__('Install Addon')}
                </Button>
              </div>
            ))}
          </div>
        </SettingsCard>
      </div>
    </SettingsLayout>
  );
}
