"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { ArrowRight, CalendarDays, GitBranch, MapPin, Shield, Users } from "lucide-react";

interface BusinessPanelOverviewProps {
  permissions: string[];
  currentRoleName: string;
}

interface OverviewData {
  franchises: number;
  locations: number;
  members: number;
  roles: number;
  events: number;
}

const STAT_LINKS = [
  {
    key: "events" as const,
    labelKey: "stats.events",
    icon: CalendarDays,
    href: "/dashboard/business/events" as const,
    canView: (access: PanelAccess) => access.canViewEvents,
  },
  {
    key: "locations" as const,
    labelKey: "stats.locations",
    icon: MapPin,
    href: "/dashboard/business/locations" as const,
    canView: (access: PanelAccess) => access.canViewLocations,
  },
  {
    key: "franchises" as const,
    labelKey: "stats.franchises",
    icon: GitBranch,
    href: "/dashboard/business/franchises" as const,
    canView: (access: PanelAccess) => access.canViewFranchises,
  },
  {
    key: "staff" as const,
    labelKey: "stats.staff",
    icon: Users,
    href: "/dashboard/business/staff" as const,
    canView: (access: PanelAccess) => access.canViewStaff,
  },
  {
    key: "roles" as const,
    labelKey: "stats.roles",
    icon: Shield,
    href: "/dashboard/business/roles" as const,
    canView: (access: PanelAccess) => access.canViewRoles,
  },
] as const;

interface PanelAccess {
  canViewLocations: boolean;
  canViewFranchises: boolean;
  canViewStaff: boolean;
  canViewRoles: boolean;
  canViewEvents: boolean;
}

export default function BusinessPanelOverview({ permissions, currentRoleName }: BusinessPanelOverviewProps) {
  const t = useTranslations("businessPanel");
  const [data, setData] = useState<OverviewData | null>(null);
  const [access, setAccess] = useState<PanelAccess | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch("/api/business-panel")
      .then(async (res) => {
        if (!res.ok) throw new Error("Failed");
        const json = await res.json();
        setData({
          franchises: json.franchises?.length ?? 0,
          locations: json.locations?.length ?? 0,
          members: json.members?.length ?? 0,
          roles: json.roles?.length ?? 0,
          events: json.eventsCount ?? 0,
        });
        setAccess(json.access ?? null);
      })
      .catch(() => {
        setData(null);
        setAccess(null);
      })
      .finally(() => setLoading(false));
  }, []);

  const statValues: Record<string, number> = {
    locations: data?.locations ?? 0,
    franchises: data?.franchises ?? 0,
    staff: data?.members ?? 0,
    roles: data?.roles ?? 0,
    events: data?.events ?? 0,
  };

  const visibleStats = access
    ? STAT_LINKS.filter((stat) => stat.canView(access))
    : STAT_LINKS;

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold text-[var(--text)]">{t("overviewTitle")}</h2>
      </div>

      {loading ? (
        <p className="text-sm text-[var(--text-muted)]">{t("loading")}</p>
      ) : visibleStats.length === 0 ? (
        <p className="text-sm text-[var(--text-muted)]">{t("noPermissions")}</p>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {visibleStats.map((stat) => (
            <Link
              key={stat.key}
              href={stat.href}
              className="group flex cursor-pointer flex-col rounded-xl border border-[var(--border)] bg-[var(--bg)]/40 p-4 transition-all hover:border-sky-500/30 hover:bg-sky-500/5"
            >
              <div className="mb-3 flex items-start justify-between">
                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/10 text-sky-400">
                  <stat.icon className="h-4 w-4" />
                </div>
                <ArrowRight className="h-4 w-4 text-[var(--text-faint)] transition-transform group-hover:translate-x-0.5 group-hover:text-sky-400 rtl:rotate-180" />
              </div>
              <p className="text-2xl font-semibold text-[var(--text)]">{statValues[stat.key]}</p>
              <p className="mt-0.5 text-sm text-[var(--text-muted)]">{t(stat.labelKey)}</p>
            </Link>
          ))}
        </div>
      )}

      {/* Current access — shows only this session's role + its permissions */}
      <div className="rounded-xl border border-[var(--border)] bg-[var(--bg)]/40 p-4">
        <div className="flex items-center justify-between gap-3">
          <p className="text-sm font-medium text-[var(--text)]">{t("yourAccess")}</p>
          <span className="inline-flex items-center gap-1 rounded-full border border-sky-500/20 bg-sky-500/10 px-2.5 py-1 text-[11px] font-medium text-sky-300">
            <Shield className="h-3 w-3" />
            {currentRoleName}
          </span>
        </div>
        <p className="mt-3 text-xs text-[var(--text-faint)]">
          {t("permissionsCount", { count: permissions.length })}
        </p>
        <div className="mt-2 flex flex-wrap gap-1.5">
          {permissions.length === 0 ? (
            <span className="text-xs text-[var(--text-muted)]">{t("noPermissions")}</span>
          ) : (
            permissions.map((perm) => (
              <span
                key={perm}
                className="rounded-full border border-[var(--border)] bg-[var(--bg-elevated)] px-2.5 py-1 text-[11px] text-[var(--text-muted)]"
              >
                {perm}
              </span>
            ))
          )}
        </div>
      </div>
    </div>
  );
}