import React from 'react';
import { Link } from 'react-router-dom';
import { SettingsLayout } from '../components/SettingsLayout';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { ChevronLeft } from 'lucide-react';
import { __ } from '@/lib/i18n';
import EmailCustomization from './EmailCustomization';

export default function EmailConfiguration() {
  return (
    <SettingsLayout
      title={__('Email Configuration')}
      description={__('Configure email templates and connection settings')}
      action={
        <Link to="/settings/notifications/channels">
          <Button variant="ghost" size="sm">
            <ChevronLeft className="mr-2 h-4 w-4" />
            {__('Back to Channels')}
          </Button>
        </Link>
      }
    >
      <Tabs defaultValue="template" className="space-y-6">
        <TabsList className="grid w-full max-w-md grid-cols-2">
          <TabsTrigger value="template">{__('Template Settings')}</TabsTrigger>
          <TabsTrigger value="connection">{__('Connection Settings')}</TabsTrigger>
        </TabsList>

        <TabsContent value="template" className="space-y-4">
          <EmailCustomization />
        </TabsContent>

        <TabsContent value="connection" className="space-y-4">
          {/* Connection Settings - SMTP Override */}
          <div className="rounded-lg border bg-card p-6">
            <h3 className="text-lg font-semibold mb-2">{__('Email Delivery')}</h3>
            <p className="text-sm text-muted-foreground mb-4">
              {__(
                'By default, emails are sent using WordPress wp_mail() function. You can override this with custom SMTP settings if needed.'
              )}
            </p>
            <div className="bg-muted/50 rounded-lg p-4">
              <p className="text-sm text-muted-foreground">
                💡 {__('Tip: For custom SMTP configuration, install a dedicated SMTP plugin like WP Mail SMTP or Easy WP SMTP.')}
              </p>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </SettingsLayout>
  );
}
