import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { __ } from '@wordpress/i18n';
const MiscSettings = ({ settings, updateSettings }) => {
    return (
        <Card>
            <CardHeader>
                <CardTitle>{__('Miscellaneous Settings', 'aisk-ai-chat')}</CardTitle>
                <CardDescription>{__('Additional configuration options', 'aisk-ai-chat')}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
                {/* Credit link is opt-in (off by default) per WordPress.org guidelines */}
                <div className="flex items-center justify-between gap-4">
                    <div className="space-y-0.5">
                        <Label htmlFor="show_credit">{__('Show "Powered by Aisk.chat" link', 'aisk-ai-chat')}</Label>
                        <p className="text-sm text-gray-500">
                            {__('Display a small credit link in the chat widget footer. Off by default.', 'aisk-ai-chat')}
                        </p>
                    </div>
                    <Switch
                        id="show_credit"
                        checked={settings.misc?.show_credit === true}
                        onCheckedChange={(checked) => updateSettings('misc', 'show_credit', checked)}
                    />
                </div>

                <div className="space-y-2">
                    <Label htmlFor="custom_css">{__('Custom CSS', 'aisk-ai-chat')}</Label>
                    <Textarea
                        id="custom_css"
                        value={settings.misc?.custom_css || ''}
                        onChange={(e) => updateSettings('misc', 'custom_css', e.target.value)}
                        placeholder={__('Add your custom CSS', 'aisk-ai-chat')}
                        className="font-mono h-[480px]"
                        spellCheck="false"
                    />
                    <div className="mt-2 text-sm text-muted-foreground">
                        <p>{__('Available CSS classes for customization:', 'aisk-ai-chat')}</p>
                        <ul className="mt-2 list-disc pl-4 space-y-1">
                            <li><code>.support-buddy-widget</code> - {__('Main widget container', 'aisk-ai-chat')}</li>
                            <li><code>.support-buddy-container</code> - {__('Chat container', 'aisk-ai-chat')}</li>
                            <li><code>.support-buddy-header</code> - {__('Header section', 'aisk-ai-chat')}</li>
                            <li><code>.support-buddy-messages</code> - {__('Messages container', 'aisk-ai-chat')}</li>
                            <li><code>.support-buddy-message.user</code> - {__('User message bubbles', 'aisk-ai-chat')}</li>
                            <li><code>.support-buddy-message.bot</code> - {__('Bot message bubbles', 'aisk-ai-chat')}</li>
                            <li><code>.support-buddy-input</code> - {__('Input section', 'aisk-ai-chat')}</li>
                            <li><code>.support-buddy-footer</code> - {__('Footer section', 'aisk-ai-chat')}</li>
                        </ul>
                    </div>
                    <p className="mt-4 text-sm text-muted-foreground">
                        {__('Add custom CSS to modify the chat widget appearance. Changes will be applied to the frontend chat widget.', 'aisk-ai-chat')}
                    </p>
                </div>
            </CardContent>
        </Card>
    );
};

export default MiscSettings;