'use client';

import { UserCog, ShieldCheck, CalendarDays } from 'lucide-react';
import Image from 'next/image';
import { useAuthStore } from '@/stores/authStore';
import Link from 'next/link';

export default function AdminProfile() {
    const userData = useAuthStore((state) => state.user);

    const user = userData ? userData : userData;
    
    console.log(user);
    return (
        <div className="p-6 bg-gray-100 min-h-screen">
            {/* Header */}
            <div className="mb-6">
                <h2 className="text-3xl font-bold text-gray-800">Admin Profile</h2>
                <p className="text-gray-500">View and manage your administrative account details.</p>
            </div>

            {/* Banner & Stats */}
            <div className="bg-white shadow-md rounded-2xl overflow-hidden mb-8">
                <div className="relative w-full h-60 md:h-80">
                    <Image
                        src="/images/admin-banner.jpg"
                        alt="Admin Banner"
                        fill
                        className="object-cover"
                    />
                    <div className="absolute bottom-4 left-6 text-white">
                        <h3 className="text-2xl font-bold">John Admin</h3>
                        <p className="text-sm opacity-90">Admin ID: #0001</p>
                    </div>
                </div>
                <div className="flex justify-end gap-8 px-6 py-4 bg-gray-50">
                    <div className="text-center">
                        <p className="text-gray-500 text-sm">Users</p>
                        <p className="text-lg font-semibold text-gray-800">120</p>
                    </div>
                    <div className="text-center">
                        <p className="text-gray-500 text-sm">Reports</p>
                        <p className="text-lg font-semibold text-gray-800">35</p>
                    </div>
                    <div className="text-center">
                        <p className="text-gray-500 text-sm">Tasks</p>
                        <p className="text-lg font-semibold text-gray-800">12</p>
                    </div>
                </div>
            </div>

            {/* Main Content */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Sidebar Info */}
                <div className="space-y-6">
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <h4 className="text-lg font-semibold mb-3 text-gray-800">Admin Responsibilities</h4>
                        <ul className="list-disc list-inside text-gray-700 text-sm space-y-1">
                            <li>User Management</li>
                            <li>System Oversight</li>
                            <li>Report Auditing</li>
                        </ul>
                    </div>

                    <div className="bg-white rounded-xl shadow-md p-5">
                        <h4 className="text-lg font-semibold mb-3 text-gray-800">Recent Actions</h4>
                        <ul className="text-gray-700 text-sm space-y-1">
                            <li><ShieldCheck className="inline mr-2" /> Approved Doctor Registration</li>
                            <li><CalendarDays className="inline mr-2" /> Updated system roles - May 1</li>
                            <li><UserCog className="inline mr-2" /> Reset patient account - April 28</li>
                        </ul>
                    </div>
                </div>

                {/* Main Info */}
                <div className="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
                    <h4 className="text-xl font-semibold text-gray-800 mb-4">Personal Information</h4>
                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 text-sm text-gray-700">
                        <div className="relative w-24 h-24 md:w-32 md:h-32">
                            <Image
                                src="/images/patient1.jpg"
                                alt="Admin Avatar"
                                fill
                                className="rounded-full border-4 border-white shadow-md object-cover"
                            />
                        </div>
                        <div>
                            <p className="font-medium text-gray-600">Full Name</p>
                            <p>John Admin</p>
                        </div>
                        <div>
                            <p className="font-medium text-gray-600">Mobile</p>
                            <p>+254-700123456</p>
                        </div>
                        <div>
                            <p className="font-medium text-gray-600">Email</p>
                            <p>admin@example.com</p>
                        </div>
                        <div>
                            <p className="font-medium text-gray-600">Role</p>
                            <p>Super Administrator</p>
                        </div>
                        <div>
                            <p className="font-medium text-gray-600">Joined</p>
                            <p>2022-01-05</p>
                        </div>
                        <a
                            href="/dashboard/admin/profile"
                            className="mt-4 text-center bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-200"
                        >
                            <UserCog className="inline mr-2" /> Edit Profile
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}
