import React, { useEffect, useRef, useState } from "react";
import Icon from "./Icon";
import { useApp } from "../context/AppContext";
import api, { errorMessage } from "../api/client";
import useApi from "../hooks/useApi";

// Complaint types come from the token codes set up in the admin panel; give each the
// design's icon and colours by what it is about.
const LOOKS = [
    { test: /no internet|internet|no line|line down|offline|disconnect|link down|ইন্টারনেট|লাইন নেই/i, icon: "wifi-off", color: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
    { test: /slow|speed|latency|ping|buffer|স্পিড|ধীর/i, icon: "gauge", color: "text-orange-600", bg: "bg-orange-50", border: "border-orange-200" },
    { test: /bill|payment|invoice|recharge|balance|বিল|পেমেন্ট/i, icon: "credit-card", color: "text-emerald-600", bg: "bg-emerald-50", border: "border-emerald-200" },
    { test: /package|upgrade|downgrade|প্যাকেজ/i, icon: "package", color: "text-indigo-600", bg: "bg-indigo-50", border: "border-indigo-200" },
    { test: /router|onu|ont|device|hardware|wifi|রাউটার/i, icon: "router", color: "text-violet-600", bg: "bg-violet-50", border: "border-violet-200" },
    { test: /cable|fiber|fibre|wire|physical|shift|ক্যাবল/i, icon: "cable", color: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
];
const OTHER = { icon: "help-circle", color: "text-slate-600", bg: "bg-slate-50", border: "border-slate-200" };

export function complaintLook(type) {
    const text = `${type.label} ${type.description || ""}`;
    return LOOKS.find((look) => look.test.test(text)) || OTHER;
}

export default function TicketModal() {
    const { t, ticketModalOpen, closeTicketModal, toast, invalidateApi } = useApp();
    const { data: types } = useApi(ticketModalOpen ? "tickets/types" : null);
    const [complainType, setComplainType] = useState("");
    const [message, setMessage] = useState("");
    const [listOpen, setListOpen] = useState(false);
    const [phase, setPhase] = useState("idle"); // idle | sending | sent
    const listRef = useRef(null);
    const triggerRef = useRef(null);

    const reset = () => {
        setComplainType("");
        setMessage("");
        setListOpen(false);
        setPhase("idle");
    };

    const close = () => {
        closeTicketModal();
        reset();
    };

    useEffect(() => {
        if (!ticketModalOpen) return undefined;
        const onKey = (e) => { if (e.key === "Escape") close(); };
        document.addEventListener("keydown", onKey);
        return () => document.removeEventListener("keydown", onKey);
    }, [ticketModalOpen]); // eslint-disable-line react-hooks/exhaustive-deps

    useEffect(() => {
        if (!listOpen) return undefined;
        const onClick = (e) => {
            if (listRef.current && listRef.current.contains(e.target)) return;
            if (triggerRef.current && triggerRef.current.contains(e.target)) return;
            setListOpen(false);
        };
        document.addEventListener("click", onClick);
        return () => document.removeEventListener("click", onClick);
    }, [listOpen]);

    const selected = (types || []).find((tp) => String(tp.value) === String(complainType));
    const canSend = !!complainType && !!message.trim() && phase === "idle";

    const submit = async () => {
        if (!canSend) return;
        setPhase("sending");
        try {
            await api.post("tickets", { type: complainType, description: message.trim() });
            setPhase("sent");
            invalidateApi("tickets", "dashboard");
            toast(t("ticket_created_toast"));
            setTimeout(close, 1100);
        } catch (error) {
            setPhase("idle");
            toast(errorMessage(error) || t("error_generic"));
        }
    };

    const count = message.length;

    return (
        <div id="ticketModal" onClick={(e) => { if (e.target.id === "ticketModal") close(); }}
            className={`fixed inset-0 z-[70] ${ticketModalOpen ? "flex" : "hidden"} items-center justify-center p-4 modal-backdrop`}>
            <div className="w-full max-w-[560px] max-h-[92vh] flex flex-col bg-white rounded-2xl shadow-2xl overflow-hidden">
                <div className="px-5 py-4 border-b border-slate-100 flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 grid place-items-center">
                        <Icon name="ticket" className="w-5 h-5 text-white" />
                    </div>
                    <div className="min-w-0 flex-1">
                        <h3 id="ticketModalTitle" className="font-extrabold text-slate-800">{t("create_ticket")}</h3>
                        <p id="ticketModalSub" className="text-xs text-slate-500">{t("reply_24h")}</p>
                    </div>
                    <button onClick={close} className="p-2 rounded-xl hover:bg-slate-100 text-slate-500">
                        <Icon name="x" className="w-5 h-5" />
                    </button>
                </div>
                <div id="ticketBody" className="p-5 overflow-y-auto space-y-5">
                    <div>
                        <label id="complaintTypeLabel" className="flex items-center gap-1.5 text-xs font-bold text-slate-700 mb-2">
                            <Icon name="tag" className="w-3.5 h-3.5 text-indigo-600" /> {t("complaint_type")}
                        </label>
                        <div className="relative">
                            <button ref={triggerRef} type="button" onClick={() => setListOpen((open) => !open)} className="w-full flex items-center justify-between gap-3 px-4 py-3 rounded-xl border border-slate-200 hover:border-indigo-300 text-left">
                                <span id="typeLabel" className={selected ? "text-slate-800 font-semibold" : "text-slate-400 font-medium"}>
                                    {selected ? selected.label : t("select_complaint_type")}
                                </span>
                                <Icon name="chevron-down" className="w-4 h-4 text-slate-400" />
                            </button>
                            <div ref={listRef} id="typeList" className={`${listOpen ? "" : "hidden"} absolute left-0 right-0 top-[calc(100%+6px)] z-20 bg-white border border-slate-200 rounded-xl shadow-xl p-2 max-h-64 overflow-y-auto`}>
                                {types && !types.length && (
                                    <p className="py-6 text-center text-xs text-slate-400">{t("no_complaint_types")}</p>
                                )}
                                {!types && (
                                    <div className="py-6 flex justify-center"><span className="w-4 h-4 border-2 border-indigo-200 border-t-indigo-600 rounded-full spin"></span></div>
                                )}
                                {(types || []).map((tp) => {
                                    const look = complaintLook(tp);
                                    return (
                                        <button key={tp.value} onClick={() => { setComplainType(String(tp.value)); setListOpen(false); }} className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-indigo-50 transition-colors text-left">
                                            <span className={`p-2 rounded-lg ${look.bg} ${look.border} border shrink-0`}><Icon name={look.icon} className={`w-4 h-4 ${look.color}`} /></span>
                                            <span className="min-w-0 flex-1">
                                                <span className="block text-sm font-semibold text-slate-800 truncate">{tp.label}</span>
                                                <span className="block text-[10px] text-slate-500 truncate">{tp.description}</span>
                                            </span>
                                            {String(complainType) === String(tp.value) ? <Icon name="check-circle-2" className="w-4 h-4 text-indigo-600 shrink-0" /> : null}
                                        </button>
                                    );
                                })}
                            </div>
                        </div>
                    </div>
                    <div>
                        <label id="whatHappenedLabel" className="flex items-center gap-1.5 text-xs font-bold text-slate-700 mb-2">
                            <Icon name="file-text" className="w-3.5 h-3.5 text-indigo-600" /> {t("what_happened")}
                        </label>
                        <textarea id="complainMsg" maxLength={500} rows={6} value={message}
                            onChange={(e) => setMessage(e.target.value)}
                            className="w-full resize-none rounded-xl border border-slate-200 focus:border-indigo-400 focus:ring-4 focus:ring-indigo-500/10 outline-none p-3.5 text-sm text-slate-700"
                            placeholder={t("describe_issue")}></textarea>
                        <div className="mt-2 flex items-center justify-between">
                            <span id="moreDetailHint" className="text-[10px] text-slate-400">{t("more_detail_hint")}</span>
                            <span id="charCount" className={`text-[10px] font-semibold ${count > 450 ? "text-orange-500" : "text-slate-400"}`}>{count} / 500</span>
                        </div>
                    </div>
                    <p id="trackHint" className="text-xs text-slate-500 bg-slate-50 rounded-xl p-3">{t("track_hint")}</p>
                </div>
                <div className="px-5 py-4 border-t border-slate-100 flex justify-end gap-2">
                    <button id="cancelTicketBtn" onClick={close} className="px-4 py-2.5 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-100">{t("cancel")}</button>
                    <button id="sendTicketBtn" onClick={submit} disabled={!canSend} className="px-4 py-2.5 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 text-white text-sm font-bold disabled:opacity-40">
                        <span id="sendTicketInner" className="inline-flex items-center gap-2">
                            {phase === "sending" && <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full spin"></span> {t("sending")}</>}
                            {phase === "sent" && <><Icon name="check-circle-2" className="w-4 h-4" /> {t("ticket_created")}</>}
                            {phase === "idle" && <>{t("send_ticket")} <Icon name="send" className="w-4 h-4" /></>}
                        </span>
                    </button>
                </div>
            </div>
        </div>
    );
}