import { useState } from "react";
import { Head, router } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
    Plus,
    Users,
    Sparkles,
    Building2,
    MapPin,
    AlertCircle,
    ShieldAlert,
} from "lucide-react";

// Import Reusable Global Components
import {
    DataTable,
    Column,
    PaginatedData,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";
import teams from "@/routes/crm/teams";

type Team = {
    id: number;
    name: string;
    area_id?: number | null;
    area?: { id: number; name: string; is_active?: boolean } | null;
    supervisor?: { id: number; name: string } | null;
    supervisor_id?: number | null;
    users_count: number;
};

type Props = {
    teams: PaginatedData<Team>;
    supervisors: { id: number; name: string }[];
    areas: { id: number; code: string; name: string }[];
};

export default function TeamsIndex({
    teams: teamData,
    supervisors,
    areas,
}: Props) {
    // State Form Modal
    const [isFormOpen, setIsFormOpen] = useState(false);
    const [editingTeam, setEditingTeam] = useState<Team | null>(null);

    // State Confirm Delete Dialog
    const [isDeleteOpen, setIsDeleteOpen] = useState(false);
    const [deletingId, setDeletingId] = useState<number | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    // Helper Inisial Nama
    const getInitials = (name: string) => {
        if (!name) return "T";
        const parts = name.trim().split(" ");
        if (parts.length >= 2) {
            return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
        }
        return name.slice(0, 2).toUpperCase();
    };

    // Modal Handlers
    const handleAdd = () => {
        setEditingTeam(null);
        setIsFormOpen(true);
    };

    const openEditModal = (team: Team) => {
        setEditingTeam({
            ...team,
            area_id: team.area_id ?? team.area?.id ?? null,
            supervisor_id: team.supervisor_id ?? team.supervisor?.id ?? null,
        });
        setIsFormOpen(true);
    };

    const openDeleteModal = (team: Team) => {
        setDeletingId(team.id);
        setIsDeleteOpen(true);
    };

    const handleConfirmDelete = () => {
        if (!deletingId) return;
        setIsDeleting(true);
        router.delete(teams.destroy.url(deletingId), {
            onSuccess: () => {
                setIsDeleteOpen(false);
                setDeletingId(null);
            },
            onFinish: () => setIsDeleting(false),
        });
    };

    // Konfigurasi Field Form
    const formFields: FieldConfig[] = [
        {
            name: "name",
            label: "Nama Team",
            type: "text",
            placeholder: "Masukkan nama team...",
            required: true,
            colSpan: 4,
        },
        {
            name: "area_id",
            label: "Area",
            type: "select",
            placeholder: "- Pilih Area -",
            options: areas.map((a) => ({
                label: `${a.code} — ${a.name}`,
                value: String(a.id),
            })),
            colSpan: 4,
        },
        {
            name: "supervisor_id",
            label: "Supervisor",
            type: "select",
            placeholder: "- Pilih Supervisor -",
            options: supervisors.map((s) => ({
                label: s.name,
                value: String(s.id),
            })),
            colSpan: 4,
        },
    ];

    const initialFormValues = {
        name: "",
        area_id: "",
        supervisor_id: "",
    };

    // Kolom tabel (Kolom "AKSI" dan "NO" diserahkan ke komponen DataTable)
    const columns: Column<Team>[] = [
        {
            header: "NAMA TIM SALES",
            headerClassName:
                "text-left font-semibold text-foreground/80 tracking-wide text-xs uppercase",
            cell: (t) => (
                <div className="flex items-center gap-3 py-1">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-linear-to-br from-indigo-500 to-indigo-700 text-xs font-bold text-white shadow-sm ring-2 ring-indigo-100">
                        {getInitials(t.name)}
                    </div>
                    <div className="flex flex-col min-w-0">
                        <span className="font-semibold text-foreground truncate hover:text-indigo-600 transition-colors text-sm">
                            {t.name}
                        </span>
                        <span className="text-xs text-muted-foreground/80">
                            ID: #{t.id}
                        </span>
                    </div>
                </div>
            ),
        },
        {
            header: "WILAYAH / AREA",
            headerClassName:
                "text-left font-semibold text-foreground/80 tracking-wide text-xs uppercase",
            cell: (t) => {
                const areaName =
                    typeof t.area === "object" && t.area !== null
                        ? t.area.name
                        : t.area || "-";

                const isInactive =
                    typeof t.area === "object" &&
                    t.area !== null &&
                    t.area.is_active === false;

                return (
                    <div className="flex items-center gap-2">
                        <div className="inline-flex items-center gap-1.5 rounded-lg bg-muted/50 border border-border px-2.5 py-1 text-xs font-medium text-foreground/80">
                            <MapPin className="h-3.5 w-3.5 text-indigo-500 shrink-0" />
                            <span>{areaName}</span>
                        </div>
                        {isInactive && (
                            <Badge
                                variant="outline"
                                className="bg-rose-50 text-rose-700 border-rose-200 text-[10px] px-2 py-0.5 font-semibold inline-flex items-center gap-1"
                            >
                                <AlertCircle className="h-3 w-3 text-rose-500" />
                                Nonaktif
                            </Badge>
                        )}
                    </div>
                );
            },
        },
        {
            header: "SUPERVISOR",
            headerClassName:
                "text-left font-semibold text-foreground/80 tracking-wide text-xs uppercase",
            cell: (t) =>
                t.supervisor?.name ? (
                    <div className="flex items-center gap-2">
                        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground font-bold text-[10px]">
                            {getInitials(t.supervisor.name)}
                        </div>
                        <span className="text-xs font-medium text-foreground">
                            {t.supervisor.name}
                        </span>
                    </div>
                ) : (
                    <span className="italic text-xs text-muted-foreground/80 bg-muted/50 px-2.5 py-1 rounded-md border border-slate-100 inline-flex items-center gap-1">
                        <ShieldAlert className="h-3 w-3 text-amber-500" />
                        Belum Ditentukan
                    </span>
                ),
        },
        {
            header: "JUMLAH SALES",
            headerClassName:
                "text-center font-semibold text-foreground/80 tracking-wide text-xs uppercase",
            className: "text-center",
            cell: (t) => (
                <div className="flex justify-center">
                    <div className="inline-flex items-center gap-1.5 rounded-full bg-emerald-50/90 px-3 py-1 text-xs font-semibold text-emerald-700 border border-emerald-200/80 shadow-2xs">
                        <Users className="h-3.5 w-3.5 text-emerald-600" />
                        <span>{t.users_count} Sales</span>
                    </div>
                </div>
            ),
        },
    ];

    return (
        <AppLayout breadcrumbs={[{ title: "Team Sales", href: "/crm/teams" }]}>
            <Head title="Team Sales" />
            <div className="crm-page space-y-6 pb-10">
                {/* Hero Header Banner */}
                <div className="relative overflow-hidden rounded-2xl bg-linear-to-r from-slate-950 via-slate-900 to-indigo-950 p-8 text-white shadow-xl">
                    <div className="relative z-10 flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                        <div className="space-y-2 max-w-2xl">
                            <div className="inline-flex items-center gap-2 rounded-full border border-indigo-500/20 bg-indigo-500/10 px-3 py-1 text-xs font-medium text-indigo-300 backdrop-blur-md">
                                <Sparkles className="h-3.5 w-3.5 text-indigo-400" />
                                <span>MINANGA CRM TEAM ENGINE</span>
                            </div>
                            <h1 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                                Tim Sales & Wilayah
                            </h1>
                            <p className="text-sm leading-relaxed text-muted-foreground/60">
                                Kelola struktur tim, penetapan wilayah area, dan
                                alokasi supervisor secara efektif untuk
                                mengoptimalkan penetrasi pasar.
                            </p>
                        </div>
                        <Button
                            onClick={handleAdd}
                            className="h-11 rounded-xl bg-indigo-600 px-5 font-medium text-white shadow-lg shadow-indigo-600/30 transition-all hover:bg-indigo-500 gap-2 cursor-pointer self-start md:self-auto"
                        >
                            <Plus className="h-4 w-4" />
                            Tambah Tim Sales
                        </Button>
                    </div>
                </div>

                {/* Card Wrapper Tabel */}
                <div className="rounded-2xl border border-border/80 bg-card p-6 shadow-sm space-y-4">
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 text-foreground font-bold text-lg">
                            <Building2 className="h-5 w-5 text-indigo-600" />
                            <h2>Daftar Tim Sales</h2>
                        </div>
                        <p className="text-sm text-muted-foreground">
                            Master data wilayah area, supervisor, dan akumulasi
                            jumlah personel sales.
                        </p>
                    </div>

                    {/* DataTable Component Baru */}
                    <DataTable
                        data={teamData}
                        columns={columns}
                        searchPlaceholder="Cari nama tim sales..."
                        showNumber={true}
                        useSkeleton={true}
                        onEdit={openEditModal}
                        onDelete={openDeleteModal}
                    />
                </div>

                {/* Dynamic Form Dialog */}
                <DynamicFormDialog
                    open={isFormOpen}
                    onOpenChange={setIsFormOpen}
                    title="Team Sales"
                    endpoint={teams.store.url()}
                    fields={formFields}
                    initialValues={initialFormValues}
                    itemToEdit={editingTeam}
                    dialogSize="sm"
                />

                {/* Confirm Delete Dialog */}
                <ConfirmDeleteDialog
                    open={isDeleteOpen}
                    onOpenChange={setIsDeleteOpen}
                    onConfirm={handleConfirmDelete}
                    loading={isDeleting}
                    title="Hapus Team Sales?"
                    description="Apakah Anda yakin ingin menghapus team ini? Tindakan ini tidak dapat dibatalkan."
                />
            </div>
        </AppLayout>
    );
}