import { Link } from "@inertiajs/react";
import {
    AlertCircle,
    ArrowUpRight,
    CalendarDays,
    Target,
    Users,
    Clock3,
    TrendingUp,
    MapPin,
    ShoppingCart,
    Package,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import type { CompanyDashboard as CompanyDashboardType } from "@/types/dashboard";
import { money, number } from "@/lib/dashboard";

export default function DashboardCompany({
    companyDashboard,
}: {
    companyDashboard: CompanyDashboardType;
}) {
    return (
        <div className="grid gap-6 lg:grid-cols-2">
            {/* Kunjungan Tertunda Card */}
            <Card className="flex h-112 flex-col overflow-hidden rounded-2xl border border-slate-200/80 bg-linear-to-b from-white to-slate-50/40 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:to-slate-950">
                <CardHeader className="shrink-0 border-b border-slate-100 bg-white/80 px-6 py-0! backdrop-blur-md dark:border-slate-800/80 dark:bg-slate-900/80">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="flex size-10 items-center justify-center rounded-xl bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400 border border-amber-500/20">
                                <AlertCircle className="size-5" />
                            </div>
                            <div>
                                <CardTitle className="text-base font-bold tracking-tight text-slate-900 dark:text-slate-100">
                                    Kunjungan Tertunda
                                </CardTitle>
                                <CardDescription className="text-xs font-medium text-slate-500 dark:text-slate-400">
                                    Tindakan lanjut sales yang terlewat
                                </CardDescription>
                            </div>
                        </div>
                        <Badge className="rounded-full bg-amber-500/10 px-3 py-1 text-xs font-bold text-amber-700 dark:bg-amber-500/20 dark:text-amber-300 border border-amber-500/30 shadow-2xs">
                            {number(companyDashboard.pending_visits_count)}{" "}
                            Tertunda
                        </Badge>
                    </div>
                </CardHeader>

                <CardContent className="flex-1 overflow-y-auto py-0! scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-800">
                    {companyDashboard.pending_visits?.length ? (
                        <div className="grid gap-4 sm:grid-cols-2">
                            {companyDashboard.pending_visits.map((visit) => (
                                <div
                                    key={visit.id}
                                    className="group relative flex flex-col justify-between rounded-xl border border-slate-200/80 bg-white p-4 shadow-2xs transition-all duration-200 hover:-translate-y-0.5 hover:border-amber-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:hover:border-amber-700/60"
                                >
                                    <div className="space-y-3">
                                        <div className="flex items-start justify-between gap-2">
                                            <div className="min-w-0 space-y-0.5">
                                                <h4 className="truncate text-sm font-bold text-slate-900 dark:text-slate-100 group-hover:text-amber-600 transition-colors">
                                                    {visit.customer_name}
                                                </h4>
                                                <p className="flex items-center gap-1.5 text-xs font-medium text-slate-500 dark:text-slate-400">
                                                    <Users className="size-3.5 shrink-0 text-slate-400" />
                                                    <span className="truncate">
                                                        {visit.sales_name}
                                                    </span>
                                                </p>
                                            </div>
                                            <Badge className="shrink-0 rounded-md bg-rose-50 px-2.5 py-0.5 text-[11px] font-bold text-rose-600 border border-rose-200 dark:bg-rose-950/40 dark:text-rose-400 dark:border-rose-900/40">
                                                Wajib
                                            </Badge>
                                        </div>

                                        <div className="rounded-xl bg-slate-50/90 p-3 border border-slate-100 dark:bg-slate-800/60 dark:border-slate-800">
                                            <div className="flex items-center gap-2 text-xs font-semibold text-slate-700 dark:text-slate-300">
                                                <CalendarDays className="size-3.5 shrink-0 text-amber-500" />
                                                <span>
                                                    {visit.scheduled_date}
                                                </span>
                                                {visit.scheduled_time && (
                                                    <>
                                                        <span className="text-slate-300 dark:text-slate-600">
                                                            •
                                                        </span>
                                                        <span className="flex items-center gap-1 font-medium text-slate-600 dark:text-slate-400">
                                                            <Clock3 className="size-3.5 shrink-0 text-slate-400" />
                                                            {
                                                                visit.scheduled_time
                                                            }
                                                        </span>
                                                    </>
                                                )}
                                            </div>
                                            <p className="mt-2 line-clamp-2 text-xs text-slate-500 dark:text-slate-400">
                                                <span className="font-semibold text-slate-700 dark:text-slate-300">
                                                    Keperluan:
                                                </span>{" "}
                                                {visit.purpose}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className="flex h-full flex-col items-center justify-center rounded-xl border border-dashed border-slate-200 py-12 text-center dark:border-slate-800">
                            <AlertCircle className="size-8 text-slate-300 dark:text-slate-600 mb-2" />
                            <p className="text-sm font-semibold text-slate-600 dark:text-slate-300">
                                Tidak ada kunjungan tertunda
                            </p>
                            <p className="text-xs text-slate-400 mt-1">
                                Semua jadwal tindakan lanjut telah
                                terselesaikan.
                            </p>
                        </div>
                    )}
                </CardContent>
            </Card>

            {/* Kinerja Sales — Target vs Realisasi Card */}
            <Card className="flex h-112 flex-col overflow-hidden rounded-2xl border border-slate-200/80 bg-linear-to-b from-white to-slate-50/40 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:to-slate-950">
                <CardHeader className="shrink-0 border-b border-slate-100 bg-white/80 px-6 py-0! backdrop-blur-md dark:border-slate-800/80 dark:bg-slate-900/80">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="flex size-10 items-center justify-center rounded-xl bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400 border border-indigo-500/20">
                                <Target className="size-5" />
                            </div>
                            <div>
                                <CardTitle className="text-base font-bold tracking-tight text-slate-900 dark:text-slate-100">
                                    Kinerja Sales — Target vs Realisasi
                                </CardTitle>
                                <CardDescription className="text-xs font-medium text-slate-500 dark:text-slate-400">
                                    Pencapaian bulanan & KPI individual tim
                                    sales
                                </CardDescription>
                            </div>
                        </div>
                        <Link
                            href="/crm/sales/performance"
                            className="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs transition-all hover:bg-slate-50 hover:text-indigo-600 hover:border-indigo-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-indigo-400"
                        >
                            <span>Detail</span>
                            <ArrowUpRight className="size-3.5" />
                        </Link>
                    </div>

                    {/* Banner Statistik Total Tim */}
                    {companyDashboard.sales_performance?.length
                        ? (() => {
                              const totalTarget =
                                  companyDashboard.sales_performance.reduce(
                                      (acc, curr) =>
                                          acc + (curr.target_amount || 0),
                                      0,
                                  );
                              const totalActual =
                                  companyDashboard.sales_performance.reduce(
                                      (acc, curr) =>
                                          acc + (curr.actual_amount || 0),
                                      0,
                                  );
                              const avgAchievement =
                                  totalTarget > 0
                                      ? Math.round(
                                            (totalActual / totalTarget) * 100,
                                        )
                                      : 0;

                              return (
                                  <div className="mt-3.5 flex items-center justify-between rounded-xl border border-indigo-100/80 bg-linear-to-r from-indigo-50/60 via-indigo-50/30 to-purple-50/40 p-3 px-4 dark:border-indigo-900/40 dark:from-indigo-950/40 dark:to-slate-900">
                                      <div className="flex items-center gap-2.5 text-xs sm:text-sm">
                                          <TrendingUp className="size-4 text-indigo-600 dark:text-indigo-400 shrink-0" />
                                          <span className="font-medium text-slate-600 dark:text-slate-300">
                                              Total Target Tim:
                                          </span>
                                          <strong className="font-extrabold text-slate-900 dark:text-slate-100">
                                              {money(totalActual)}
                                          </strong>
                                          <span className="text-xs font-medium text-slate-400">
                                              / {money(totalTarget)}
                                          </span>
                                      </div>
                                      <Badge
                                          className={`rounded-lg px-2.5 py-0.5 font-extrabold text-xs border ${
                                              avgAchievement >= 100
                                                  ? "bg-emerald-500/10 text-emerald-700 border-emerald-300/50 dark:bg-emerald-500/20 dark:text-emerald-300"
                                                  : avgAchievement >= 75
                                                    ? "bg-indigo-500/10 text-indigo-700 border-indigo-300/50 dark:bg-indigo-500/20 dark:text-indigo-300"
                                                    : "bg-amber-500/10 text-amber-700 border-amber-300/50 dark:bg-amber-500/20 dark:text-amber-300"
                                          }`}
                                      >
                                          Rata-rata {avgAchievement}%
                                      </Badge>
                                  </div>
                              );
                          })()
                        : null}
                </CardHeader>

                {/* Body Daftar Performa Sales */}
                <CardContent className="flex-1 overflow-y-auto py-0! scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-800">
                    {companyDashboard.sales_performance?.length ? (
                        <div className="grid grid-cols-1 md:grid-cols-1 gap-4">
                            {companyDashboard.sales_performance.map((sales) => {
                                const percent = Number(
                                    sales.amount_percent || 0,
                                );

                                const statusConfig =
                                    percent >= 100
                                        ? {
                                              badgeBg:
                                                  "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-800/60",
                                              progressBg:
                                                  "bg-emerald-500 shadow-emerald-500/30",
                                              avatarGradient:
                                                  "from-emerald-500 to-teal-700 shadow-emerald-500/20",
                                              statusText: "Tercapai",
                                          }
                                        : percent >= 75
                                          ? {
                                                badgeBg:
                                                    "bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-800/60",
                                                progressBg:
                                                    "bg-indigo-600 shadow-indigo-500/30",
                                                avatarGradient:
                                                    "from-indigo-500 to-indigo-700 shadow-indigo-500/20",
                                                statusText: "On Track",
                                            }
                                          : percent >= 50
                                            ? {
                                                  badgeBg:
                                                      "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-800/60",
                                                  progressBg:
                                                      "bg-amber-500 shadow-amber-500/30",
                                                  avatarGradient:
                                                      "from-amber-500 to-orange-600 shadow-amber-500/20",
                                                  statusText: "Perlu Perhatian",
                                              }
                                            : {
                                                  badgeBg:
                                                      "bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/50 dark:text-rose-300 dark:border-rose-800/60",
                                                  progressBg:
                                                      "bg-rose-500 shadow-rose-500/30",
                                                  avatarGradient:
                                                      "from-rose-500 to-pink-700 shadow-rose-500/20",
                                                  statusText: "Di Bawah Target",
                                              };

                                return (
                                    <div
                                        key={sales.sales_id}
                                        className="group relative flex flex-col justify-between overflow-hidden rounded-2xl border border-slate-200/80 bg-white p-4.5 shadow-2xs transition-all duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 dark:hover:border-slate-700"
                                    >
                                        <div>
                                            {/* Header Sales */}
                                            <div className="flex items-center justify-between pb-3">
                                                <div className="flex items-center gap-3">
                                                    <div
                                                        className={`flex size-10 shrink-0 items-center justify-center rounded-xl bg-linear-to-br text-sm font-extrabold text-white shadow-md transition-transform group-hover:scale-105 ${statusConfig.avatarGradient}`}
                                                    >
                                                        {sales.sales_name
                                                            ?.charAt(0)
                                                            ?.toUpperCase() ||
                                                            "S"}
                                                    </div>
                                                    <div className="min-w-0">
                                                        <h4 className="truncate text-sm font-bold text-slate-900 dark:text-slate-100">
                                                            {sales.sales_name}
                                                        </h4>
                                                        <p className="text-xs font-medium text-slate-400 flex items-center gap-1 mt-0.5">
                                                            <span>Status:</span>
                                                            <span className="font-semibold text-slate-700 dark:text-slate-300">
                                                                {
                                                                    statusConfig.statusText
                                                                }
                                                            </span>
                                                        </p>
                                                    </div>
                                                </div>

                                                <Badge
                                                    variant="outline"
                                                    className={`rounded-lg px-2.5 py-1 text-xs font-black border ${statusConfig.badgeBg}`}
                                                >
                                                    {percent}%
                                                </Badge>
                                            </div>

                                            {/* Realisasi Financial Progress */}
                                            <div className="space-y-2 pt-1">
                                                <div className="flex items-center justify-between text-xs">
                                                    <span className="font-medium text-slate-500 dark:text-slate-400">
                                                        Realisasi Penjualan
                                                    </span>
                                                    <span className="font-extrabold text-slate-900 dark:text-slate-100">
                                                        {money(
                                                            sales.actual_amount,
                                                        )}{" "}
                                                        <span className="font-medium text-slate-400 text-xs">
                                                            /{" "}
                                                            {money(
                                                                sales.target_amount,
                                                            )}
                                                        </span>
                                                    </span>
                                                </div>

                                                <div className="relative h-2.5 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                                                    <div
                                                        className={`h-full rounded-full transition-all duration-500 shadow-xs ${statusConfig.progressBg}`}
                                                        style={{
                                                            width: `${Math.min(percent, 100)}%`,
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        </div>

                                        {/* Sub KPI Stats (Visits, Orders, Qty) */}
                                        <div className="mt-4 grid grid-cols-3 gap-2 rounded-xl bg-slate-50/90 p-2.5 text-center border border-slate-100 dark:bg-slate-800/50 dark:border-slate-800">
                                            {/* Visits */}
                                            <div className="space-y-0.5">
                                                <div className="flex items-center justify-center gap-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">
                                                    <MapPin className="size-3 text-indigo-500 shrink-0" />
                                                    <span>Visits</span>
                                                </div>
                                                <p className="text-xs font-extrabold text-slate-800 dark:text-slate-200">
                                                    {number(
                                                        sales.actual_visits,
                                                    )}
                                                    <span className="text-xs font-normal text-slate-400">
                                                        /
                                                        {number(
                                                            sales.target_visits,
                                                        )}
                                                    </span>
                                                </p>
                                                <p className="text-xs font-bold text-indigo-600 dark:text-indigo-400">
                                                    {sales.visit_percent}%
                                                </p>
                                            </div>

                                            {/* Orders */}
                                            <div className="space-y-0.5 border-x border-slate-200/70 dark:border-slate-700/60">
                                                <div className="flex items-center justify-center gap-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">
                                                    <ShoppingCart className="size-3 text-emerald-500 shrink-0" />
                                                    <span>Orders</span>
                                                </div>
                                                <p className="text-xs font-extrabold text-slate-800 dark:text-slate-200">
                                                    {number(
                                                        sales.actual_orders,
                                                    )}
                                                    <span className="text-xs font-normal text-slate-400">
                                                        /
                                                        {number(
                                                            sales.target_orders,
                                                        )}
                                                    </span>
                                                </p>
                                                <p className="text-xs font-bold text-emerald-600 dark:text-emerald-400">
                                                    {sales.order_percent}%
                                                </p>
                                            </div>

                                            {/* Qty */}
                                            <div className="space-y-0.5">
                                                <div className="flex items-center justify-center gap-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">
                                                    <Package className="size-3 text-amber-500 shrink-0" />
                                                    <span>Qty</span>
                                                </div>
                                                <p className="text-xs font-extrabold text-slate-800 dark:text-slate-200">
                                                    {number(sales.actual_qty)}
                                                    <span className="text-xs font-normal text-slate-400">
                                                        /
                                                        {number(
                                                            sales.target_qty,
                                                        )}
                                                    </span>
                                                </p>
                                                <p className="text-xs font-bold text-amber-600 dark:text-amber-400">
                                                    {sales.qty_percent}%
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    ) : (
                        <div className="flex h-full flex-col items-center justify-center rounded-xl border border-dashed border-slate-200 p-12 text-center dark:border-slate-800">
                            <Target className="size-8 text-slate-300 dark:text-slate-600 mb-2" />
                            <p className="text-sm font-semibold text-slate-600 dark:text-slate-300">
                                Belum Ada Data Kinerja
                            </p>
                            <p className="text-xs text-slate-400 mt-1">
                                Tidak ada data target & realisasi penjualan
                                untuk periode ini.
                            </p>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}