"use client";

import Link from "next/link";
import * as Icons from "lucide-react";
import { getAllModules } from "@/core/module-registry";
import { useFeatureFlag } from "@/core/feature-flags";
import { useI18n } from "@/core/i18n";
import { EXTERNAL_TOOLS } from "@/config/external-tools";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import { useDashboardData } from "@/modules/dashboard/hooks/use-dashboard-data";

function DynamicIcon({
  name,
  className,
}: {
  name: string;
  className?: string;
}) {
  const pascalName = name.replace(/(^|-)([a-z])/g, (_, _p, c: string) =>
    c.toUpperCase(),
  );
  const IconComponent = (
    Icons as unknown as Record<
      string,
      React.ComponentType<{ className?: string }>
    >
  )[pascalName];
  if (!IconComponent) return <Icons.Circle className={className} />;
  return <IconComponent className={className} />;
}

function ModuleCard({
  module,
}: {
  module: {
    id: string;
    name: string;
    description: string;
    icon: string;
    route: string;
    featureFlag: string;
  };
}) {
  const enabled = useFeatureFlag(module.featureFlag);
  if (!enabled) return null;

  return (
    <Link href={module.route}>
      <Card className="h-full transition-colors hover:border-primary/50 hover:bg-accent/30">
        <CardHeader className="flex flex-row items-center gap-4 space-y-0">
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10">
            <DynamicIcon name={module.icon} className="h-5 w-5 text-primary" />
          </div>
          <div>
            <CardTitle className="text-base">{module.name}</CardTitle>
            <CardDescription className="text-sm">
              {module.description}
            </CardDescription>
          </div>
        </CardHeader>
      </Card>
    </Link>
  );
}

const RELATIVE_LABELS: Intl.RelativeTimeFormatUnit[] = [
  "year",
  "month",
  "week",
  "day",
  "hour",
  "minute",
  "second",
];
const RELATIVE_MS = [
  31536000000, 2592000000, 604800000, 86400000, 3600000, 60000, 1000,
];

function relativeTime(isoString: string): string {
  const diff = new Date(isoString).getTime() - Date.now();
  const rtf = new Intl.RelativeTimeFormat("ro", { numeric: "auto" });
  for (let i = 0; i < RELATIVE_MS.length; i++) {
    const ms = RELATIVE_MS[i];
    if (ms === undefined) continue;
    const absMs = RELATIVE_LABELS[i];
    if (absMs === undefined) continue;
    if (Math.abs(diff) >= ms || i === RELATIVE_MS.length - 1) {
      return rtf.format(Math.round(diff / ms), absMs);
    }
  }
  return "acum";
}

const MODULE_ICONS: Record<string, string> = {
  registratura: "BookOpen",
  "address-book": "Users",
  "it-inventory": "Monitor",
  "password-vault": "KeyRound",
  "digital-signatures": "PenLine",
  "word-templates": "FileText",
  "tag-manager": "Tag",
  "prompt-generator": "Wand2",
};

const CATEGORY_LABELS: Record<string, string> = {
  dev: "Dezvoltare",
  tools: "Instrumente",
  monitoring: "Monitorizare",
  security: "Securitate",
};

export default function DashboardPage() {
  const { t } = useI18n();
  const modules = getAllModules();
  const { activity, kpis } = useDashboardData();

  const toolCategories = Object.keys(CATEGORY_LABELS).filter((cat) =>
    EXTERNAL_TOOLS.some((tool) => tool.category === cat),
  );

  return (
    <div className="mx-auto max-w-6xl space-y-8">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">
          {t("dashboard.welcome")}
        </h1>
        <p className="mt-1 text-muted-foreground">{t("dashboard.subtitle")}</p>
      </div>

      {/* KPI panels */}
      <div>
        <h2 className="mb-3 text-lg font-semibold">Indicatori cheie</h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground">
                Registratură — intrări săptămâna aceasta
              </p>
              <p className="text-2xl font-bold">{kpis.registraturaThisWeek}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground">Dosare deschise</p>
              <p className="text-2xl font-bold">{kpis.registraturaOpen}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground">
                Termene legale săptămâna aceasta
              </p>
              <p className="text-2xl font-bold">{kpis.deadlinesThisWeek}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground">Termene depășite</p>
              <p
                className={`text-2xl font-bold ${kpis.overdueDeadlines > 0 ? "text-destructive" : ""}`}
              >
                {kpis.overdueDeadlines}
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground">
                Contacte noi luna aceasta
              </p>
              <p className="text-2xl font-bold">{kpis.contactsThisMonth}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground">
                Echipamente IT active
              </p>
              <p className="text-2xl font-bold">{kpis.inventoryActive}</p>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Activity feed */}
      {activity.length > 0 && (
        <div>
          <h2 className="mb-3 text-lg font-semibold">Activitate recentă</h2>
          <Card>
            <CardContent className="divide-y p-0">
              {activity.map((item) => (
                <div
                  key={item.id}
                  className="flex items-center gap-3 px-4 py-2.5"
                >
                  <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted">
                    <DynamicIcon
                      name={MODULE_ICONS[item.namespace] ?? "Circle"}
                      className="h-3.5 w-3.5 text-muted-foreground"
                    />
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm">
                      <span className="font-medium">{item.label}</span>
                      <span className="ml-1 text-muted-foreground text-xs">
                        {item.action}
                      </span>
                    </p>
                    <p className="text-[11px] text-muted-foreground">
                      {item.moduleLabel}
                    </p>
                  </div>
                  <span className="shrink-0 text-[11px] text-muted-foreground">
                    {relativeTime(item.timestamp)}
                  </span>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>
      )}

      {/* Modules grid */}
      <div>
        <h2 className="mb-4 text-lg font-semibold">{t("dashboard.modules")}</h2>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {modules.map((m) => (
            <ModuleCard key={m.id} module={m} />
          ))}
        </div>
      </div>

      {/* External tools */}
      <div>
        <h2 className="mb-4 text-lg font-semibold">Instrumente externe</h2>
        <div className="space-y-4">
          {toolCategories.map((cat) => (
            <div key={cat}>
              <Badge variant="outline" className="mb-2">
                {CATEGORY_LABELS[cat]}
              </Badge>
              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {EXTERNAL_TOOLS.filter((tool) => tool.category === cat).map(
                  (tool) => {
                    const cardContent = (
                      <Card
                        key={tool.id}
                        className="transition-colors hover:bg-accent/30"
                      >
                        <CardHeader className="flex flex-row items-center gap-3 space-y-0 p-4">
                          <DynamicIcon
                            name={tool.icon}
                            className="h-4 w-4 text-muted-foreground"
                          />
                          <div>
                            <p className="text-sm font-medium">{tool.name}</p>
                            <p className="text-xs text-muted-foreground">
                              {tool.description}
                            </p>
                          </div>
                        </CardHeader>
                      </Card>
                    );
                    if (!tool.url) return cardContent;
                    return (
                      <a
                        key={tool.id}
                        href={tool.url}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {cardContent}
                      </a>
                    );
                  },
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}