import { useState } from 'react';
import { Link, useForm } from '@inertiajs/react';
import {
    AdminPage,
    Pagination,
    Errors,
    date,
    type PageData,
} from '@/components/admin-page';
import {
    Mail,
    Phone,
    Calendar,
    CheckCircle2,
    Clock,
    Inbox,
    Send,
    ExternalLink,
    Search,
    MessageSquare,
    Eye,
    X,
} from 'lucide-react';

interface Message {
    id: number;
    name: string;
    email: string;
    phone_number: string | null;
    message: string;
    is_read: boolean;
    created_at: string;
}

interface MessagesProps {
    messages: PageData<Message>;
    currentStatus?: string;
    stats?: {
        total: number;
        unread: number;
        read: number;
    };
}

export default function Messages({
    messages,
    currentStatus = 'ALL',
    stats = { total: 0, unread: 0, read: 0 },
}: MessagesProps) {
    const form = useForm({});
    const [selectedMessage, setSelectedMessage] = useState<Message | null>(
        null,
    );
    const [searchFilter, setSearchFilter] = useState('');

    const filteredMessages = messages.data.filter((m) => {
        if (!searchFilter.trim()) return true;
        const q = searchFilter.toLowerCase();
        return (
            m.name.toLowerCase().includes(q) ||
            m.email.toLowerCase().includes(q) ||
            (m.phone_number && m.phone_number.includes(q)) ||
            m.message.toLowerCase().includes(q)
        );
    });

    const handleOpenDetail = (m: Message) => {
        setSelectedMessage(m);
        // Otomatis tandai dibaca jika belum
        if (!m.is_read) {
            form.put(`/admin/messages/${m.id}/read`, { preserveScroll: true });
            m.is_read = true;
        }
    };

    return (
        <AdminPage
            title="Pesan Masuk & Pengaduan"
            description="Pantau dan tindak lanjuti aspirasi, pertanyaan, atau aduan yang disampaikan melalui formulir kontak publik."
            path="/admin/messages"
        >
            <Errors errors={form.errors} />

            {/* Statistik Ringkas */}
            <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
                <Link
                    href="/admin/messages?status=ALL"
                    className={`rounded-xl border p-4 transition-all ${
                        currentStatus === 'ALL'
                            ? 'border-[#7A1F2A] bg-white shadow-xs'
                            : 'border-[#E7E3DF] bg-white/80 hover:border-[#B39A9D]'
                    }`}
                >
                    <div className="flex items-center justify-between">
                        <span className="text-xs font-semibold tracking-wider text-[#5F5F64] uppercase">
                            Semua Pesan
                        </span>
                        <Inbox className="h-4 w-4 text-[#7A1F2A]" />
                    </div>
                    <p className="mt-2 text-2xl font-bold text-[#17171A]">
                        {stats.total}
                    </p>
                </Link>

                <Link
                    href="/admin/messages?status=UNREAD"
                    className={`rounded-xl border p-4 transition-all ${
                        currentStatus === 'UNREAD'
                            ? 'border-[#7A1F2A] bg-white shadow-xs'
                            : 'border-[#E7E3DF] bg-white/80 hover:border-[#B39A9D]'
                    }`}
                >
                    <div className="flex items-center justify-between">
                        <span className="text-xs font-semibold tracking-wider text-[#B91C1C] uppercase">
                            Belum Dibaca
                        </span>
                        <Clock className="h-4 w-4 text-[#B91C1C]" />
                    </div>
                    <p className="mt-2 text-2xl font-bold text-[#B91C1C]">
                        {stats.unread}
                    </p>
                </Link>

                <Link
                    href="/admin/messages?status=READ"
                    className={`rounded-xl border p-4 transition-all ${
                        currentStatus === 'READ'
                            ? 'border-[#7A1F2A] bg-white shadow-xs'
                            : 'border-[#E7E3DF] bg-white/80 hover:border-[#B39A9D]'
                    }`}
                >
                    <div className="flex items-center justify-between">
                        <span className="text-xs font-semibold tracking-wider text-[#2F7D4A] uppercase">
                            Sudah Ditanggapi / Dibaca
                        </span>
                        <CheckCircle2 className="h-4 w-4 text-[#2F7D4A]" />
                    </div>
                    <p className="mt-2 text-2xl font-bold text-[#2F7D4A]">
                        {stats.read}
                    </p>
                </Link>
            </div>

            {/* Filter Tab & Search Bar */}
            <div className="mb-6 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
                <nav className="inline-flex rounded-xl border border-[#E7E3DF] bg-[#F0ECE8] p-1">
                    <Link
                        href="/admin/messages?status=ALL"
                        className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition-all ${
                            currentStatus === 'ALL'
                                ? 'bg-white text-[#7A1F2A] shadow-xs'
                                : 'text-[#5F5F64] hover:text-[#17171A]'
                        }`}
                    >
                        Semua ({stats.total})
                    </Link>
                    <Link
                        href="/admin/messages?status=UNREAD"
                        className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition-all ${
                            currentStatus === 'UNREAD'
                                ? 'bg-white text-[#B91C1C] shadow-xs'
                                : 'text-[#5F5F64] hover:text-[#17171A]'
                        }`}
                    >
                        Belum Dibaca ({stats.unread})
                    </Link>
                    <Link
                        href="/admin/messages?status=READ"
                        className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition-all ${
                            currentStatus === 'READ'
                                ? 'bg-white text-[#2F7D4A] shadow-xs'
                                : 'text-[#5F5F64] hover:text-[#17171A]'
                        }`}
                    >
                        Sudah Dibaca ({stats.read})
                    </Link>
                </nav>

                <div className="relative min-w-60">
                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[#87878D]" />
                    <input
                        type="text"
                        placeholder="Cari pengirim atau isi..."
                        value={searchFilter}
                        onChange={(e) => setSearchFilter(e.target.value)}
                        className="h-9 w-full rounded-lg border border-[#D7D1CC] bg-white pr-3 pl-9 text-xs text-[#17171A] placeholder-[#87878D] focus:border-[#7A1F2A] focus:outline-hidden"
                    />
                </div>
            </div>

            {/* Daftar Pesan Masuk */}
            <div className="space-y-3.5">
                {filteredMessages.length ? (
                    filteredMessages.map((m) => {
                        const waNumber = m.phone_number?.replace(/\D/g, '');
                        return (
                            <article
                                key={m.id}
                                className={`rounded-xl border p-5 transition-all ${
                                    !m.is_read
                                        ? 'border-[#7A1F2A]/30 bg-white shadow-xs ring-1 ring-[#7A1F2A]/10'
                                        : 'border-[#E7E3DF] bg-white hover:border-[#B39A9D]'
                                }`}
                            >
                                <div className="flex flex-col justify-between gap-4 md:flex-row md:items-start">
                                    <div className="min-w-0 flex-1 space-y-1.5">
                                        <div className="flex flex-wrap items-center gap-2">
                                            <span
                                                className={`rounded-full px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase ${
                                                    !m.is_read
                                                        ? 'border border-[#FCA5A5] bg-[#FEF2F2] text-[#B91C1C]'
                                                        : 'border border-[#E5E7EB] bg-[#F3F4F6] text-[#6B7280]'
                                                }`}
                                            >
                                                {!m.is_read
                                                    ? 'Belum Dibaca'
                                                    : 'Sudah Dibaca'}
                                            </span>

                                            <span className="flex items-center gap-1 font-mono text-xs text-[#87878D]">
                                                <Calendar className="h-3.5 w-3.5 text-[#87878D]" />
                                                {date(m.created_at)}
                                            </span>
                                        </div>

                                        <h3 className="text-base font-bold text-[#17171A]">
                                            {m.name}
                                        </h3>

                                        {/* Snippet Pesan */}
                                        <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-[#4B5563]">
                                            {m.message}
                                        </p>

                                        {/* Kontak Pengirim */}
                                        <div className="flex flex-wrap items-center gap-3 pt-2 text-xs text-[#5F5F64]">
                                            <span className="inline-flex items-center gap-1 font-mono">
                                                <Mail className="h-3.5 w-3.5 text-[#7A1F2A]" />
                                                {m.email}
                                            </span>
                                            {m.phone_number && (
                                                <span className="inline-flex items-center gap-1 font-mono">
                                                    <Phone className="h-3.5 w-3.5 text-[#7A1F2A]" />
                                                    {m.phone_number}
                                                </span>
                                            )}
                                        </div>
                                    </div>

                                    {/* Action Buttons */}
                                    <div className="flex shrink-0 flex-wrap items-center gap-2 border-t border-[#F0ECE8] pt-2 md:flex-col md:items-end md:border-t-0 md:pt-0">
                                        <button
                                            type="button"
                                            onClick={() => handleOpenDetail(m)}
                                            className="inline-flex items-center gap-1.5 rounded-lg border border-[#D7D1CC] px-3 py-1.5 text-xs font-semibold text-[#17171A] transition-all hover:bg-[#FAF9F7]"
                                        >
                                            <Eye className="h-3.5 w-3.5 text-[#7A1F2A]" />
                                            <span>Buka Detail</span>
                                        </button>

                                        <a
                                            href={`mailto:${encodeURIComponent(m.email)}?subject=Tanggapan%20Fakultas%20Teknik%20UNMA&body=Halo%20${encodeURIComponent(m.name)},%0D%0A%0D%0AMenanggapi%20pesan%20Anda:%0D%0A`}
                                            className="inline-flex items-center gap-1.5 rounded-lg bg-[#7A1F2A] px-3 py-1.5 text-xs font-semibold text-white shadow-xs transition-all hover:bg-[#681923]"
                                        >
                                            <Send className="h-3 w-3" />
                                            <span>Balas Email</span>
                                        </a>

                                        {waNumber && (
                                            <a
                                                href={`https://wa.me/${waNumber}?text=Halo%20${encodeURIComponent(m.name)},%20kami%20dari%20Sekretariat%20Fakultas%20Teknik%20UNMA%20menanggapi%20pesan%20Anda.`}
                                                target="_blank"
                                                rel="noreferrer"
                                                className="inline-flex items-center gap-1 text-[11px] font-semibold text-[#2F7D4A] hover:underline"
                                            >
                                                <span>WhatsApp</span>
                                                <ExternalLink className="h-3 w-3" />
                                            </a>
                                        )}
                                    </div>
                                </div>
                            </article>
                        );
                    })
                ) : (
                    <div className="rounded-2xl border border-[#E7E3DF] bg-white p-12 text-center shadow-xs">
                        <MessageSquare className="mx-auto mb-3 h-10 w-10 text-[#87878D]" />
                        <h4 className="text-base font-bold text-[#17171A]">
                            Tidak Ada Pesan Masuk
                        </h4>
                        <p className="mt-1 text-xs text-[#5F5F64]">
                            {searchFilter
                                ? 'Tidak ditemukan pesan yang cocok dengan kata kunci pencarian Anda.'
                                : 'Belum ada pesan atau pertanyaan yang masuk dari formulir kontak fakultas.'}
                        </p>
                    </div>
                )}
            </div>

            <div className="mt-6">
                <Pagination page={messages} />
            </div>

            {/* MODAL DETAIL PESAN */}
            {selectedMessage && (
                <div
                    role="dialog"
                    aria-modal="true"
                    aria-labelledby="message-modal-title"
                    className="fixed inset-0 z-50 flex animate-in items-center justify-center bg-black/60 p-4 backdrop-blur-xs duration-200 fade-in"
                >
                    <div className="relative w-full max-w-lg animate-in rounded-2xl border border-[#E7E3DF] bg-white p-6 shadow-2xl duration-200 zoom-in-95 sm:p-7">
                        {/* Close button */}
                        <button
                            type="button"
                            onClick={() => setSelectedMessage(null)}
                            className="absolute top-4 right-4 rounded-lg p-1.5 text-[#87878D] transition-colors hover:bg-[#FAF9F7] hover:text-[#17171A]"
                            aria-label="Tutup detail pesan"
                        >
                            <X className="h-4 w-4" />
                        </button>

                        <div className="mb-2 flex items-center gap-2">
                            <span
                                className={`rounded-full px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase ${
                                    !selectedMessage.is_read
                                        ? 'bg-[#FEF2F2] text-[#B91C1C]'
                                        : 'bg-[#F3F4F6] text-[#6B7280]'
                                }`}
                            >
                                {selectedMessage.is_read
                                    ? 'Sudah Dibaca'
                                    : 'Baru Masuk'}
                            </span>
                            <span className="font-mono text-xs text-[#87878D]">
                                {date(selectedMessage.created_at)}
                            </span>
                        </div>

                        <h3
                            id="message-modal-title"
                            className="mb-1 text-lg font-bold text-[#17171A]"
                        >
                            {selectedMessage.name}
                        </h3>

                        {/* Rincian Kontak */}
                        <div className="mb-5 space-y-1 rounded-xl border border-[#E7E3DF] bg-[#FAF9F7] p-3 text-xs">
                            <div className="flex items-center gap-2 text-[#5F5F64]">
                                <Mail className="h-3.5 w-3.5 text-[#7A1F2A]" />
                                <span className="font-mono">
                                    {selectedMessage.email}
                                </span>
                            </div>
                            {selectedMessage.phone_number && (
                                <div className="flex items-center gap-2 text-[#5F5F64]">
                                    <Phone className="h-3.5 w-3.5 text-[#7A1F2A]" />
                                    <span className="font-mono">
                                        {selectedMessage.phone_number}
                                    </span>
                                </div>
                            )}
                        </div>

                        {/* Isi Pesan Lengkap */}
                        <div className="mb-6">
                            <p className="mb-2 text-xs font-bold tracking-wider text-[#87630E] uppercase">
                                Isi Pesan / Pengaduan
                            </p>
                            <div className="max-h-60 overflow-y-auto rounded-xl border border-[#E7E3DF] bg-white p-4 text-sm leading-relaxed whitespace-pre-wrap text-[#17171A]">
                                {selectedMessage.message}
                            </div>
                        </div>

                        {/* Action Hubungi Balik */}
                        <div className="flex flex-wrap items-center justify-end gap-2.5 border-t border-[#E7E3DF] pt-4">
                            <button
                                type="button"
                                onClick={() => setSelectedMessage(null)}
                                className="rounded-xl border border-[#D7D1CC] px-4 py-2 text-xs font-semibold text-[#5F5F64] hover:bg-[#FAF9F7]"
                            >
                                Tutup
                            </button>

                            <a
                                href={`mailto:${encodeURIComponent(selectedMessage.email)}?subject=Tanggapan%20Fakultas%20Teknik%20UNMA&body=Halo%20${encodeURIComponent(selectedMessage.name)},%0D%0A%0D%0AMenanggapi%20pesan%20Anda:%0D%0A`}
                                className="inline-flex items-center gap-1.5 rounded-xl bg-[#7A1F2A] px-4 py-2 text-xs font-semibold text-white shadow-xs transition-all hover:bg-[#681923]"
                            >
                                <Send className="h-3.5 w-3.5" />
                                <span>Balas via Email</span>
                            </a>
                        </div>
                    </div>
                </div>
            )}
        </AdminPage>
    );
}