import { Head, useForm, router } from '@inertiajs/react';
import {
    Search,
    Send,
    Clock,
    Check,
    CheckCheck,
    AlertCircle,
    UserCheck,
    MessageSquare,
    AlertTriangle,
} from 'lucide-react';
import { useState, useRef, useEffect } from 'react';
import AppLayout from '@/layouts/app-layout';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { useSidebar } from '@/components/ui/sidebar';
import type { BreadcrumbItem } from '@/types';

interface Agent {
    id: number;
    name: string;
    email: string;
}

interface MessageItem {
    id: number;
    whatsapp_message_id: string | null;
    direction: 'inbound' | 'outbound';
    type: string;
    body: string;
    status: string;
    error_message: string | null;
    created_at: string;
    sender: { name: string } | null;
}

interface ContactItem {
    id: number;
    phone_number: string;
    name: string;
    unread_count: number;
    last_message_at: string | null;
    is_session_active: boolean;
    session_remaining_seconds: number;
    assigned_agent: { id: number; name: string } | null;
    latest_message: {
        body: string;
        direction: string;
        status: string;
        created_at: string;
    } | null;
}

interface Props {
    contacts: ContactItem[];
    activeContact: {
        id: number;
        phone_number: string;
        name: string;
        is_session_active: boolean;
        session_remaining_seconds: number;
        last_inbound_at: string | null;
        assigned_to: number | null;
        assigned_agent: { id: number; name: string } | null;
    } | null;
    messages: MessageItem[];
    agents: Agent[];
    currentFilter: 'all' | 'unread' | 'mine';
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'WhatsApp Live Chat',
        href: '/whatsapp/inbox',
    },
];

function WhatsAppChatContent({
    contacts,
    activeContact,
    messages,
    agents,
    currentFilter,
}: Props) {
    const [search, setSearch] = useState('');
    const messagesEndRef = useRef<HTMLDivElement>(null);
    const { setOpen } = useSidebar();

    // Otomatis collapse sidebar utama saat membuka Live Chat agar layout luas & tidak bertumpuk
    useEffect(() => {
        setOpen(false);
    }, [setOpen]);

    const { data, setData, post, processing, reset } = useForm({
        message: '',
    });

    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    };

    useEffect(() => {
        scrollToBottom();
    }, [messages]);

    const filteredContacts = contacts.filter((c) => {
        const query = search.toLowerCase();
        return (
            c.name.toLowerCase().includes(query) ||
            c.phone_number.toLowerCase().includes(query)
        );
    });

    const handleSelectContact = (contactId: number) => {
        router.get(
            '/whatsapp/inbox',
            { contact_id: contactId, filter: currentFilter },
            { preserveState: true }
        );
    };

    const handleFilterChange = (filter: string) => {
        router.get(
            '/whatsapp/inbox',
            {
                filter,
                contact_id: activeContact?.id,
            },
            { preserveState: true }
        );
    };

    const handleSendMessage = (e: React.FormEvent) => {
        e.preventDefault();
        if (!data.message.trim() || !activeContact) return;

        post(`/whatsapp/inbox/${activeContact.id}/send`, {
            preserveScroll: true,
            onSuccess: () => reset('message'),
        });
    };

    const handleAssignAgent = (agentId: string) => {
        if (!activeContact) return;
        const finalId = agentId === 'unassigned' ? null : agentId;

        router.post(
            `/whatsapp/inbox/${activeContact.id}/assign`,
            { agent_id: finalId },
            { preserveScroll: true }
        );
    };

    const formatSessionHours = (seconds: number) => {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        return `${hours}j ${minutes}m`;
    };

    return (
        <div className="flex h-[calc(100vh-4rem)] overflow-hidden bg-background">
            {/* 1. SIDEBAR DAFTAR KONTAK & OBROLAN */}
            <div className="flex w-80 flex-col border-r border-border bg-card/40 sm:w-96">
                {/* Header & Filter */}
                <div className="border-b border-border p-3">
                    <div className="mb-2 flex items-center justify-between">
                        <h2 className="text-base font-semibold tracking-tight">
                            WhatsApp Chat
                        </h2>
                        <div className="flex items-center gap-1">
                            <Button
                                size="sm"
                                variant={currentFilter === 'all' ? 'secondary' : 'ghost'}
                                className="h-7 text-xs"
                                onClick={() => handleFilterChange('all')}
                            >
                                Semua
                            </Button>
                            <Button
                                size="sm"
                                variant={currentFilter === 'unread' ? 'secondary' : 'ghost'}
                                className="h-7 text-xs"
                                onClick={() => handleFilterChange('unread')}
                            >
                                Belum Dibaca
                            </Button>
                            <Button
                                size="sm"
                                variant={currentFilter === 'mine' ? 'secondary' : 'ghost'}
                                className="h-7 text-xs"
                                onClick={() => handleFilterChange('mine')}
                            >
                                Tugas Saya
                            </Button>
                        </div>
                    </div>

                    {/* Search Input */}
                    <div className="relative">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input
                            placeholder="Cari kontak atau nomor..."
                            className="pl-9 text-sm"
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                    </div>
                </div>

                {/* Contact Items */}
                <div className="flex-1 overflow-y-auto divide-y divide-border/50">
                    {filteredContacts.length === 0 ? (
                        <div className="p-8 text-center text-sm text-muted-foreground">
                            <MessageSquare className="mx-auto mb-2 h-8 w-8 opacity-40" />
                            Belum ada kontak atau pesan masuk.
                        </div>
                    ) : (
                        filteredContacts.map((contact) => {
                            const isSelected = activeContact?.id === contact.id;

                            return (
                                <div
                                    key={contact.id}
                                    onClick={() => handleSelectContact(contact.id)}
                                    className={`flex cursor-pointer items-center gap-3 p-3.5 transition-colors hover:bg-muted/50 ${
                                        isSelected ? 'bg-muted/80' : ''
                                    }`}
                                >
                                    <Avatar className="h-11 w-11 border border-border">
                                        <AvatarFallback className="font-medium">
                                            {contact.name.slice(0, 2).toUpperCase()}
                                        </AvatarFallback>
                                    </Avatar>

                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center justify-between">
                                            <span className="truncate font-medium text-sm">
                                                {contact.name}
                                            </span>
                                            {contact.unread_count > 0 && (
                                                <Badge className="h-5 rounded-full px-1.5 text-xs bg-emerald-600 text-white hover:bg-emerald-600">
                                                    {contact.unread_count}
                                                </Badge>
                                            )}
                                        </div>

                                        <p className="truncate text-xs text-muted-foreground">
                                            {contact.latest_message?.body || contact.phone_number}
                                        </p>

                                        <div className="mt-1 flex items-center gap-2 text-[11px] text-muted-foreground">
                                            <span>{contact.phone_number}</span>
                                            {contact.assigned_agent && (
                                                <Badge variant="outline" className="h-4 px-1 text-[10px]">
                                                    CS: {contact.assigned_agent.name}
                                                </Badge>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            );
                        })
                    )}
                </div>
            </div>

            {/* 2. CHAT ROOM AREA */}
            {activeContact ? (
                <div className="flex flex-1 flex-col overflow-hidden bg-muted/10">
                    {/* Chat Room Top Bar */}
                    <div className="flex items-center justify-between border-b border-border bg-card/60 px-5 py-3 backdrop-blur">
                        <div className="flex items-center gap-3">
                            <Avatar className="h-10 w-10 border border-border">
                                <AvatarFallback>
                                    {activeContact.name.slice(0, 2).toUpperCase()}
                                </AvatarFallback>
                            </Avatar>
                            <div>
                                <h3 className="font-semibold text-sm leading-none">
                                    {activeContact.name}
                                </h3>
                                <p className="mt-1 text-xs text-muted-foreground">
                                    {activeContact.phone_number}
                                </p>
                            </div>
                        </div>

                        {/* Session Timer & Assign CS */}
                        <div className="flex items-center gap-3">
                            {activeContact.is_session_active ? (
                                <Badge
                                    variant="outline"
                                    className="gap-1 border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs"
                                >
                                    <Clock className="h-3 w-3" />
                                    Sesi Aktif: {formatSessionHours(activeContact.session_remaining_seconds)}
                                </Badge>
                            ) : (
                                <Badge
                                    variant="outline"
                                    className="gap-1 border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400 text-xs"
                                >
                                    <AlertTriangle className="h-3 w-3" />
                                    Sesi 24 Jam Berakhir
                                </Badge>
                            )}

                            {/* Multi-Agent CS Assign dropdown */}
                            <div className="w-44">
                                <Select
                                    value={activeContact.assigned_to ? String(activeContact.assigned_to) : 'unassigned'}
                                    onValueChange={handleAssignAgent}
                                >
                                    <SelectTrigger className="h-8 text-xs">
                                        <UserCheck className="mr-1.5 h-3.5 w-3.5 text-muted-foreground" />
                                        <SelectValue placeholder="Pilih CS" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="unassigned">Belum Ditugaskan</SelectItem>
                                        {agents.map((agent) => (
                                            <SelectItem key={agent.id} value={String(agent.id)}>
                                                {agent.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                    </div>

                    {/* Chat Messages Feed */}
                    <div className="flex-1 overflow-y-auto p-4 space-y-3">
                        {messages.length === 0 ? (
                            <div className="py-12 text-center text-sm text-muted-foreground">
                                Mulai percakapan dengan pelanggan ini.
                            </div>
                        ) : (
                            messages.map((msg) => {
                                const isOutbound = msg.direction === 'outbound';

                                return (
                                    <div
                                        key={msg.id}
                                        className={`flex flex-col ${
                                            isOutbound ? 'items-end' : 'items-start'
                                        }`}
                                    >
                                        <div
                                            className={`max-w-md rounded-2xl px-4 py-2.5 shadow-sm text-sm ${
                                                isOutbound
                                                    ? 'bg-emerald-600 text-white dark:bg-emerald-700'
                                                    : 'bg-card border border-border text-foreground'
                                            }`}
                                        >
                                            {/* Info CS jika outbound */}
                                            {isOutbound && msg.sender && (
                                                <span className="mb-0.5 block text-[10px] font-semibold text-emerald-100 opacity-90">
                                                    {msg.sender.name}
                                                </span>
                                            )}

                                            <p className="whitespace-pre-wrap break-words">{msg.body}</p>

                                            {/* Meta Info / Status Tick */}
                                            <div
                                                className={`mt-1 flex items-center justify-end gap-1 text-[10px] ${
                                                    isOutbound ? 'text-emerald-100/80' : 'text-muted-foreground'
                                                }`}
                                            >
                                                <span>
                                                    {new Date(msg.created_at).toLocaleTimeString([], {
                                                        hour: '2-digit',
                                                        minute: '2-digit',
                                                    })}
                                                </span>

                                                {isOutbound && (
                                                    <>
                                                        {msg.status === 'pending' && <Clock className="h-3 w-3 animate-spin" />}
                                                        {msg.status === 'sent' && <Check className="h-3 w-3" />}
                                                        {msg.status === 'delivered' && <CheckCheck className="h-3 w-3" />}
                                                        {msg.status === 'read' && <CheckCheck className="h-3 w-3 text-sky-300" />}
                                                        {msg.status === 'failed' && (
                                                            <span title={msg.error_message || 'Gagal'} className="text-red-300">
                                                                <AlertCircle className="h-3 w-3" />
                                                            </span>
                                                        )}
                                                    </>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                );
                            })
                        )}
                        <div ref={messagesEndRef} />
                    </div>

                    {/* Sesi Warning Bar */}
                    {!activeContact.is_session_active && (
                        <div className="flex items-center gap-2 border-t border-amber-500/20 bg-amber-500/10 px-4 py-2 text-xs text-amber-700 dark:text-amber-400">
                            <AlertTriangle className="h-4 w-4 shrink-0" />
                            <span>
                                Sesi 24 jam Meta telah berakhir. Pesan teks bebas mungkin akan ditolak Meta sampai pelanggan mengirim pesan kembali atau Anda menggunakan Template Resmi.
                            </span>
                        </div>
                    )}

                    {/* Input Box Footer */}
                    <form
                        onSubmit={handleSendMessage}
                        className="flex items-center gap-2 border-t border-border bg-card p-3"
                    >
                        <Input
                            placeholder="Ketik pesan balasan..."
                            value={data.message}
                            onChange={(e) => setData('message', e.target.value)}
                            disabled={processing}
                            className="flex-1"
                        />
                        <Button
                            type="submit"
                            size="icon"
                            disabled={processing || !data.message.trim()}
                            className="h-10 w-10 shrink-0 bg-emerald-600 hover:bg-emerald-700 text-white"
                        >
                            <Send className="h-4 w-4" />
                        </Button>
                    </form>
                </div>
            ) : (
                <div className="flex flex-1 flex-col items-center justify-center text-muted-foreground">
                    <MessageSquare className="mb-3 h-12 w-12 opacity-30" />
                    <h3 className="font-medium text-base">Pilih Obrolan</h3>
                    <p className="text-sm">Pilih kontak di sebelah kiri untuk melihat percakapan.</p>
                </div>
            )}
        </div>
    );
}

export default function WhatsAppInbox(props: Props) {
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="WhatsApp Live Chat" />
            <WhatsAppChatContent {...props} />
        </AppLayout>
    );
}