'use client';

import { useState } from "react";
import { useTranslations, useLocale } from "next-intl";
import { SupportChat } from "@/components/dashboard/support/chat";
import { SupportHistory } from "@/components/dashboard/support/history";
import { useGet } from "@/hooks/use-get";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { MessageSquare, History, Headphones } from "lucide-react";
import { cn } from "@/lib/cn";

export function SupportClient() {
    const t = useTranslations();
    const locale = useLocale();
    const isRtl = locale === 'ar';
    const [view, setView] = useState<'history' | 'chat'>('history');
    
    // Fetch history to check for active tickets
    const { data: historyData } = useGet({
        url: '/support-sequences/history/list'
    });
    
    const hasActiveTicket = historyData?.data?.some((ticket: any) => !ticket.is_close);

    return (
        <section className="p-4 md:p-6 lg:p-8 min-h-screen bg-zinc-50 font-sans" dir={isRtl ? 'rtl' : 'ltr'}>
            <div className="w-full space-y-8 animate-in fade-in duration-700">
                
                {/* Clean Dashboard Header - Explicit RTL Aligned */}
                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-zinc-200">
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 mb-2">
                            <Headphones className="size-5 text-purple-600" />
                            <span className="text-[10px] font-bold text-purple-600 uppercase tracking-widest">{t('custom.mwaheb-support-center')}</span>
                        </div>
                        <h2 className="text-3xl md:text-5xl font-extrabold text-zinc-900 tracking-tight">
                            {t('custom.support-subtitle')}
                        </h2>
                    </div>
                </div>

                <Tabs value={view} onValueChange={(v) => setView(v as any)} className="w-full" dir={isRtl ? 'rtl' : 'ltr'}>
                    <div className="flex justify-start mb-8">
                        <TabsList className="bg-white p-1 h-auto rounded-xl border border-zinc-200 shadow-sm">
                            <TabsTrigger 
                                value="history" 
                                className={cn(
                                    "px-8 py-3 rounded-lg font-bold text-xs uppercase tracking-wider transition-all duration-300 gap-3",
                                    "data-[state=active]:bg-primary-tw-600 data-[state=active]:text-white data-[state=active]:shadow-md",
                                    "text-zinc-500 hover:text-zinc-900 data-[state=active]:hover:text-white"
                                )}
                            >
                                <History className="size-4" />
                                {t('custom.view-history')}
                            </TabsTrigger>
                            <TabsTrigger 
                                value="chat" 
                                className={cn(
                                    "px-8 py-3 rounded-lg font-bold text-xs uppercase tracking-wider transition-all duration-300 gap-3",
                                    "data-[state=active]:bg-primary-tw-600 data-[state=active]:text-white data-[state=active]:shadow-md",
                                    "text-zinc-500 hover:text-zinc-900 data-[state=active]:hover:text-white"
                                )}
                            >
                                <MessageSquare className="size-4" />
                                {t('custom.new-support-ticket')}
                            </TabsTrigger>
                        </TabsList>
                    </div>

                    <div className="w-full animate-in fade-in-0 duration-500">
                        <TabsContent value="history" className="mt-0 outline-none focus-visible:ring-0">
                            <SupportHistory 
                                activeView={view}
                                onResume={() => setView('chat')}
                            />
                        </TabsContent>

                        <TabsContent value="chat" className="mt-0 outline-none focus-visible:ring-0">
                            <div className="w-full">
                                {hasActiveTicket ? (
                                    <div className="flex flex-col items-center justify-center py-20 bg-white rounded-xl border border-zinc-200">
                                        <div className="bg-amber-50 p-6 rounded-full mb-4 border border-amber-100">
                                            <MessageSquare className="size-8 text-amber-500" />
                                        </div>
                                        <h3 className="text-zinc-900 font-bold text-lg mb-2 text-center">
                                            {isRtl ? "لديك تذكرة مفتوحة بالفعل" : "You already have an active ticket"}
                                        </h3>
                                        <p className="text-zinc-500 text-sm max-w-md text-center mb-6">
                                            {isRtl 
                                                ? "عذراً، لا يمكنك فتح تذكرة جديدة حتى تقوم بإغلاق التذكرة المفتوحة الحالية." 
                                                : "Sorry, you cannot open a new ticket until you close your currently active open ticket."}
                                        </p>
                                        <button 
                                            onClick={() => setView('history')}
                                            className="bg-primary-tw-600 hover:bg-primary-tw-700 text-white px-6 py-2.5 rounded-lg font-bold text-sm transition-colors"
                                        >
                                            {isRtl ? "العودة للتذاكر السابقة" : "Go to History"}
                                        </button>
                                    </div>
                                ) : (
                                    <SupportChat 
                                        activeView={view}
                                        onBack={() => setView('history')} 
                                    />
                                )}
                            </div>
                        </TabsContent>
                    </div>
                </Tabs>
            </div>
        </section>
    );
}