'use client';
import { useAuth } from '../../../lib/authContext';
import HOSLayout from '../../../components/HOSLayout';

export default function HOSProfilePage() {
  const { user } = useAuth();
  if (!user) return null;

  const fields = [
    { label: 'Full Name', value: user.name, icon: 'ri-user-line' },
    { label: 'Role', value: 'Head of Secretariat', icon: 'ri-vip-crown-line' },
    { label: 'Position', value: user.position || '-', icon: 'ri-briefcase-line' },
    { label: 'Email Address', value: user.email || '-', icon: 'ri-mail-line' },
    { label: 'Gender', value: user.gender || '-', icon: 'ri-women-line' },
  ];

  return (
    <HOSLayout title="My Profile">
      <div className="max-w-3xl">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
          <div className="h-24 w-full" style={{ background: '#b22698' }}></div>
          <div className="px-6 pb-6">
            <div className="flex items-end gap-4 -mt-10 mb-4">
              <div className="w-20 h-20 rounded-2xl bg-yellow-400 flex items-center justify-center text-purple-900 font-bold text-2xl border-4 border-white shadow-md">
                {user.avatar}
              </div>
              <div className="pb-1">
                <h2 className="text-xl font-bold text-gray-800">{user.name}</h2>
                <p className="text-gray-500 text-sm">{user.position}</p>
              </div>
              <div className="ml-auto pb-1">
                <span className="bg-green-100 text-green-700 text-xs font-semibold px-3 py-1.5 rounded-full">HOS / CEO</span>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-gray-800 mb-5">Personal & Employment Details</h3>
          <div className="grid grid-cols-2 gap-4">
            {fields.map((f, i) => (
              <div key={i} className="flex items-start gap-3 p-3 bg-gray-50 rounded-xl">
                <div className="w-8 h-8 flex items-center justify-center bg-purple-100 rounded-lg mt-0.5">
                  <i className={`${f.icon} text-purple-600 text-sm`}></i>
                </div>
                <div>
                  <p className="text-xs text-gray-400 font-medium">{f.label}</p>
                  <p className="text-sm font-semibold text-gray-700 mt-0.5">{f.value}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </HOSLayout>
  );
}