"use client";

import React, { useEffect, useMemo } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useChatbotSettings, useUpdateChatbotSettings, ChatbotSetting } from '@/hooks/useChatbotSettings';
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { MultiSelectCombobox } from "@/components/ui/multi-select-combobox";
import { useInfiniteContacts } from '@/hooks/useWhatsApp';
import { useChatStore } from '@/store/useChatStore';
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Smile, Bold, Italic, Strikethrough, Code } from "lucide-react";
import EmojiPicker from 'emoji-picker-react';

import { FormattedTextarea } from "@/components/ui/formatted-textarea";
import { useMessageTemplates } from "@/hooks/useMessageTemplates";

const ChatbotSettingsView = ({ onNavigateToMessageTemplates }: { onNavigateToMessageTemplates?: () => void }) => {
    const { data: settings, isLoading } = useChatbotSettings();
    const { mutate: updateSettings, isPending } = useUpdateChatbotSettings();
    const { setSearchContact } = useChatStore();
    
    // Fetch contacts for the Combobox
    const { data: contactsData, isLoading: isLoadingContacts } = useInfiniteContacts();
    const { data: templates } = useMessageTemplates();
    const newCustomerTemplatesCount = templates?.filter(t => t.category === 1)?.length || 0;
    const oldCustomerTemplatesCount = templates?.filter(t => t.category === 2)?.length || 0;

    const [formData, setFormData] = React.useState<Partial<ChatbotSetting>>({
        is_active: false,
        chatbot_reset_days: 60,
        is_testing_mode: false,
        test_phone_numbers: '',
        is_out_of_office_active: false,
        is_out_of_office_testing_mode: false,
        out_of_office_test_phone_numbers: '',
        out_of_office_delay_minutes: 10,
        chatbot_greeting_message: '',
        chatbot_product_message: '',
        chatbot_location_message: '',
        chatbot_handoff_message: '',
        out_of_office_message: '',
        out_of_office_message_new_customer: '',
        out_of_office_cooldown_hours: 0,
        out_of_office_pause_before_open_hours: 2,
        business_hours: {},
        reminder_customer_linked_limit: 10,
        reminder_response_late_limit: 100
    });

    useEffect(() => {
        if (settings) {
            setFormData({
                is_active: settings.is_active,
                chatbot_reset_days: settings.chatbot_reset_days ?? 60,
                is_testing_mode: settings.is_testing_mode,
                test_phone_numbers: settings.test_phone_numbers || '',
                is_out_of_office_active: settings.is_out_of_office_active,
                is_out_of_office_testing_mode: settings.is_out_of_office_testing_mode,
                out_of_office_test_phone_numbers: settings.out_of_office_test_phone_numbers || '',
                out_of_office_delay_minutes: settings.out_of_office_delay_minutes ?? 10,
                chatbot_greeting_message: settings.chatbot_greeting_message || '',
                chatbot_product_message: settings.chatbot_product_message || '',
                chatbot_location_message: settings.chatbot_location_message || '',
                chatbot_handoff_message: settings.chatbot_handoff_message || '',
                out_of_office_message: settings.out_of_office_message || '',
                out_of_office_message_new_customer: settings.out_of_office_message_new_customer || '',
                out_of_office_cooldown_hours: settings.out_of_office_cooldown_hours ?? 0,
                out_of_office_pause_before_open_hours: settings.out_of_office_pause_before_open_hours ?? 2,
                business_hours: settings.business_hours || {},
                reminder_customer_linked_limit: settings.reminder_customer_linked_limit ?? 10,
                reminder_response_late_limit: settings.reminder_response_late_limit ?? 100
            });
        }
    }, [settings]);

    const handleChange = (field: keyof ChatbotSetting, value: any) => {
        setFormData(prev => {
            const next = { ...prev, [field]: value };
            
            // Mutually exclusive toggle logic
            if (field === 'is_active' && value === true) {
                next.is_out_of_office_active = false;
            }
            if (field === 'is_out_of_office_active' && value === true) {
                next.is_active = false;
            }
            
            return next;
        });
    };

    const handleBusinessHourChange = (dayId: string, field: string, value: any) => {
        setFormData(prev => ({
            ...prev,
            business_hours: {
                ...prev.business_hours,
                [dayId]: {
                    ...(prev.business_hours?.[dayId] || { is_open: false, start: '08:00', end: '17:00' }),
                    [field]: value
                }
            }
        }));
    };

    const daysOfWeek = [
        { id: '1', name: 'Senin' },
        { id: '2', name: 'Selasa' },
        { id: '3', name: 'Rabu' },
        { id: '4', name: 'Kamis' },
        { id: '5', name: 'Jumat' },
        { id: '6', name: 'Sabtu' },
        { id: '7', name: 'Minggu' },
    ];

    const handleSave = () => {
        updateSettings(formData);
    };

    // Format contacts data for the Combobox
    const contactOptions = useMemo(() => {
        if (!contactsData?.pages) return [];
        return contactsData.pages.flatMap(page => 
            page.result.map(contact => ({
                value: contact.phone_number,
                label: `${contact.name} ${contact.last_name || ''} (${contact.phone_number})`,
                keywords: [contact.phone_number]
            }))
        );
    }, [contactsData]);

    if (isLoading) {
        return <div className="p-8 text-center text-gray-500">Loading settings...</div>;
    }

    return (
        <div className="flex-1 flex flex-col h-full bg-[#f0f2f5] dark:bg-[#111b21] overflow-y-auto relative">
            <div className="bg-white dark:bg-[#202c33] shadow-sm mb-6 px-6 py-4 flex items-center shrink-0 sticky top-0 z-10 justify-between">
                <h2 className="text-xl font-medium text-gray-900 dark:text-gray-100">Pengaturan Chatbot & Out of Office</h2>
                <Button onClick={handleSave} disabled={isPending} className="bg-teal-600 hover:bg-teal-700 text-white min-w-[150px]">
                    {isPending ? "Menyimpan..." : "Simpan Pengaturan"}
                </Button>
            </div>
            
            <div className="px-6 grid grid-cols-1 lg:grid-cols-2 gap-6 w-full max-w-[1400px] mx-auto pb-10">
                
                {/* 1. SECTION CHATBOT */}
                <div className={`bg-white dark:bg-[#202c33] p-6 rounded-lg shadow-sm border-t-4 border-teal-500 transition-opacity duration-300 ${!formData.is_active ? 'opacity-70' : ''}`}>
                    <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-100 dark:border-gray-800">
                        <div>
                            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Mode Chatbot (24 Jam)</h3>
                            <p className="text-sm text-gray-500 mt-1">Jika aktif, chatbot berjalan 24 jam mengabaikan jam operasional.</p>
                        </div>
                        <Switch 
                            checked={formData.is_active} 
                            onCheckedChange={(c) => handleChange('is_active', c)} 
                        />
                    </div>
                    
                    <div className="space-y-6">
                        {/* Waktu Reset (Timeout) */}
                        <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-[#1a2328] rounded-lg border border-gray-100 dark:border-gray-800">
                            <div>
                                <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100">Waktu Reset Chatbot</h4>
                                <p className="text-xs text-gray-500 mt-1">
                                    Chatbot akan mengirimkan pesan otomatis ke kontak yang sama lagi jika percakapan terakhir sudah melebihi batas waktu ini. (Jika kosong, default 60 hari)
                                </p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Input 
                                    type="number"
                                    min="1"
                                    value={formData.chatbot_reset_days ?? ''}
                                    onChange={(e) => handleChange('chatbot_reset_days', parseInt(e.target.value) || 60)}
                                    className="w-20 text-center"
                                />
                                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Hari</span>
                            </div>
                        </div>
                        {/* Testing Mode Chatbot */}
                        <div className="p-4 bg-gray-50 dark:bg-[#1a2328] rounded-lg border border-gray-100 dark:border-gray-800">
                            <div className="flex items-center justify-between mb-4">
                                <div>
                                    <p className="font-medium text-sm text-gray-900 dark:text-gray-100">Mode Testing Chatbot</p>
                                    <p className="text-xs text-gray-500 mt-1">Hanya akan membalas ke nomor-nomor di bawah ini.</p>
                                </div>
                                <Switch 
                                    checked={formData.is_testing_mode} 
                                    onCheckedChange={(c) => handleChange('is_testing_mode', c)} 
                                />
                            </div>
                            <div className={`transition-all duration-300 overflow-hidden ${formData.is_testing_mode ? 'max-h-[300px] mt-4' : 'max-h-0'}`}>
                                <label className="block text-xs font-medium mb-2 text-gray-900 dark:text-gray-100">
                                    Nomor Telepon Testing
                                </label>
                                <div className="w-full relative">
                                    <MultiSelectCombobox 
                                        data={contactOptions}
                                        value={formData.test_phone_numbers ? formData.test_phone_numbers.split(',').filter(Boolean) : []}
                                        onChange={(val: string[]) => handleChange('test_phone_numbers', val.join(','))}
                                        onInputChange={(val: string) => setSearchContact(val)}
                                        placeholder="Cari dari daftar kontak..."
                                        loading={isLoadingContacts}
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Alur Pesan Chatbot */}
                        <div>
                            <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-4 flex items-center">
                                <div className="w-6 h-6 rounded bg-teal-100 text-teal-700 flex items-center justify-center mr-2 text-xs font-bold">1</div>
                                Pesan Sapaan (Greeting)
                            </h4>
                            <FormattedTextarea 
                                value={formData.chatbot_greeting_message || ''}
                                onChange={(val) => handleChange('chatbot_greeting_message', val)}
                                minHeight="min-h-[80px]"
                            />
                        </div>
                        <div>
                            <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-4 flex items-center">
                                <div className="w-6 h-6 rounded bg-teal-100 text-teal-700 flex items-center justify-center mr-2 text-xs font-bold">2</div>
                                Opsi Produk
                            </h4>
                            <FormattedTextarea 
                                value={formData.chatbot_product_message || ''}
                                onChange={(val) => handleChange('chatbot_product_message', val)}
                                minHeight="min-h-[120px]"
                            />
                        </div>
                        <div>
                            <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-4 flex items-center">
                                <div className="w-6 h-6 rounded bg-teal-100 text-teal-700 flex items-center justify-center mr-2 text-xs font-bold">3</div>
                                Opsi Lokasi
                            </h4>
                            <FormattedTextarea 
                                value={formData.chatbot_location_message || ''}
                                onChange={(val) => handleChange('chatbot_location_message', val)}
                                minHeight="min-h-[100px]"
                            />
                        </div>
                        <div>
                            <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-4 flex items-center">
                                <div className="w-6 h-6 rounded bg-teal-100 text-teal-700 flex items-center justify-center mr-2 text-xs font-bold">4</div>
                                Pesan Handoff (Penutup)
                            </h4>
                            <FormattedTextarea 
                                value={formData.chatbot_handoff_message || ''}
                                onChange={(val) => handleChange('chatbot_handoff_message', val)}
                                minHeight="min-h-[80px]"
                            />
                        </div>
                    </div>
                </div>

                {/* 2. SECTION OUT OF OFFICE */}
                <div className={`bg-white dark:bg-[#202c33] p-6 rounded-lg shadow-sm border-t-4 border-amber-500 transition-opacity duration-300 ${!formData.is_out_of_office_active ? 'opacity-70' : ''}`}>
                    <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-100 dark:border-gray-800">
                        <div>
                            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Mode Di Luar Jam Operasional</h3>
                            <p className="text-sm text-gray-500 mt-1">Sistem hanya membalas pesan secara otomatis di luar jam kerja.</p>
                        </div>
                        <Switch 
                            checked={formData.is_out_of_office_active} 
                            onCheckedChange={(c) => handleChange('is_out_of_office_active', c)} 
                        />
                    </div>

                    <div className="space-y-6">
                        {/* Waktu Delay OOO */}
                        <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-[#1a2328] rounded-lg border border-gray-100 dark:border-gray-800">
                            <div>
                                <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100">Waktu Tunggu (Delay) Out-of-Office</h4>
                                <p className="text-xs text-gray-500 mt-1">
                                    Sistem akan menunda pengiriman pesan Out-of-Office selama batas waktu ini (agar admin ada kesempatan untuk membalas manual terlebih dahulu).
                                </p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Input 
                                    type="number"
                                    min="1"
                                    value={formData.out_of_office_delay_minutes ?? ''}
                                    onChange={(e) => handleChange('out_of_office_delay_minutes', parseInt(e.target.value) || 10)}
                                    className="w-20 text-center"
                                />
                                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Menit</span>
                            </div>
                        </div>

                        {/* Cooldown OOO */}
                        <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-[#1a2328] rounded-lg border border-gray-100 dark:border-gray-800">
                            <div>
                                <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100">Jeda Waktu (Cooldown) Pesan Out-of-Office</h4>
                                <p className="text-xs text-gray-500 mt-1">
                                    Sistem tidak akan mengirim pesan Out-of-Office lagi ke pelanggan yang sama dalam rentang waktu ini.
                                </p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Input 
                                    type="number"
                                    min="0"
                                    value={formData.out_of_office_cooldown_hours ?? ''}
                                    onChange={(e) => handleChange('out_of_office_cooldown_hours', parseInt(e.target.value) || 0)}
                                    className="w-20 text-center"
                                />
                                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Jam</span>
                            </div>
                        </div>

                        {/* Jeda Pesan Sebelum Jam Operasional Buka */}
                        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 bg-gray-50 dark:bg-[#1a2328] rounded-md border border-gray-100 dark:border-gray-800">
                            <div>
                                <h4 className="font-medium text-gray-900 dark:text-gray-100">Jeda Pesan Sebelum Jam Operasional Buka</h4>
                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Pesan bot tidak lagi dikirimkan menjelang jam operasional buka.</p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Input 
                                    type="number"
                                    min="0"
                                    value={formData.out_of_office_pause_before_open_hours ?? 2}
                                    onChange={(e) => handleChange('out_of_office_pause_before_open_hours', parseInt(e.target.value) || 0)}
                                    className="w-20 text-center"
                                />
                                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Jam</span>
                            </div>
                        </div>

                        {/* Testing Mode OOO */}
                        <div className="p-4 bg-gray-50 dark:bg-[#1a2328] rounded-lg border border-gray-100 dark:border-gray-800">
                            <div className="flex items-center justify-between mb-4">
                                <div>
                                    <p className="font-medium text-sm text-gray-900 dark:text-gray-100">Mode Testing Out-of-Office</p>
                                    <p className="text-xs text-gray-500 mt-1">Hanya akan membalas ke nomor-nomor di bawah ini.</p>
                                </div>
                                <Switch 
                                    checked={formData.is_out_of_office_testing_mode} 
                                    onCheckedChange={(c) => handleChange('is_out_of_office_testing_mode', c)} 
                                />
                            </div>
                            <div className={`transition-all duration-300 overflow-hidden ${formData.is_out_of_office_testing_mode ? 'max-h-[300px] mt-4' : 'max-h-0'}`}>
                                <label className="block text-xs font-medium mb-2 text-gray-900 dark:text-gray-100">
                                    Nomor Telepon Testing
                                </label>
                                <div className="w-full relative">
                                    <MultiSelectCombobox 
                                        data={contactOptions}
                                        value={formData.out_of_office_test_phone_numbers ? formData.out_of_office_test_phone_numbers.split(',').filter(Boolean) : []}
                                        onChange={(val: string[]) => handleChange('out_of_office_test_phone_numbers', val.join(','))}
                                        onInputChange={(val: string) => setSearchContact(val)}
                                        placeholder="Cari dari daftar kontak..."
                                        loading={isLoadingContacts}
                                    />
                                </div>
                            </div>
                        </div>

                        {/* OOO Message */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            {/* Pelanggan Baru */}
                            <div className="flex flex-col p-4 bg-gray-50 dark:bg-[#1a2328] rounded-md border border-gray-100 dark:border-gray-800">
                                <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100 mb-2">Pesan Balasan Pelanggan Baru (Belum pernah chat sebelumnya)</h4>
                                <Button 
                                    variant="link" 
                                    className="p-0 h-auto self-start text-blue-600 dark:text-blue-400 hover:text-blue-700 font-semibold"
                                    onClick={(e) => {
                                        e.preventDefault();
                                        if (onNavigateToMessageTemplates) {
                                            onNavigateToMessageTemplates();
                                        }
                                    }}
                                >
                                    {newCustomerTemplatesCount} Template Pesan
                                </Button>
                            </div>

                            {/* Pelanggan Lama */}
                            <div className="flex flex-col p-4 bg-gray-50 dark:bg-[#1a2328] rounded-md border border-gray-100 dark:border-gray-800">
                                <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100 mb-2">Pesan Balasan Pelanggan Lama (Sudah pernah chat sebelumnya)</h4>
                                <Button 
                                    variant="link" 
                                    className="p-0 h-auto self-start text-blue-600 dark:text-blue-400 hover:text-blue-700 font-semibold"
                                    onClick={(e) => {
                                        e.preventDefault();
                                        if (onNavigateToMessageTemplates) {
                                            onNavigateToMessageTemplates();
                                        }
                                    }}
                                >
                                    {oldCustomerTemplatesCount} Template Pesan
                                </Button>
                            </div>
                        </div>

                        {/* Jam Operasional */}
                        <div className="mt-6">
                            <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-4">Konfigurasi Jam Operasional (Buka)</h4>
                            <div className="grid grid-cols-1 gap-3">
                                {daysOfWeek.map(day => {
                                    const config = formData.business_hours?.[day.id] || { is_open: false, start: '08:00', end: '17:00' };
                                    return (
                                        <div key={day.id} className="flex flex-col xl:flex-row items-start xl:items-center justify-between p-3 bg-gray-50 dark:bg-[#1a2328] rounded-md gap-4 border border-gray-100 dark:border-gray-800">
                                            <div className="flex items-center gap-3 min-w-[120px]">
                                                <Switch
                                                    checked={config.is_open}
                                                    onCheckedChange={(c) => handleBusinessHourChange(day.id, 'is_open', c)}
                                                />
                                                <span className="font-medium text-sm text-gray-900 dark:text-gray-100">{day.name}</span>
                                            </div>
                                            {config.is_open ? (
                                                <div className="flex items-center gap-2">
                                                    <Input
                                                        type="time"
                                                        value={config.start || '00:00'}
                                                        onChange={(e) => handleBusinessHourChange(day.id, 'start', e.target.value)}
                                                        className="bg-white dark:bg-[#202c33] border-gray-200 dark:border-gray-700 w-[130px] text-sm focus-visible:ring-amber-500"
                                                    />
                                                    <span className="text-gray-500 text-sm font-medium">s/d</span>
                                                    <Input
                                                        type="time"
                                                        value={config.end || '00:00'}
                                                        onChange={(e) => handleBusinessHourChange(day.id, 'end', e.target.value)}
                                                        className="bg-white dark:bg-[#202c33] border-gray-200 dark:border-gray-700 w-[130px] text-sm focus-visible:ring-amber-500"
                                                    />
                                                </div>
                                            ) : (
                                                <div className="text-sm text-gray-500 italic pr-4">Tutup (Libur)</div>
                                            )}
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </div>
                </div>

                {/* 3. SECTION PENGATURAN DAFTAR PELANGGAN */}
                <div className="bg-white dark:bg-[#202c33] p-6 rounded-lg shadow-sm border-t-4 border-indigo-500 lg:col-span-2">
                    <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-100 dark:border-gray-800">
                        <div>
                            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Pengaturan Pembatasan Akun</h3>
                            <p className="text-sm text-gray-500 mt-1">Pembatasan akses pengiriman pesan berdasarkan kewajiban input Daftar Pelanggan.</p>
                        </div>
                    </div>
                    <div className="space-y-6">
                        {/* Limit Reminder Daftar Pelanggan */}
                        <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-[#1a2328] rounded-lg border border-gray-100 dark:border-gray-800">
                            <div className="max-w-[70%]">
                                <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100">Batas Pengingat Daftar Pelanggan</h4>
                                <p className="text-xs text-gray-500 mt-1">
                                    Batas jumlah pengiriman pesan (cabang non-pusat) ke kontak yang <b>belum ditambahkan ke Daftar Pelanggan</b>. 
                                    Jika jumlah pesan melebihi batas ini, fitur pengiriman pesan akan <b>diblokir otomatis</b> hingga kontak dimasukkan ke Daftar Pelanggan atau admin mereset batasnya.
                                </p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Input 
                                    type="number"
                                    min="1"
                                    value={formData.reminder_customer_linked_limit ?? ''}
                                    onChange={(e) => handleChange('reminder_customer_linked_limit', parseInt(e.target.value) || 10)}
                                    className="w-24 text-center text-lg font-semibold"
                                />
                                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Pesan</span>
                            </div>
                        </div>
                    </div>
                    <div className="space-y-6 mt-6">
                        {/* Limit Keterlambatan Respons */}
                        <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-[#1a2328] rounded-lg border border-gray-100 dark:border-gray-800">
                            <div className="max-w-[70%]">
                                <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100">Batas Keterlambatan Respons</h4>
                                <p className="text-xs text-gray-500 mt-1">
                                    Batas akumulasi waktu (dalam menit) untuk keterlambatan membalas pesan. Jika agen merespons lebih lama dari 10 menit, waktu keterlambatan akan diakumulasikan. 
                                    Jika total waktu keterlambatan melebihi batas ini, fitur pengiriman pesan akan <b>diblokir otomatis</b> hingga admin mereset poin pelanggaran.
                                </p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Input 
                                    type="number"
                                    min="1"
                                    value={formData.reminder_response_late_limit ?? ''}
                                    onChange={(e) => handleChange('reminder_response_late_limit', parseInt(e.target.value) || 100)}
                                    className="w-24 text-center text-lg font-semibold"
                                />
                                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Menit</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ChatbotSettingsView;