import React from "react";
import { router } from "@inertiajs/react";
import { Users, X, Loader2 } from "lucide-react";
import EntityPage from "../EntityPage";
import { Badge, Select, Button } from "../../components/ui";

type SalesUser = {
    id: number;
    name: string;
    email?: string;
    team_id?: number | null;
};
type TeamRow = {
    id: number;
    name: string;
    code?: string;
    region?: string;
    status?: string;
    sales_count?: number;
    users?: SalesUser[];
};

export default ({
    rows,
    salesUsers = [],
}: {
    rows: TeamRow[];
    salesUsers?: SalesUser[];
}) => {
    const [manageTeam, setManageTeam] = React.useState<TeamRow | null>(null);
    const [selectedUserId, setSelectedUserId] = React.useState("");
    const [adding, setAdding] = React.useState(false);
    const [removingId, setRemovingId] = React.useState<number | null>(null);

    // Selalu ambil versi terbaru dari team yang sedang dikelola (rows
    // diperbarui otomatis oleh Inertia setelah attach/detach).
    const activeTeam = manageTeam
        ? (rows.find((t) => t.id === manageTeam.id) ?? manageTeam)
        : null;
    const members = activeTeam?.users ?? [];
    const availableUsers = salesUsers.filter((u) => u.id !== undefined);
    const teamNameById = React.useMemo(
        () => new Map(rows.map((t) => [t.id, t.name])),
        [rows],
    );

    const openManage = (team: TeamRow) => {
        setManageTeam(team);
        setSelectedUserId("");
    };
    const closeManage = () => setManageTeam(null);

    // Opsi dropdown filter "Team" dan "Wilayah", diambil unik dari data
    // yang sedang tampil (name & region bebas diisi, tidak dikonfigurasi
    // terpusat seperti kategori Customer).
    const teamNames = React.useMemo(
        () =>
            Array.from(new Set(rows.map((t) => t.name).filter(Boolean))).sort(
                (a, b) => a.localeCompare(b),
            ),
        [rows],
    );
    const regions = React.useMemo(
        () =>
            Array.from(new Set(rows.map((t) => t.region).filter(Boolean))).sort(
                (a, b) => String(a).localeCompare(String(b)),
            ) as string[],
        [rows],
    );

    const addSales = () => {
        if (!activeTeam || !selectedUserId) return;
        setAdding(true);
        router.post(
            `/teams/${activeTeam.id}/sales`,
            { user_id: selectedUserId },
            {
                preserveScroll: true,
                onSuccess: () => setSelectedUserId(""),
                onFinish: () => setAdding(false),
            },
        );
    };
    const removeSales = (user: SalesUser) => {
        if (!activeTeam) return;
        if (!confirm(`Keluarkan "${user.name}" dari team ini?`)) return;
        setRemovingId(user.id);
        router.delete(`/teams/${activeTeam.id}/sales/${user.id}`, {
            preserveScroll: true,
            onFinish: () => setRemovingId(null),
        });
    };

    return (
        <>
            <EntityPage
                title="Team & Sales"
                description="Kelola tim lapangan, wilayah, dan anggota sales."
                resource="teams"
                rows={rows}
                filters={[
                    { key: "name", label: "Team", options: teamNames },
                    { key: "region", label: "Wilayah", options: regions },
                ]}
                fields={[
                    { name: "name", label: "Nama Team" },
                    { name: "code", label: "Kode" },
                    { name: "region", label: "Wilayah" },
                ]}
                columns={[
                    { key: "code", label: "Kode" },
                    { key: "name", label: "Team" },
                    { key: "region", label: "Wilayah" },
                    {
                        key: "sales",
                        label: "Sales",
                        render: (r: TeamRow) => {
                            const users = r.users ?? [];
                            if (!users.length) {
                                return (
                                    <span className="text-xs text-slate-400">
                                        Belum ada sales
                                    </span>
                                );
                            }
                            const shown = users.slice(0, 3);
                            const remaining = users.length - shown.length;
                            return (
                                <div className="flex flex-wrap items-center gap-1.5">
                                    {shown.map((u) => (
                                        <Badge key={u.id} tone="blue">
                                            {u.name}
                                        </Badge>
                                    ))}
                                    {remaining > 0 && (
                                        <Badge tone="slate">
                                            +{remaining} lagi
                                        </Badge>
                                    )}
                                </div>
                            );
                        },
                    },
                ]}
                extraActions={(r: TeamRow) => (
                    <button
                        type="button"
                        onClick={() => openManage(r)}
                        className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition hover:bg-slate-100 hover:text-slate-700"
                        aria-label="Kelola Sales"
                        title="Kelola Sales"
                    >
                        <Users size={14} />
                    </button>
                )}
            />

            {activeTeam && (
                <div
                    className="fixed inset-0 z-50 grid place-items-center bg-slate-950/40 p-4"
                    onMouseDown={(e) =>
                        e.target === e.currentTarget && closeManage()
                    }
                >
                    <div className="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-2xl bg-white shadow-2xl">
                        <div className="flex items-center justify-between border-b border-slate-100 p-5">
                            <div>
                                <h2 className="text-lg font-black text-slate-900">
                                    Kelola Sales — {activeTeam.name}
                                </h2>
                                <p className="text-xs text-slate-400">
                                    Tambahkan atau keluarkan anggota sales pada
                                    team ini.
                                </p>
                            </div>
                            <button
                                type="button"
                                onClick={closeManage}
                                className="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600"
                                aria-label="Tutup"
                            >
                                <X size={18} />
                            </button>
                        </div>

                        <div className="space-y-5 p-5">
                            <div>
                                <label className="mb-1 block text-xs font-semibold text-slate-600">
                                    Tambah Sales
                                </label>
                                <div className="flex gap-2">
                                    <Select
                                        value={selectedUserId}
                                        onChange={(e) =>
                                            setSelectedUserId(e.target.value)
                                        }
                                        className="flex-1"
                                    >
                                        <option value="">Pilih sales...</option>
                                        {availableUsers.map((u) => (
                                            <option key={u.id} value={u.id}>
                                                {u.name}
                                                {u.team_id &&
                                                u.team_id !== activeTeam.id
                                                    ? ` (${
                                                          teamNameById.get(
                                                              u.team_id,
                                                          ) ?? "team lain"
                                                      })`
                                                    : ""}
                                            </option>
                                        ))}
                                    </Select>
                                    <Button
                                        type="button"
                                        onClick={addSales}
                                        disabled={!selectedUserId || adding}
                                    >
                                        {adding && (
                                            <Loader2
                                                size={14}
                                                className="mr-2 animate-spin"
                                            />
                                        )}
                                        Tambah
                                    </Button>
                                </div>
                                <p className="mt-1 text-[11px] text-slate-400">
                                    Satu sales hanya bisa berada di satu team;
                                    memilih sales dari team lain akan
                                    memindahkannya ke team ini.
                                </p>
                            </div>

                            <div>
                                <label className="mb-2 block text-xs font-semibold text-slate-600">
                                    Anggota Saat Ini ({members.length})
                                </label>
                                {members.length ? (
                                    <ul className="divide-y divide-slate-100 rounded-xl border border-slate-100">
                                        {members.map((u) => (
                                            <li
                                                key={u.id}
                                                className="flex items-center justify-between px-3 py-2.5"
                                            >
                                                <div>
                                                    <div className="text-sm font-semibold text-slate-700">
                                                        {u.name}
                                                    </div>
                                                    {u.email && (
                                                        <div className="text-xs text-slate-400">
                                                            {u.email}
                                                        </div>
                                                    )}
                                                </div>
                                                <button
                                                    type="button"
                                                    disabled={
                                                        removingId === u.id
                                                    }
                                                    onClick={() =>
                                                        removeSales(u)
                                                    }
                                                    className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
                                                    aria-label="Keluarkan dari team"
                                                    title="Keluarkan dari team"
                                                >
                                                    {removingId === u.id ? (
                                                        <Loader2
                                                            size={14}
                                                            className="animate-spin"
                                                        />
                                                    ) : (
                                                        <X size={14} />
                                                    )}
                                                </button>
                                            </li>
                                        ))}
                                    </ul>
                                ) : (
                                    <p className="text-xs text-slate-400">
                                        Belum ada sales di team ini.
                                    </p>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};