'use client';
import Image from 'next/image';
import Link from 'next/link';
import { PackageCheck, ClipboardList, CalendarCheck, User } from 'lucide-react';
import { useAuthStore } from '@/stores/authStore';

export default function PharmacyProfile() {
  const userData = useAuthStore((state) => state.user);
  // console.log(userData);
  const user = userData?.profile ? userData.profile : userData;
  // console.log(user);


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

  const {
    email,
    pharmacyName,
    licenseNumber,
    contact,
    address,
    id,
    createdAt,
    avatar
  } = user;

  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">Pharmacy Profile</h2>
        <p className="text-gray-500">Manage your pharmacy information and operational overview.</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/pharmacy-banner.jpg"
            alt="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">{pharmacyName || "Pharmacy Name"}</h3>
            <p className="text-sm opacity-90">Pharmacy ID: #{id}</p>
          </div>
        </div>
        
      </div>

      {/* Main Content Section */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <div className="lg:col-span-4 bg-white rounded-xl shadow-md p-6">
          <h4 className="text-xl font-semibold text-gray-800 mb-4">Pharmacy 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="/images/patient3.jpg"
                alt="Pharmacy Avatar"
                className="w-30 h-30 rounded-full border-4 border-white shadow-md object-cover"
              />
            </div>

            <div>
              <p className="font-medium text-gray-600">Pharmacy Name</p>
              <p>{pharmacyName || "N/A"}</p>
            </div>
            <div>
              <p className="font-medium text-gray-600">Contact</p>
              <p>{contact || "N/A"}</p>
            </div>
            <div>
              <p className="font-medium text-gray-600">Email</p>
              <p>{email}</p>
            </div>
            <div>
              <p className="font-medium text-gray-600">Location</p>
              <p>{address || "N/A"}</p>
            </div>

            <div>
              <p className="font-medium text-gray-600">License No.</p>
              <p>{licenseNumber || "N/A"}</p>
            </div>

            <Link
              href="/dashboard/pharmacy/profile"
              className="mt-4 text-center bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-200"
            >
              <User className="inline mr-2" /> Edit Profile
            </Link>

          </div>
        </div>
      </div>
    </div>
  );
}
