import { useNavigate } from "react-router-dom";
import IconBox from "../components/Icon/IconBox";
import IconCircleCheck from "../components/Icon/IconCircleCheck";
import IconMail from "../components/Icon/IconMail";
import IconPhone from "../components/Icon/IconPhone";
import IconHourGlass from "../components/Icon/IconHourGlass";

// ── Types ────────────────────────────────────────────────
type Channel = "whatsapp" | "instagram" | "facebook" | "email";

interface WaitingPatron {
    id: string;
    name: string;
    channel: Channel;
    phone: string;
    email: string;
    product: string;
    address: string;
}


// ── Channel pill ─────────────────────────────────────────
const ChannelPill = ({ channel }: { channel: Channel }) => {
    const map: Record<Channel, { label: string; cls: string }> = {
        whatsapp: { label: "WHATSAPP", cls: "bg-green-100 text-green-700" },
        instagram: { label: "INSTAGRAM", cls: "bg-pink-100 text-pink-600" },
        facebook: { label: "FACEBOOK", cls: "bg-blue-100 text-blue-600" },
        email: { label: "EMAIL", cls: "bg-slate-100 text-slate-500" },
    };
    const { label, cls } = map[channel];
    return (
        <span className={`text-[9px] font-extrabold px-2 py-0.5 rounded-full tracking-wide ${cls}`}>
            {label}
        </span>
    );
};

// ── Single placed-&-tracked card ─────────────────────────

const PlacedTrackedCard = ({ p }: { p: WaitingPatron }) => {
    const navigate = useNavigate();
    return (
        <div className="p-3 border bg-green-50/60 border-green-200/70 rounded-xl flex flex-col md:flex-row md:items-center justify-between gap-3.5 transition-all">
            {/* Left: patron info */}
            <div className="space-y-1.5">
                <div className="flex items-center gap-2 flex-wrap">
                    <span className="font-mono text-[9px] font-extrabold tracking-wider bg-green-100 px-1.5 py-0.5 rounded text-green-700">
                        {p.id}
                    </span>
                    <h5 className="font-bold text-xs text-slate-800">{p.name}</h5>
                    <ChannelPill channel={p.channel} />
                    {/* Confirmed pill */}
                    <span className="text-[9px] font-extrabold px-2 py-0.5 rounded-full bg-green-100 text-green-700">
                        Confirmed
                    </span>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-0.5 text-[10.5px] text-slate-500">
                    <p className="flex items-center gap-1.5">
                        <IconPhone /> {p.phone}
                    </p>
                    <p className="flex items-center gap-1.5">
                        <IconMail /> {p.email}
                    </p>
                    <p className="col-span-2 mt-0.5 leading-normal">
                        <span className="font-bold text-slate-600">Product proposed:</span> {p.product} •{" "}
                        <span className="font-bold text-slate-600">Address:</span> {p.address}
                    </p>
                </div>
            </div>
            <div className="flex items-center gap-1.5 self-end md:self-center shrink-0">
                <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-green-100 border border-green-200 text-green-700 text-[11px] font-bold select-none">
                    <IconCircleCheck />
                    Placed &amp; Tracked
                </span>
            </div>
        </div>
    );
};

// ── Panel ────────────────────────────────────────────────
export const PlacedTrackedList = ({
    patrons = [],
}: {
    patrons?: WaitingPatron[];
}) => (
    <>
        {patrons.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-10 text-slate-400 gap-2">
                <IconBox />
                <p className="text-xs font-medium">No orders placed &amp; tracked yet.</p>
            </div>
        ) : (
            patrons.map((p) => <PlacedTrackedCard key={p.id} p={p} />)
        )}
    </>
);

export default PlacedTrackedList;