"use client";

import { Users, MonitorSmartphone, ShieldAlert, Activity } from "lucide-react";
import { useLanguage } from "@/components/language-provider";
import { Section, SectionHeading } from "@/components/ui/section";

const STATS = [
  { key: "users", value: "128,492", icon: "users" },
  { key: "sessions", value: "3,914", icon: "sessions" },
  { key: "events", value: "742", icon: "events" },
  { key: "activeNow", value: "1,208", icon: "activeNow" },
] as const;

const ICONS = {
  users: Users,
  sessions: MonitorSmartphone,
  events: ShieldAlert,
  activeNow: Activity,
};

const SESSION_ROWS = [
  { user: "leila@bermooda.io", app: "Bermooda", loc: "Tehran, IR", status: "active" },
  { user: "sam@hamsoo.com", app: "Hamsoo", loc: "Istanbul, TR", status: "active" },
  { user: "ops@acme.com", app: "Bermooda", loc: "Berlin, DE", status: "idle" },
  { user: "dev@acme.com", app: "Hamsoo", loc: "Dubai, AE", status: "active" },
];

const EVENT_ROWS = [
  { kind: "login_success", who: "leila@bermooda.io", when: "2m" },
  { kind: "token_refreshed", who: "sam@hamsoo.com", when: "6m" },
  { kind: "login_failed", who: "unknown@acme.com", when: "14m" },
  { kind: "session_revoked", who: "ops@acme.com", when: "22m" },
];

export function Dashboard() {
  const { t, lang } = useLanguage();
  return (
    <Section id="dashboard" className="bg-ink/80">
      <div className="container-x">
        <SectionHeading
          eyebrow={t.dashboard.eyebrow}
          title={t.dashboard.title}
          subtitle={t.dashboard.subtitle}
        />

        <div className="rounded-2xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-lg shadow-black/20 mb-8 sm:mb-12">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {STATS.map((s) => {
              const Icon = ICONS[s.icon];
              return (
                <div
                  key={s.key}
                  className="rounded-2xl border border-white/10 bg-white/5 p-4 flex flex-col items-start rounded-xl hover:bg-white/10 transition hover:-translate-y-0.5"
                >
                  <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-500/15 text-brand-200">
                    <Icon className="h-4 w-4" />
                  </span>
                  <div className="mt-3 text-2xl font-bold text-white">{s.value}</div>
                  <div className="mt-1 text-xs text-slate-400">
                    {t.dashboard[s.key]}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <div className="rounded-2xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-lg shadow-black/20">
            <h3 className="text-sm font-semibold text-white mb-4">
              {t.dashboard.sessions}
            </h3>
            <div className="space-y-3">
              {SESSION_ROWS.map((r, i) => (
                <div
                  key={i}
                  className="flex items-center justify-between rounded-lg bg-ink/60 px-3 py-2 text-sm"
                >
                  <div className="flex items-center gap-3">
                    <span className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-gradient text-[10px] font-bold text-white">
                      {r.user.charAt(0).toUpperCase()}
                    </span>
                    <div>
                      <div className="text-slate-200">{r.user}</div>
                      <div className="text-[11px] text-slate-500">
                        {r.app} · {r.loc}
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <span
                      className={
                        "rounded-full px-2 py-0.5 text-[10px] " +
                        (r.status === "active"
                          ? "bg-emerald-500/15 text-emerald-300"
                          : "bg-white/10 text-slate-400")
                      }
                    >
                      {r.status === "active"
                        ? lang === "fa"
                          ? "فعال"
                          : "Active"
                        : lang === "fa"
                          ? "غیرفعال"
                          : "Idle"}
                    </span>
                    <button
                      className="rounded-lg border border-white/10 px-2.5 py-1 text-[11px] text-slate-300 transition hover:border-rose-500/40 hover:text-rose-300"
                    >
                      {t.dashboard.revoke}
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-2xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-lg shadow-black/20">
            <h3 className="text-sm font-semibold text-white">
              {t.dashboard.events}
            </h3>
            <div className="mt-4 space-y-2">
              {EVENT_ROWS.map((r, i) => (
                <div
                  key={i}
                  className="flex items-center justify-between rounded-lg bg-ink/60 px-3 py-2 font-mono text-xs"
                >
                  <span className="text-brand-200">{r.kind}</span>
                  <span className="text-slate-300">{r.who}</span>
                  <span className="text-slate-500">{r.when}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}