import { getServerSession } from "next-auth";
import { Activity, AlertCircle, Bot, MessageSquare, Server, Wallet } from "lucide-react";
import { Badge, Card, LinkButton } from "@/components/ui";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { getDictionary, getLocale } from "@/lib/i18n";
import { formatDate, instanceLimit, instancePublicUrl } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function DashboardPage(props: { searchParams?: Promise<{ error?: string }> }) {
  const session = await getServerSession(authOptions);
  const locale = await getLocale();
  const t = getDictionary(locale).overview;
  const user = await prisma.user.findUnique({
    where: { id: parseInt(session!.user.id) },
    include: { instances: { orderBy: { created_at: "desc" }, take: 5 } }
  });

  const searchParams = await props.searchParams;
  const error = searchParams?.error;

  const instances = user?.instances || [];
  const running = instances.filter((item) => item.status === "RUNNING").length;
  const errors = instances.filter((item) => item.status === "ERROR").length;

  return (
    <div className="space-y-6">
      {error === "admin_required" && (
        <div className="rounded-md border border-red-200 bg-red-50 p-4 text-sm text-red-800">
          <strong>Admin access required.</strong> Your account does not have admin privileges. If you need admin access,
          contact another administrator or have your user role updated in the database.
        </div>
      )}
      <div className="flex flex-col justify-between gap-3 md:flex-row md:items-center">
        <div>
          <h1 className="text-3xl font-bold text-ink">{t.title}</h1>
          <p className="mt-1 text-slate-600">{t.subtitle}</p>
        </div>
        <LinkButton href="/dashboard/instances">{t.createHermes}</LinkButton>
      </div>

      <div className="grid gap-4 md:grid-cols-5">
        <Card>
          <Server className="text-brand" size={22} />
          <p className="mt-3 text-sm text-slate-500">{t.instances}</p>
          <p className="text-2xl font-bold text-ink">{instances.length}/{instanceLimit(user?.subscription_tier)}</p>
        </Card>
        <Card>
          <Activity className="text-mint" size={22} />
          <p className="mt-3 text-sm text-slate-500">{t.running}</p>
          <p className="text-2xl font-bold text-ink">{running}</p>
        </Card>
        <Card>
          <AlertCircle className="text-amber" size={22} />
          <p className="mt-3 text-sm text-slate-500">{t.errors}</p>
          <p className="text-2xl font-bold text-ink">{errors}</p>
        </Card>
        <Card>
          <Wallet className="text-brand" size={22} />
          <p className="mt-3 text-sm text-slate-500">{t.plan}</p>
          <p className="text-2xl font-bold text-ink">{user?.subscription_tier}</p>
        </Card>
      </div>

      <Card>
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-bold text-ink">{t.latestInstances}</h2>
          <LinkButton href="/dashboard/instances" variant="secondary">{getDictionary(locale).common.viewAll}</LinkButton>
        </div>
        <div className="mt-4 divide-y divide-slate-100">
          {instances.length ? (
            instances.map((instance) => (
              <div key={instance.id} className="flex flex-col justify-between gap-3 py-4 md:flex-row md:items-center">
                <div>
                  <p className="font-semibold text-ink">{instance.name}</p>
                  <a className="text-sm text-brand" href={instancePublicUrl(instance.subdomain)} target="_blank">
                    {instance.subdomain}
                  </a>
                </div>
                <div className="flex items-center gap-3">
                  <Badge tone={instance.status === "RUNNING" ? "green" : instance.status === "ERROR" ? "red" : "amber"}>{instance.status}</Badge>
                  <span className="text-sm text-slate-500">{formatDate(instance.created_at, locale)}</span>
                </div>
              </div>
            ))
          ) : (
            <p className="py-6 text-sm text-slate-500">{t.noInstances}</p>
          )}
        </div>
      </Card>

      <Card>
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <MessageSquare size={22} className="text-brand" />
            <h2 className="text-lg font-bold text-ink">Jarvis AI</h2>
          </div>
          <LinkButton href="/dashboard/jarvis">{getDictionary(locale).common.viewAll}</LinkButton>
        </div>
        <p className="mb-4 text-sm text-slate-600">Iron-Man holographic HUD for your Hermes agent.</p>
        {instances.filter(i => i.app_type === "jarvis" && i.status === "RUNNING").length > 0 ? (
          <div className="space-y-3">
            {instances.filter(i => i.app_type === "jarvis" && i.status === "RUNNING").map((instance) => {
              const payload = instance.deploy_payload as { hudToken?: string } | null;
              return (
                <div key={instance.id} className="flex items-center justify-between bg-slate-50 rounded-lg p-3">
                  <div>
                    <p className="font-medium text-sm text-ink">{instance.name}</p>
                    <a href={`https://${instance.subdomain}`} target="_blank" className="text-xs text-brand">{instance.subdomain}</a>
                    {payload?.hudToken && (
                      <p className="font-mono text-xs text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded inline-block mt-1">
                        ACCESS CODE: {payload.hudToken}
                      </p>
                    )}
                  </div>
                  <Badge tone="green">RUNNING</Badge>
                </div>
              );
            })}
          </div>
        ) : (
          <p className="text-sm text-slate-500">No running Jarvis instances.</p>
        )}
      </Card>
    </div>
  );
}