'use client';

import Image from 'next/image';
import { FileText, Book, Stethoscope, User, GraduationCap, Briefcase, Hospital, Phone, Mail, UserRound } from 'lucide-react';
import { useAuthStore } from '@/stores/authStore';
import Link from 'next/link';

export default function DoctorProfile() {
    const userData = useAuthStore((state) => state.user);
    const user = userData?.profile ? userData.profile : userData;

    if (!user) {
        return <div className="p-6 text-red-500">User not authenticated.</div>;
    }

    const avatarUrl = user.avatar
        ? user.avatar
        : '/images/patient1.jpg';

    return (
        <div className="p-6 bg-gray-100 min-h-screen">
            {/* Page Header */}
            <div className="mb-6">
                <h2 className="text-3xl font-bold text-gray-800">Doctor Profile</h2>
                <p className="text-gray-500">Manage your professional information and activities.</p>
            </div>

            {/* Banner & Quick Stats */}
            <div className="bg-white shadow-md rounded-2xl overflow-hidden mb-8">
                <div className="relative h-100 w-full">
                    <Image
                        src="/images/doctor-banner.jpg"
                        alt="Doctor Banner"
                        width={1200}
                        height={300}
                        className="object-cover w-full h-full"
                    />
                    <div className="absolute bottom-4 left-6 text-white">
                        <h3 className="text-2xl font-bold">Dr. {user.firstName} {user.lastName}</h3>
                        <p className="text-sm opacity-90">Doctor ID: #{user.id?.slice(0, 6) || "N/A"}</p>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Left Column */}
                <div className="space-y-6">
                    {/* Bio */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <div className="flex items-center mb-3">
                            <Book className="mr-2 text-blue-600" size={20} />
                            <h4 className="text-lg font-semibold text-gray-800">Bio</h4>
                        </div>
                        {user.bio ? (
                            <div className="text-gray-700 whitespace-pre-line">
                                {user.bio}
                            </div>
                        ) : (
                            <p className="text-gray-500">No bio information provided</p>
                        )}
                    </div>

                    {/* Specialization */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <div className="flex items-center mb-3">
                            <Stethoscope className="mr-2 text-blue-600" size={20} />
                            <h4 className="text-lg font-semibold text-gray-800">Specialization</h4>
                        </div>
                        <ul className="list-disc list-inside text-gray-700 text-sm space-y-1">
                            {user.specialization && user.specialization.trim() ? (
                                user.specialization
                                    .split(',')
                                    .map((spec, i) => <li key={i}>{spec.trim()}</li>)
                            ) : (
                                <li className="text-gray-500">Not specified</li>
                            )}
                        </ul>
                    </div>

                    {/* Experience */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <div className="flex items-center mb-3">
                            <Briefcase className="mr-2 text-blue-600" size={20} />
                            <h4 className="text-lg font-semibold text-gray-800">Experience</h4>
                        </div>
                        <div className="text-gray-700">
                            {user.yearsOfExperience ? (
                                <p className="text-sm">{user.yearsOfExperience} years of experience</p>
                            ) : (
                                <p className="text-sm text-gray-500">Not specified</p>
                            )}
                        </div>
                    </div>

                    {/* Education */}
                    <div className="bg-white rounded-xl shadow-md p-6">
                        <div className="flex items-center mb-4">
                            <GraduationCap className="mr-2 text-blue-600" size={20} />
                            <h4 className="text-xl font-semibold text-gray-800">Education</h4>
                        </div>
                        {user.education ? (
                            <div className="text-gray-700 whitespace-pre-line">
                                {user.education}
                            </div>
                        ) : (
                            <p className="text-gray-500">No education information provided</p>
                        )}
                    </div>
                </div>

                {/* Right Column */}
                <div className="lg:col-span-2 space-y-6">
                    {/* Professional Info */}
                    <div className="bg-white rounded-xl shadow-md p-6">
                        <h4 className="text-xl font-semibold text-gray-800 mb-4">Professional 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 left-6">
                                <img
                                    width={112}
                                    height={112}
                                    src={avatarUrl}
                                    alt="Doctor Avatar"
                                    className="w-28 h-28 rounded-full border-4 border-white shadow-md object-cover"
                                />
                            </div>
                            <div>
                                <p className="font-medium text-gray-600">Full Name</p>
                                <p>Dr. {user.firstName} {user.lastName}</p>
                            </div>
                            <div>
                                <p className="font-medium text-gray-600">Mobile</p>
                                <p>{user.phone || "N/A"}</p>
                            </div>
                            <div>
                                <p className="font-medium text-gray-600">Email</p>
                                <p>{user.email}</p>
                            </div>
                            <div>
                                <p className="font-medium text-gray-600">Location</p>
                                <p>{user.address || "Not specified"}</p>
                            </div>
                            <div>
                                <p className="font-medium text-gray-600">Gender</p>
                                <p>{user.gender || "Not specified"}</p>
                            </div>
                            <div>
                                <p className="font-medium text-gray-600">Date of Birth</p>
                                <p>{user.dateOfBirth ? user.dateOfBirth.split("T")[0] : "Not specified"}</p>
                            </div>
                            <div>
                                <p className="font-medium text-gray-600">License Number</p>
                                <p>{user.licenceNumber || "Not specified"}</p>
                            </div>
                        </div>
                    </div>

                    {/* Hospital Affiliation */}
                    <div className="bg-white rounded-xl shadow-md p-6">
                        <div className="flex items-center mb-4">
                            <Hospital className="mr-2 text-blue-600" size={20} />
                            <h4 className="text-xl font-semibold text-gray-800">Hospital Affiliations</h4>
                        </div>
                        {user.hospitalAffiliation ? (
                            <div className="text-gray-700 whitespace-pre-line">
                                {user.hospitalAffiliation}
                            </div>
                        ) : (
                            <p className="text-gray-500">No hospital affiliations provided</p>
                        )}
                    </div>



                    {/* Edit Button */}
                    <div className="text-center">
                        <Link
                            href="/dashboard/doctor/profile"
                            className="inline-block bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200"
                        >
                            <User className="inline mr-2" /> Edit Profile
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}