"use client";

import { Mail, Shield, Calendar } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { PageHeader } from "@/components/ui/page-components";
import { useUserStore } from "@/store";
import { getInitials } from "@/lib/utils";

export default function AdminProfilePage() {
  const { email, displayName, joinedAt } = useUserStore();
  const initials = displayName ? getInitials(displayName) : email ? getInitials(email) : "A";

  const joinedDate = joinedAt
    ? new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric" }).format(new Date(joinedAt))
    : "—";

  return (
    <div className="max-w-xl space-y-6">
      <PageHeader
        title="Profile"
        backLink={{ href: "/admin", label: "Back to Dashboard" }}
        description="Your admin account information"
      />

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Account Details</CardTitle>
          <CardDescription>Information associated with your admin account</CardDescription>
        </CardHeader>
        <CardContent className="space-y-5">

          {/* Avatar + name */}
          <div className="flex items-center gap-4">
            <Avatar className="h-16 w-16">
              <AvatarFallback className="bg-gradient-to-br from-red-500 to-rose-600 text-white text-xl font-bold">
                {initials}
              </AvatarFallback>
            </Avatar>
            <div className="space-y-1">
              <p className="text-base font-semibold text-gray-900 dark:text-gray-100">
                {displayName || "Admin"}
              </p>
              <Badge variant="destructive" className="text-xs gap-1">
                <Shield className="h-3 w-3" />
                Admin
              </Badge>
            </div>
          </div>

          <div className="h-px bg-gray-100 dark:bg-gray-800" />

          {/* Email */}
          <div className="space-y-1.5">
            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Email Address</p>
            <div className="flex items-center gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-4 py-2.5">
              <Mail className="h-4 w-4 text-gray-400 shrink-0" />
              <span className="text-sm text-gray-900 dark:text-gray-100 truncate">{email || "—"}</span>
            </div>
          </div>

          {/* Role */}
          <div className="space-y-1.5">
            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Role</p>
            <div className="flex items-center gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-4 py-2.5">
              <Shield className="h-4 w-4 text-red-500 shrink-0" />
              <span className="text-sm text-gray-900 dark:text-gray-100">Administrator</span>
            </div>
          </div>

          {/* Session since */}
          {joinedAt && (
            <div className="space-y-1.5">
              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Session Started</p>
              <div className="flex items-center gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-4 py-2.5">
                <Calendar className="h-4 w-4 text-gray-400 shrink-0" />
                <span className="text-sm text-gray-900 dark:text-gray-100">{joinedDate}</span>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}