'use client';

import Image from 'next/image';
import {
  Microscope,
  TestTube,
  CalendarCheck,
  User,
  MapPin,
  Phone,
  Mail,
  Landmark,
  NotebookPen,
} from 'lucide-react';
import { useAuthStore } from '@/stores/authStore';
import Link from 'next/link';

export default function LabProfile() {
  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>;
  }

  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">Lab Profile</h2>
        <p className="text-gray-500">View and manage your laboratory details and performance stats.</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/lab-banner.jpg"
            alt="Lab 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.labName || "Med Bridge Afrik Diagnostics"}</h3>
            <p className="text-sm opacity-90">Lab Ref: #{user.id?.slice(0, 6) || "N/A"}</p>
          </div>
        </div>
        
      </div>

      {/* Main Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Sidebar */}
        <div className="space-y-6">
          {/* Lab Services */}
          <div className="bg-white rounded-xl shadow-md p-5">
            <div className="flex items-center mb-3">
              <TestTube className="mr-2 text-blue-600" size={20} />
              <h4 className="text-lg font-semibold text-gray-800">Services Offered</h4>
            </div>
            <ul className="list-disc list-inside text-gray-700 text-sm space-y-1">
              {user.servicesOffered && user.servicesOffered.trim() ? (
                user.servicesOffered
                  .split(',')
                  .map((service, i) => <li key={i}>{service.trim()}</li>)
              ) : (
                <li className="text-gray-500">No services listed</li>
              )}
            </ul>
          </div>

          {/* Specializations */}
          <div className="bg-white rounded-xl shadow-md p-5">
            <div className="flex items-center mb-3">
              <Microscope className="mr-2 text-blue-600" size={20} />
              <h4 className="text-lg font-semibold text-gray-800">Specializations</h4>
            </div>
            <div className="text-gray-700 text-sm whitespace-pre-line">
              {user.specializations?.trim() || "Not specified"}
            </div>
          </div>

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

        {/* Right Panel */}
        <div className="lg:col-span-2 space-y-6">
          {/* General Lab Info */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h4 className="text-xl font-semibold text-gray-800 mb-4">Lab 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={user.avatar || "/images/lab-default.png"}
                  alt="Lab 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">Lab Name</p>
                <p>{user.labName || "N/A"}</p>
              </div>
              <div>
                <p className="font-medium text-gray-600">Phone</p>
                <p>{user.contact || "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">Accreditation</p>
                <p>{user.accreditation || "Not specified"}</p>
              </div>
              <div>
                <p className="font-medium text-gray-600">License Number</p>
                <p>{user.licenceNumber || "Not specified"}</p>
              </div>
            </div>
          </div>

          {/* Edit Profile Button */}
          <div className="text-center">
            <Link
              href="/dashboard/lab/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>
  );
}
