import Layout from "@/components/Layout";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { REALM_OPTIONS, RealmKey } from "@/components/settings/RealmSwitcher";
import { useAuth } from "@/contexts/AuthContext";
import { useMemo } from "react";
import { Link } from "react-router-dom";
import { cn } from "@/lib/utils";

export default function Realms() {
  const { profile, roles } = useAuth();
  const lastRealm = (profile as any)?.user_type as RealmKey | undefined;
  const canSeeStaff = useMemo(
    () => roles.some((r) => ["owner", "admin", "founder", "staff", "employee"].includes(r.toLowerCase())),
    [roles],
  );
  const visible = useMemo(
    () => REALM_OPTIONS.filter((o) => (o.id === "staff" ? canSeeStaff : true)),
    [canSeeStaff],
  );

  return (
    <Layout>
      <div className="mx-auto w-full max-w-6xl px-4 py-10 lg:px-6">
        <div className="mb-8">
          <Badge variant="outline" className="mb-2">Realms</Badge>
          <h1 className="text-3xl font-bold">Choose your realm</h1>
          <p className="text-muted-foreground">Your dashboard adapts to the selected realm. Last used realm is highlighted.</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {visible.map((realm, i) => {
            const Icon = realm.icon;
            const active = lastRealm === realm.id;
            return (
              <Card key={realm.id} className={cn("relative border border-border/50 transition-all hover:border-aethex-400/50", active && "border-aethex-400/70 shadow-lg")} style={{ animationDelay: `${i * 0.05}s` }}>
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <div className={cn("flex h-12 w-12 items-center justify-center rounded-xl text-white shadow", `bg-gradient-to-br ${realm.gradient}`)}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <div>
                      <CardTitle className="text-base">{realm.title}</CardTitle>
                      <CardDescription>{realm.name}</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">{realm.description}</p>
                  <div className="flex flex-wrap gap-2">
                    {realm.highlights.slice(0, 3).map((h) => (
                      <Badge key={h} variant="outline" className="text-xs">{h}</Badge>
                    ))}
                  </div>
                  <div className="pt-2">
                    {/* Navigates to dashboard and sets realm via query param */}
                    <Button asChild>
                      <Link to={`/dashboard?realm=${realm.id}`}>Open Dashboard</Link>
                    </Button>
                  </div>
                </CardContent>
                {active && (
                  <div className="pointer-events-none absolute inset-x-0 -top-px h-1 bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-400" />
                )}
              </Card>
            );
          })}
        </div>
      </div>
    </Layout>
  );
}