"use client"

import Image from "next/image"
import {
  Activity,
  ArrowUpRight,
  ChevronDown,
  Coins,
  LayoutTemplate,
  Search,
  Sparkles,
} from "lucide-react"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Progress } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

const formatEurFromCents = (cents: number) =>
  new Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
  }).format(cents / 100)

const mockRuns = [
  {
    id: "run-8841",
    workspace: "Sommer-Kampagne",
    node: "KI-Bild",
    model: "flux-pro",
    status: "done" as const,
    credits: 42,
    updated: "vor 12 Min.",
  },
  {
    id: "run-8839",
    workspace: "Produktfotos",
    node: "KI-Bild",
    model: "flux-schnell",
    status: "executing" as const,
    credits: 18,
    updated: "gerade eben",
  },
  {
    id: "run-8832",
    workspace: "Social Variants",
    node: "Compare",
    model: "—",
    status: "idle" as const,
    credits: 0,
    updated: "vor 1 Std.",
  },
  {
    id: "run-8828",
    workspace: "Sommer-Kampagne",
    node: "KI-Bild",
    model: "flux-pro",
    status: "error" as const,
    credits: 0,
    updated: "vor 2 Std.",
  },
]

const mockWorkspaces = [
  { name: "Sommer-Kampagne", nodes: 24, frames: 3, initial: "S" },
  { name: "Produktfotos", nodes: 11, frames: 2, initial: "P" },
  { name: "Social Variants", nodes: 8, frames: 1, initial: "V" },
]

function StatusDot({ status }: { status: (typeof mockRuns)[0]["status"] }) {
  const base = "inline-block size-2 rounded-full"
  switch (status) {
    case "done":
      return <span className={cn(base, "bg-primary")} />
    case "executing":
      return (
        <span className="relative inline-flex size-2">
          <span className="absolute inline-flex size-full animate-ping rounded-full bg-primary/60" />
          <span className={cn(base, "relative bg-primary")} />
        </span>
      )
    case "idle":
      return <span className={cn(base, "bg-border")} />
    case "error":
      return <span className={cn(base, "bg-destructive")} />
  }
}

function statusLabel(status: (typeof mockRuns)[0]["status"]) {
  switch (status) {
    case "done":
      return "Fertig"
    case "executing":
      return "Läuft"
    case "idle":
      return "Bereit"
    case "error":
      return "Fehler"
  }
}

export default function DashboardPage() {
  const balanceCents = 4320
  const reservedCents = 180
  const monthlyPoolCents = 5000
  const usagePercent = Math.round(
    ((monthlyPoolCents - balanceCents) / monthlyPoolCents) * 100,
  )

  return (
    <div className="min-h-full bg-background">
      {/* Header */}
      <header className="sticky top-0 z-10 border-b bg-background/90 backdrop-blur-sm">
        <div className="mx-auto flex h-14 max-w-5xl items-center gap-4 px-6">
          <div className="flex items-center gap-2.5 text-base font-semibold tracking-tight">
            <Image
              src="/logos/lemonspace-logo-v2-primary-rgb.svg"
              alt=""
              width={449}
              height={86}
              unoptimized
              className="h-5 w-auto shrink-0"
              aria-hidden
            />
          </div>

          <div className="relative ml-8 hidden max-w-xs flex-1 sm:block">
            <Search className="pointer-events-none absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-muted-foreground" />
            <Input
              className="h-8 rounded-lg bg-muted/60 pl-8 text-sm"
              placeholder="Suchen…"
              type="search"
              disabled
            />
          </div>

          <div className="ml-auto flex items-center gap-3">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="gap-2 px-1.5">
                  <Avatar className="size-7">
                    <AvatarFallback className="bg-primary/12 text-xs font-medium text-primary">
                      MK
                    </AvatarFallback>
                  </Avatar>
                  <span className="hidden text-sm font-medium md:inline">
                    Mock Nutzer
                  </span>
                  <ChevronDown className="size-3.5 text-muted-foreground" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuLabel>Account (Demo)</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem disabled>Einstellungen</DropdownMenuItem>
                <DropdownMenuItem disabled>Abrechnung</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem disabled>Abmelden</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-5xl px-6 pt-10 pb-16">
        {/* Greeting & Context */}
        <div className="mb-10">
          <h1 className="text-2xl font-semibold tracking-tight">
            Guten Tag, Mock Nutzer
          </h1>
          <p className="mt-1.5 text-muted-foreground">
            Überblick über deine Credits und laufende Generierungen.
          </p>
        </div>

        {/* Credits & Active Generation — asymmetric two-column */}
        <div className="mb-12 grid gap-6 lg:grid-cols-[1fr_1.2fr]">
          {/* Credits Section */}
          <div className="space-y-5">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Coins className="size-3.5" />
              <span>Credit-Guthaben</span>
            </div>
            <div className="text-4xl font-semibold tabular-nums tracking-tight">
              {formatEurFromCents(balanceCents)}
            </div>

            <div className="space-y-3 pt-1">
              <div className="flex items-baseline justify-between text-sm">
                <span className="text-muted-foreground">Reserviert</span>
                <span className="tabular-nums font-medium">
                  {formatEurFromCents(reservedCents)}
                </span>
              </div>
              <div>
                <div className="mb-2 flex items-baseline justify-between text-sm">
                  <span className="text-muted-foreground">Monatskontingent</span>
                  <span className="tabular-nums text-muted-foreground">
                    {usagePercent}%
                  </span>
                </div>
                <Progress value={usagePercent} className="h-1.5" />
              </div>
            </div>

            <p className="text-xs leading-relaxed text-muted-foreground/80">
              Bei fehlgeschlagenen Jobs werden reservierte Credits automatisch freigegeben.
            </p>
          </div>

          {/* Active Generation */}
          <div className="rounded-2xl border bg-card p-6 shadow-sm shadow-foreground/3">
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Sparkles className="size-3.5" />
                <span>Aktive Generierung</span>
              </div>
              <Badge className="gap-1.5 font-normal">
                <span className="relative inline-flex size-1.5">
                  <span className="absolute inline-flex size-full animate-ping rounded-full bg-primary-foreground/60 opacity-75" />
                  <span className="relative inline-flex size-1.5 rounded-full bg-primary-foreground" />
                </span>
                Läuft
              </Badge>
            </div>

            <h2 className="mt-4 text-lg font-medium">
              Produktfotos — Variante 3/4
            </h2>

            <div className="mt-5">
              <div className="mb-2 flex items-baseline justify-between text-sm">
                <span className="text-muted-foreground">Fortschritt</span>
                <span className="font-medium tabular-nums">62%</span>
              </div>
              <Progress value={62} className="h-1.5" />
            </div>

            <p className="mt-4 text-xs text-muted-foreground leading-relaxed">
              Step 2 von 4 —{" "}
              <span className="font-mono text-[0.7rem]">
                flux-schnell
              </span>
            </p>
          </div>
        </div>

        {/* Workspaces */}
        <section className="mb-12">
          <div className="mb-4 flex items-center justify-between">
            <div className="flex items-center gap-2 text-sm font-medium">
              <LayoutTemplate className="size-3.5 text-muted-foreground" />
              Workspaces
            </div>
            <Button variant="ghost" size="sm" className="text-muted-foreground" disabled>
              Neuer Workspace
            </Button>
          </div>

          <div className="grid gap-3 sm:grid-cols-3">
            {mockWorkspaces.map((ws) => (
              <button
                key={ws.name}
                className={cn(
                  "group flex items-center gap-4 rounded-xl border bg-card p-4 text-left shadow-sm shadow-foreground/3 transition-all",
                  "hover:bg-muted/60 hover:shadow-md hover:shadow-foreground/4"
                )}
                disabled
              >
                <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/8 text-sm font-semibold text-primary">
                  {ws.initial}
                </div>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium">{ws.name}</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    {ws.nodes} Nodes · {ws.frames} Frames
                  </p>
                </div>
                <ArrowUpRight className="size-4 text-muted-foreground/0 transition-colors group-hover:text-muted-foreground" />
              </button>
            ))}
          </div>
        </section>

        {/* Recent Activity */}
        <section>
          <div className="mb-4 flex items-center gap-2 text-sm font-medium">
            <Activity className="size-3.5 text-muted-foreground" />
            Letzte Aktivität
          </div>

          <div className="rounded-xl border bg-card shadow-sm shadow-foreground/3">
            <div className="divide-y">
              {mockRuns.map((run) => (
                <div
                  key={run.id}
                  className="flex items-center gap-4 px-5 py-3.5"
                >
                  <StatusDot status={run.status} />

                  <div className="min-w-0 flex-1">
                    <div className="flex items-baseline gap-2">
                      <span className="truncate text-sm font-medium">
                        {run.workspace}
                      </span>
                      <span className="shrink-0 text-xs text-muted-foreground">
                        {run.node}
                      </span>
                    </div>
                    <div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
                      {run.model !== "—" && (
                        <span className="font-mono text-[0.7rem]">{run.model}</span>
                      )}
                      {run.credits > 0 && (
                        <>
                          <span aria-hidden>·</span>
                          <span className="tabular-nums">{run.credits} ct</span>
                        </>
                      )}
                    </div>
                  </div>

                  <div className="shrink-0 text-right">
                    <span className="text-xs text-muted-foreground">
                      {statusLabel(run.status)}
                    </span>
                    <p className="mt-0.5 text-[0.7rem] text-muted-foreground/70">
                      {run.updated}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}