'use client';
import { useState } from 'react';
import HRLayout from '../../components/HRLayout';
import { useAuth } from '../../lib/authContext';

export default function ProfilePage() {
  const { user } = useAuth();
  const [editing, setEditing] = useState(false);
  const [toast, setToast] = useState('');
  const [form, setForm] = useState({
    name: user?.name || '',
    email: user?.email || '',
    phone: '+254 700 000 000',
    department: user?.dept || 'Administration',
    jobTitle: user?.role === 'admin' ? 'System Administrator' : 'HR Manager',
    bio: 'Experienced HR professional committed to fostering a productive and inclusive workplace at Uwezo Fund.',
  });

  const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3000); };

  return (
    <HRLayout title="My Profile" breadcrumb="HR">
      {toast && (
        <div className="fixed top-20 right-6 z-[100] bg-green-600 text-white px-5 py-3 rounded-xl shadow-lg flex items-center gap-2">
          <div className="w-5 h-5 flex items-center justify-center"><i className="ri-checkbox-circle-line text-lg"></i></div>
          <span className="text-sm font-medium">{toast}</span>
        </div>
      )}

      <div className="max-w-3xl mx-auto">
        <div className="relative rounded-2xl overflow-hidden mb-6 shadow-sm" style={{ background: 'linear-gradient(135deg, #b828a0 0%, #7B1FA2 60%, #4A0072 100%)' }}>
          <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(circle at 20% 80%, #fff 1px, transparent 1px), radial-gradient(circle at 80% 20%, #fff 1px, transparent 1px)', backgroundSize: '30px 30px' }}></div>
          <div className="relative p-8 flex items-center gap-6">
            <div className="w-24 h-24 rounded-2xl flex items-center justify-center text-4xl font-bold flex-shrink-0 shadow-lg" style={{ background: 'linear-gradient(135deg, #f6d365, #fda085)' }}>
              {user?.avatar || 'AD'}
            </div>
            <div className="flex-1">
              <h2 className="text-2xl font-bold text-white">{user?.name}</h2>
              <p className="text-purple-200 mt-1">{user?.role === 'admin' ? 'System Administrator' : 'HR Manager'}</p>
              <p className="text-purple-300 text-sm mt-1">{user?.email}</p>
            </div>
            <button
              onClick={() => setEditing(!editing)}
              className="flex items-center gap-2 bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-xl text-sm font-medium cursor-pointer whitespace-nowrap transition-all border border-white/30"
            >
              <i className={`${editing ? 'ri-close-line' : 'ri-edit-line'} text-sm`}></i>
              {editing ? 'Cancel' : 'Edit Profile'}
            </button>
          </div>
        </div>

        <div className="grid grid-cols-3 gap-4 mb-6">
          {[
            { icon: 'ri-shield-star-line', label: 'Role', value: user?.role === 'admin' ? 'Administrator' : 'HR Manager', color: 'text-purple-600' },
            { icon: 'ri-building-line', label: 'Department', value: user?.dept || 'Administration', color: 'text-blue-600' },
            { icon: 'ri-calendar-check-line', label: 'Member Since', value: 'January 2024', color: 'text-green-600' },
          ].map(s => (
            <div key={s.label} className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 text-center">
              <div className={`w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2 bg-gray-50 ${s.color}`}>
                <i className={`${s.icon} text-xl`}></i>
              </div>
              <p className="text-xs text-gray-500">{s.label}</p>
              <p className="text-sm font-semibold text-gray-800 mt-0.5">{s.value}</p>
            </div>
          ))}
        </div>

        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-bold text-gray-800 mb-5">Personal Information</h3>
          <div className="grid grid-cols-2 gap-4 mb-4">
            {[
              { label: 'Full Name', key: 'name' },
              { label: 'Email Address', key: 'email' },
              { label: 'Phone Number', key: 'phone' },
              { label: 'Department', key: 'department' },
              { label: 'Job Title', key: 'jobTitle' },
            ].map(f => (
              <div key={f.key} className={f.key === 'jobTitle' ? 'col-span-2' : ''}>
                <label className="block text-xs font-semibold text-gray-500 mb-1">{f.label}</label>
                {editing ? (
                  <input
                    value={(form as any)[f.key]}
                    onChange={e => setForm(p => ({ ...p, [f.key]: e.target.value }))}
                    className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-purple-300"
                  />
                ) : (
                  <p className="text-sm text-gray-800 bg-gray-50 rounded-xl px-4 py-2.5">{(form as any)[f.key]}</p>
                )}
              </div>
            ))}
            <div className="col-span-2">
              <label className="block text-xs font-semibold text-gray-500 mb-1">Bio</label>
              {editing ? (
                <textarea
                  value={form.bio}
                  onChange={e => setForm(p => ({ ...p, bio: e.target.value }))}
                  rows={3}
                  maxLength={500}
                  className="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-purple-300 resize-none"
                />
              ) : (
                <p className="text-sm text-gray-800 bg-gray-50 rounded-xl px-4 py-2.5">{form.bio}</p>
              )}
            </div>
          </div>
          {editing && (
            <button
              onClick={() => { setEditing(false); showToast('Profile updated successfully!'); }}
              className="px-6 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap"
              style={{ background: 'linear-gradient(135deg, #b828a0 0%, #7B1FA2 100%)' }}
            >
              Save Changes
            </button>
          )}
        </div>
      </div>
    </HRLayout>
  );
}