'use client';

import { UserCog, Thermometer, FileText, Heart, User } from 'lucide-react';
import { useAuthStore } from '@/stores/authStore';
import Image from 'next/image';
import Link from 'next/link';

export default function PatientProfile() {
    const userData = useAuthStore((state) => state.user);
    const user = userData?.profile || null;

    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">Patient Profile</h2>
                <p className="text-gray-500">View and manage your personal health information.</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/patient-banner.jpg"
                        alt="Patient 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">{user.firstName} {user.lastName}</h3>
                        <p className="text-sm opacity-90">Patient ID: #{user.id?.slice(0, 6) || "N/A"}</p>
                    </div>
                </div>

            </div>

            {/* Main Content Section */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Left Sidebar Info */}
                <div className="bg-white rounded-xl shadow-md p-5 space-y-4">
                    {/* Allergies */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <h4 className="text-lg font-semibold mb-2 text-gray-800">Allergies</h4>
                        <p className="text-sm text-gray-700">{user.allergies || 'No known allergies.'}</p>
                    </div>

                    {/* Medical History */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <h4 className="text-lg font-semibold mb-2 text-gray-800">Medical History</h4>
                        <p className="text-sm text-gray-700">{user.medicalHistory || 'No medical history available.'}</p>
                    </div>

                    {/* Emergency Contact */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <h4 className="text-lg font-semibold mb-2 text-gray-800">Emergency Contact</h4>
                        <p className="text-sm text-gray-700"><strong>Name:</strong> {user.emergencyContactName || 'Not provided'}</p>
                        <p className="text-sm text-gray-700"><strong>Relationship:</strong> {user.emergencyContactRelationship || 'Not provided'}</p>
                        <p className="text-sm text-gray-700"><strong>Phone:</strong> {user.emergencyContactPhone || 'Not provided'}</p>
                    </div>

                    {/* Insurance Info */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <h4 className="text-lg font-semibold mb-2 text-gray-800">Insurance Information</h4>
                        <p className="text-sm text-gray-700"><strong>Provider:</strong> {user.insuranceProvider || 'N/A'}</p>
                        <p className="text-sm text-gray-700"><strong>Number:</strong> {user.insuranceNumber || 'N/A'}</p>
                    </div>

                    {/* Social History */}
                    <div className="bg-white rounded-xl shadow-md p-5">
                        <h4 className="text-lg font-semibold mb-2 text-gray-800">Social History</h4>
                        <p className="text-sm text-gray-700"><strong>Smokes:</strong> {user.smokes ? 'Yes' : 'No'}</p>
                        <p className="text-sm text-gray-700"><strong>Drinks Alcohol:</strong> {user.drinksAlcohol ? 'Yes' : 'No'}</p>
                        <p className="text-sm text-gray-700"><strong>Uses Drugs:</strong> {user.usesDrugs ? 'Yes' : 'No'}</p>
                    </div>
                </div>

                {/* Right Panel - Personal 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 left-6">
                            <img
                                src={avatarUrl}
                                alt="Patient Avatar"
                                width={120}
                                height={120}
                                className="w-30 h-30 rounded-full border-4 border-white shadow-md object-cover"
                            />
                        </div>

                        <div>
                            <p className="font-medium text-gray-600">Full Name</p>
                            <p>{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>

                        <Link
                            href="/dashboard/patient/profile"
                            className="mt-4 text-center bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-200 col-span-full sm:col-span-2 md:col-span-3"
                        >
                            <User className="inline mr-2" /> Edit Profile
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}
