'use client';

import { motion } from 'framer-motion';
import { Mail, Calendar, Shield, LogOut } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
import { useAuthStore } from '@/stores/auth-store';

export default function AdminProfilePage() {
  const { user, logout } = useAuthStore();

  return (
    <>
      <title>Profil Admin | Nadhom Smart</title>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="space-y-6"
      >
        {/* Profile Header */}
        <Card className="border-border/50 overflow-hidden">
          <div className="h-20 gradient-primary" />
          <CardContent className="relative pb-5 px-5 -mt-10">
            <Avatar className="h-20 w-20 border-4 border-card shadow-lg">
              <AvatarImage src={user?.avatar} />
              <AvatarFallback className="bg-primary text-primary-foreground text-xl font-bold">
                {user?.fullName?.charAt(0) || 'A'}
              </AvatarFallback>
            </Avatar>
            <h2 className="mt-3 font-heading text-xl font-bold">{user?.fullName || 'Administrator'}</h2>
            <p className="text-sm text-muted-foreground">{user?.email || 'admin@alfiyah.com'}</p>
          </CardContent>
        </Card>

        {/* Info */}
        <Card className="border-border/50">
          <CardContent className="py-4 px-5 space-y-4">
            <div className="flex items-center gap-3">
              <Mail className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="text-xs text-muted-foreground">Email</p>
                <p className="text-sm font-medium">{user?.email || 'admin@alfiyah.com'}</p>
              </div>
            </div>
            <Separator />
            <div className="flex items-center gap-3">
              <Shield className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="text-xs text-muted-foreground">Role</p>
                <p className="text-sm font-medium capitalize">{user?.role || 'Admin'}</p>
              </div>
            </div>
            <Separator />
            <div className="flex items-center gap-3">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <div>
                <p className="text-xs text-muted-foreground">Bergabung</p>
                <p className="text-sm font-medium">Januari 2024</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Button
          variant="outline"
          className="w-full rounded-xl gap-2 text-destructive border-destructive/30 hover:bg-destructive/5"
          onClick={logout}
        >
          <LogOut className="h-4 w-4" />
          Keluar
        </Button>
      </motion.div>
    </>
  );
}