"use client";

import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { ArrowLeft, Plus, Edit, Trash2, Link as LinkIcon, Clock, Megaphone } from "lucide-react";
import {
    useSocializations,
    useCreateSocialization,
    useUpdateSocialization,
    useDeleteSocialization,
    Socialization,
} from "@/hooks/useSocializations";

const formatDescriptionHtml = (description: string | null | undefined): string => {
    if (!description) return "";

    let formatted = description.replace(
        /<a\s+(?![^>]*\btarget=)([^>]*?)>/gi,
        '<a target="_blank" rel="noopener noreferrer" $1>'
    );

    formatted = formatted.replace(
        /(^|[\s>])(https?:\/\/[^\s<"]+)/gi,
        '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>'
    );

    return formatted;
};

const formatDisplayedDate = (displayed: string | null): string => {
    if (!displayed) return "Belum pernah ditampilkan";
    const date = new Date(displayed);
    if (isNaN(date.getTime())) return displayed;
    return new Intl.DateTimeFormat("id-ID", {
        timeZone: "Asia/Jakarta",
        day: "2-digit",
        month: "short",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
    }).format(date);
};

const SocializationView = () => {
    const { data: items, isLoading } = useSocializations();
    const createMutation = useCreateSocialization();
    const updateMutation = useUpdateSocialization();
    const deleteMutation = useDeleteSocialization();

    const [isEditing, setIsEditing] = useState(false);
    const [currentItem, setCurrentItem] = useState<Partial<Socialization>>({
        title: "",
        description: "",
        status: 1,
    });
    const [activeTab, setActiveTab] = useState<"all" | 1 | 0>("all");
    const [itemToDelete, setItemToDelete] = useState<number | null>(null);

    // Helper state for inserting link into description
    const [showLinkInput, setShowLinkInput] = useState(false);
    const [linkText, setLinkText] = useState("");
    const [linkUrl, setLinkUrl] = useState("");

    const activeCount = items?.filter((i) => Number(i.status) === 1)?.length || 0;
    const inactiveCount = items?.filter((i) => Number(i.status) === 0)?.length || 0;

    const handleSave = async () => {
        if (!currentItem.title?.trim()) return;

        if (currentItem.id) {
            await updateMutation.mutateAsync({
                id: currentItem.id,
                payload: {
                    title: currentItem.title.trim(),
                    description: currentItem.description || "",
                    status: currentItem.status ?? 1,
                },
            });
        } else {
            await createMutation.mutateAsync({
                title: currentItem.title.trim(),
                description: currentItem.description || "",
                status: currentItem.status ?? 1,
            });
        }

        setIsEditing(false);
        setCurrentItem({ title: "", description: "", status: 1 });
        setShowLinkInput(false);
    };

    const handleInsertLink = () => {
        if (!linkUrl.trim()) return;
        const label = linkText.trim() || linkUrl.trim();
        const anchorTag = `<a href="${linkUrl.trim()}">${label}</a>`;
        setCurrentItem((prev) => ({
            ...prev,
            description: prev.description ? `${prev.description} ${anchorTag}` : anchorTag,
        }));
        setLinkText("");
        setLinkUrl("");
        setShowLinkInput(false);
    };

    const handleToggleStatus = (item: Socialization, checked: boolean) => {
        updateMutation.mutate({
            id: item.id,
            payload: {
                status: checked ? 1 : 0,
            },
        });
    };

    const confirmDelete = async () => {
        if (itemToDelete !== null) {
            await deleteMutation.mutateAsync(itemToDelete);
            setItemToDelete(null);
        }
    };

    if (isEditing) {
        return (
            <div className="flex-1 w-full flex flex-col h-full bg-[#f0f2f5] dark:bg-[#111b21] overflow-y-auto">
                <div className="flex items-center p-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-[#202c33] sticky top-0 z-10 shadow-sm">
                    <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => {
                            setIsEditing(false);
                            setShowLinkInput(false);
                        }}
                        className="mr-2"
                    >
                        <ArrowLeft className="w-5 h-5" />
                    </Button>
                    <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                        {currentItem.id ? "Edit Sosialisasi" : "Tambah Sosialisasi"}
                    </h2>
                </div>

                <div className="p-6 max-w-4xl w-full mx-auto space-y-6">
                    <div className="bg-white dark:bg-[#202c33] p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800 space-y-5">
                        <div>
                            <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">
                                Judul Sosialisasi <span className="text-red-500">*</span>
                            </label>
                            <Input
                                value={currentItem.title || ""}
                                onChange={(e) =>
                                    setCurrentItem({ ...currentItem, title: e.target.value })
                                }
                                placeholder="Contoh: Pesan yang masuk sebelum jam tutup operasional wajib dibalas"
                                className="bg-white dark:bg-[#1a2328]"
                            />
                        </div>

                        <div>
                            <div className="flex items-center justify-between mb-2">
                                <label className="block text-sm font-medium text-gray-900 dark:text-gray-100">
                                    Deskripsi
                                </label>
                                <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setShowLinkInput((prev) => !prev)}
                                    className="h-7 text-xs gap-1.5"
                                >
                                    <LinkIcon className="w-3.5 h-3.5" />
                                    Sisipkan Link
                                </Button>
                            </div>

                            {showLinkInput && (
                                <div className="mb-3 p-3 rounded-md bg-gray-50 dark:bg-[#1a2328] border border-gray-200 dark:border-gray-700 space-y-3">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div>
                                            <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
                                                Teks Link
                                            </label>
                                            <Input
                                                value={linkText}
                                                onChange={(e) => setLinkText(e.target.value)}
                                                placeholder="Contoh: panduan berikut"
                                                className="h-8 text-xs bg-white dark:bg-[#202c33]"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
                                                URL Link
                                            </label>
                                            <Input
                                                value={linkUrl}
                                                onChange={(e) => setLinkUrl(e.target.value)}
                                                placeholder="https://..."
                                                className="h-8 text-xs bg-white dark:bg-[#202c33]"
                                            />
                                        </div>
                                    </div>
                                    <div className="flex justify-end gap-2">
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="sm"
                                            className="h-7 text-xs"
                                            onClick={() => setShowLinkInput(false)}
                                        >
                                            Batal
                                        </Button>
                                        <Button
                                            type="button"
                                            size="sm"
                                            className="h-7 text-xs bg-teal-600 hover:bg-teal-700 text-white"
                                            onClick={handleInsertLink}
                                            disabled={!linkUrl.trim()}
                                        >
                                            Tambahkan ke Deskripsi
                                        </Button>
                                    </div>
                                </div>
                            )}

                            <Textarea
                                rows={4}
                                value={currentItem.description || ""}
                                onChange={(e) =>
                                    setCurrentItem({ ...currentItem, description: e.target.value })
                                }
                                placeholder='Masukkan deskripsi sosialisasi (bisa menggunakan URL langsung atau tag HTML <a href="https://...">teks link</a>)'
                                className="bg-white dark:bg-[#1a2328]"
                            />
                            <p className="text-xs text-gray-500 mt-1.5">
                                Mendukung URL langsung maupun HTML link seperti{" "}
                                <code className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded">
                                    &lt;a href=&quot;https://...&quot;&gt;panduan berikut&lt;/a&gt;
                                </code>
                            </p>
                        </div>

                        <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">
                                    Status Sosialisasi
                                </h4>
                                <p className="text-xs text-gray-500 mt-0.5">
                                    Hanya sosialisasi dengan status Aktif yang akan ditampilkan secara bergantian setiap jam operasional.
                                </p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Switch
                                    checked={Number(currentItem.status ?? 1) === 1}
                                    onCheckedChange={(checked) =>
                                        setCurrentItem({ ...currentItem, status: checked ? 1 : 0 })
                                    }
                                />
                                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {Number(currentItem.status ?? 1) === 1 ? "Aktif" : "Tidak Aktif"}
                                </span>
                            </div>
                        </div>

                        {/* Live Preview Banner */}
                        <div>
                            <label className="block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">
                                Preview Tampilan Panel Sosialisasi
                            </label>
                            <div className="w-full bg-white dark:bg-[#202c33] border border-gray-300 dark:border-gray-700 rounded-md px-5 py-3 shadow-sm flex items-center justify-between gap-4">
                                <div className="flex-1 min-w-0 pr-2">
                                    <h3 className="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100 leading-snug">
                                        {currentItem.title || "Judul Sosialisasi..."}
                                    </h3>
                                    {currentItem.description && (
                                        <div
                                            className="text-xs md:text-sm text-gray-700 dark:text-gray-300 mt-1 leading-relaxed [&_a]:text-blue-600 dark:[&_a]:text-blue-400 [&_a]:underline [&_a]:font-medium"
                                            dangerouslySetInnerHTML={{
                                                __html: formatDescriptionHtml(currentItem.description),
                                            }}
                                        />
                                    )}
                                </div>
                                <div className="flex items-start gap-3 shrink-0">
                                    <svg
                                        width="40"
                                        height="36"
                                        viewBox="0 0 40 36"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                        className="w-9 h-8 shrink-0 self-center"
                                    >
                                        <path
                                            d="M17.4 3.2C18.55 1.2 21.45 1.2 22.6 3.2L37.32 28.7C38.47 30.7 37.03 33.2 34.72 33.2H5.28C2.97 33.2 1.53 30.7 2.68 28.7L17.4 3.2Z"
                                            fill="#FFEB00"
                                            stroke="#1F2937"
                                            strokeWidth="2.5"
                                            strokeLinejoin="round"
                                        />
                                        <path
                                            d="M20 12V21.5"
                                            stroke="#1F2937"
                                            strokeWidth="3"
                                            strokeLinecap="round"
                                        />
                                        <circle cx="20" cy="27" r="1.8" fill="#1F2937" />
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div className="flex justify-end gap-3 pt-2">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => {
                                    setIsEditing(false);
                                    setShowLinkInput(false);
                                }}
                            >
                                Batal
                            </Button>
                            <Button
                                onClick={handleSave}
                                disabled={
                                    createMutation.isPending ||
                                    updateMutation.isPending ||
                                    !currentItem.title?.trim()
                                }
                                className="bg-teal-600 hover:bg-teal-700 text-white"
                            >
                                {createMutation.isPending || updateMutation.isPending
                                    ? "Menyimpan..."
                                    : "Simpan Sosialisasi"}
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    const filteredItems = items?.filter((item) =>
        activeTab === "all" ? true : Number(item.status) === activeTab
    );

    return (
        <div className="flex-1 w-full flex flex-col h-full bg-[#f0f2f5] dark:bg-[#111b21]">
            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-[#202c33] shadow-sm">
                <div className="flex items-center gap-3">
                    <Megaphone className="w-5 h-5 text-teal-600 dark:text-teal-400" />
                    <div>
                        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                            Manajemen Sosialisasi
                        </h2>
                        <p className="text-xs text-gray-500">
                            Kelola daftar pesan sosialisasi yang tampil setiap 1 jam sekali selama jam operasional.
                        </p>
                    </div>
                </div>
                <Button
                    onClick={() => {
                        setCurrentItem({ title: "", description: "", status: 1 });
                        setIsEditing(true);
                    }}
                    className="bg-teal-600 hover:bg-teal-700 text-white"
                >
                    <Plus className="w-4 h-4 mr-2" />
                    Tambah Sosialisasi
                </Button>
            </div>

            {/* Filter Tabs */}
            <div className="flex border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a2328] px-6 pt-2">
                <button
                    className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors cursor-pointer ${
                        activeTab === "all"
                            ? "border-teal-500 text-teal-600 dark:text-teal-400"
                            : "border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                    }`}
                    onClick={() => setActiveTab("all")}
                >
                    Semua ({items?.length || 0})
                </button>
                <button
                    className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors cursor-pointer ${
                        activeTab === 1
                            ? "border-teal-500 text-teal-600 dark:text-teal-400"
                            : "border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                    }`}
                    onClick={() => setActiveTab(1)}
                >
                    Aktif ({activeCount})
                </button>
                <button
                    className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors cursor-pointer ${
                        activeTab === 0
                            ? "border-teal-500 text-teal-600 dark:text-teal-400"
                            : "border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                    }`}
                    onClick={() => setActiveTab(0)}
                >
                    Tidak Aktif ({inactiveCount})
                </button>
            </div>

            <div className="flex-1 overflow-y-auto p-6">
                {isLoading ? (
                    <div className="text-center py-10 text-gray-500">Memuat data sosialisasi...</div>
                ) : (
                    <div className="grid grid-cols-1 gap-4 max-w-5xl mx-auto">
                        {filteredItems?.map((item) => {
                            const isActive = Number(item.status) === 1;
                            return (
                                <div
                                    key={item.id}
                                    className="p-5 bg-white dark:bg-[#202c33] border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4"
                                >
                                    <div className="flex-1 min-w-0 space-y-1.5">
                                        <div className="flex items-center gap-2.5 flex-wrap">
                                            <span
                                                className={`inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full ${
                                                    isActive
                                                        ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300"
                                                        : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400"
                                                }`}
                                            >
                                                {isActive ? "Aktif" : "Tidak Aktif"}
                                            </span>
                                            <span className="inline-flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
                                                <Clock className="w-3.5 h-3.5" />
                                                Terakhir tampil: {formatDisplayedDate(item.displayed)}
                                            </span>
                                        </div>

                                        <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
                                            {item.title}
                                        </h3>

                                        {item.description && (
                                            <div
                                                className="text-sm text-gray-600 dark:text-gray-300 [&_a]:text-blue-600 dark:[&_a]:text-blue-400 [&_a]:underline [&_a]:font-medium"
                                                dangerouslySetInnerHTML={{
                                                    __html: formatDescriptionHtml(item.description),
                                                }}
                                            />
                                        )}
                                    </div>

                                    <div className="flex items-center gap-3 shrink-0 self-end md:self-center">
                                        <div className="flex items-center gap-2 pr-2 border-r border-gray-200 dark:border-gray-700">
                                            <Switch
                                                checked={isActive}
                                                onCheckedChange={(checked) =>
                                                    handleToggleStatus(item, checked)
                                                }
                                                title={isActive ? "Nonaktifkan" : "Aktifkan"}
                                            />
                                        </div>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => {
                                                setCurrentItem(item);
                                                setIsEditing(true);
                                            }}
                                            title="Edit Sosialisasi"
                                        >
                                            <Edit className="w-4 h-4" />
                                        </Button>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="text-red-500 hover:text-red-600"
                                            onClick={() => setItemToDelete(item.id)}
                                            title="Hapus Sosialisasi"
                                        >
                                            <Trash2 className="w-4 h-4" />
                                        </Button>
                                    </div>
                                </div>
                            );
                        })}

                        {filteredItems?.length === 0 && (
                            <div className="text-center py-12 bg-white dark:bg-[#202c33] rounded-lg border border-gray-200 dark:border-gray-800 text-gray-500">
                                Belum ada data sosialisasi untuk filter ini.
                            </div>
                        )}
                    </div>
                )}
            </div>

            <AlertDialog
                open={itemToDelete !== null}
                onOpenChange={(open) => !open && setItemToDelete(null)}
            >
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Hapus Sosialisasi?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Tindakan ini tidak dapat dibatalkan. Data sosialisasi ini akan dihapus secara permanen.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel onClick={() => setItemToDelete(null)}>
                            Batal
                        </AlertDialogCancel>
                        <AlertDialogAction
                            onClick={confirmDelete}
                            className="bg-red-500 hover:bg-red-600 text-white"
                        >
                            Hapus
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </div>
    );
};

export default SocializationView;