'use client';
import { useEffect, useState } from 'react';
import { useAuth } from '../../../lib/authContext';
import InternLayout from '../../../components/InternLayout';
import { useRouter } from 'next/navigation';

interface InternDetails {
  phone: string;
  dob: string;
  nationalId: string;
  kraPin: string;
  employmentType: string;
  joined: string;
  endDate: string;
  supervisor: string;
  institution: string;
  course: string;
  yearOfStudy: string;
  emergencyContact: string;
  emergencyPhone: string;
  bloodGroup: string;
  address: string;
}

const defaultInternDetails: InternDetails = {
  phone: '',
  dob: '',
  nationalId: '',
  kraPin: '',
  employmentType: 'Intern',
  joined: '',
  endDate: '',
  supervisor: '',
  institution: '',
  course: '',
  yearOfStudy: '',
  emergencyContact: '',
  emergencyPhone: '',
  bloodGroup: '',
  address: '',
};

export default function InternProfilePage() {
  const { user, isLoading } = useAuth();
  const router = useRouter();
  const [internData, setInternData] = useState<InternDetails>(defaultInternDetails);
  const [isAuthorized, setIsAuthorized] = useState(false);
  const [editing, setEditing] = useState(false);
  const [toast, setToast] = useState('');
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState({
    name: '',
    email: '',
    phone: '',
    dept: '',
    position: '',
    dob: '',
    nationalId: '',
    kraPin: '',
    institution: '',
    course: '',
    yearOfStudy: '',
    joined: '',
    endDate: '',
    supervisor: '',
    emergencyContact: '',
    emergencyPhone: '',
    bloodGroup: '',
    address: '',
  });

  // Fetch profile data from API
  const fetchProfileFromDB = async () => {
    if (!user?.email) return;
    
    try {
      const response = await fetch(`/api/employee/profile?email=${encodeURIComponent(user.email)}`);
      if (response.ok) {
        const data = await response.json();
        if (data && data.id) {
          // Update form with database data
          setForm(prev => ({
            ...prev,
            name: data.fullName || user.name || '',
            email: data.email || user.email || '',
            dept: data.dept || user.dept || '',
            position: data.position || user.position || 'Intern',
            phone: data.phone || '',
            dob: data.dob ? new Date(data.dob).toISOString().split('T')[0] : '',
            nationalId: data.nationalId || '',
            kraPin: data.kraPin || '',
            institution: data.institution || '',
            course: data.course || '',
            yearOfStudy: data.yearOfStudy || '',
            joined: data.attachmentStartDate ? new Date(data.attachmentStartDate).toISOString().split('T')[0] : '',
            endDate: data.attachmentEndDate ? new Date(data.attachmentEndDate).toISOString().split('T')[0] : '',
            supervisor: data.directSupervisor || '',
            emergencyContact: data.emergencyContactName || '',
            emergencyPhone: data.emergencyPhone || '',
            bloodGroup: data.bloodGroup || '',
            address: data.physicalAddress || data.address || '',
          }));
          
          setInternData({
            phone: data.phone || '',
            dob: data.dob ? new Date(data.dob).toISOString().split('T')[0] : '',
            nationalId: data.nationalId || '',
            kraPin: data.kraPin || '',
            employmentType: 'Intern',
            joined: data.attachmentStartDate ? new Date(data.attachmentStartDate).toISOString().split('T')[0] : '',
            endDate: data.attachmentEndDate ? new Date(data.attachmentEndDate).toISOString().split('T')[0] : '',
            supervisor: data.directSupervisor || '',
            institution: data.institution || '',
            course: data.course || '',
            yearOfStudy: data.yearOfStudy || '',
            emergencyContact: data.emergencyContactName || '',
            emergencyPhone: data.emergencyPhone || '',
            bloodGroup: data.bloodGroup || '',
            address: data.physicalAddress || data.address || '',
          });
        }
      }
    } catch (error) {
      console.error('Error fetching profile:', error);
    }
  };

  useEffect(() => {
    if (!isLoading) {
      if (!user) {
        router.replace('/login');
        return;
      }
      if (user.role !== 'intern') {
        router.replace('/login');
        return;
      }
      setIsAuthorized(true);
      
      // Set initial form values from user
      setForm(prev => ({
        ...prev,
        name: user.name || '',
        email: user.email || '',
        dept: user.dept || '',
        position: user.position || 'Intern',
      }));
      
      // Fetch profile from database
      fetchProfileFromDB();
    }
  }, [user, isLoading, router]);

  const showToast = (message: string, isError: boolean = false) => {
    setToast(message);
    setTimeout(() => setToast(''), 3000);
  };

  const handleSave = async () => {
    setSaving(true);
    
    try {
      // Save all profile data to database via API
      const response = await fetch('/api/employee/profile', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: user?.email,
          fullName: form.name,
          dept: form.dept,
          position: form.position,
          phone: form.phone,
          dob: form.dob,
          nationalId: form.nationalId,
          kraPin: form.kraPin,
          institution: form.institution,
          course: form.course,
          yearOfStudy: form.yearOfStudy,
          attachmentStartDate: form.joined,
          attachmentEndDate: form.endDate,
          directSupervisor: form.supervisor,
          emergencyContactName: form.emergencyContact,
          emergencyPhone: form.emergencyPhone,
          bloodGroup: form.bloodGroup,
          physicalAddress: form.address,
        })
      });
      
      const data = await response.json();
      
      if (!response.ok) {
        throw new Error(data.error || 'Failed to update profile');
      }
      
      // Update local state
      const updatedDetails: InternDetails = {
        phone: form.phone,
        dob: form.dob,
        nationalId: form.nationalId,
        kraPin: form.kraPin,
        employmentType: 'Intern',
        joined: form.joined,
        endDate: form.endDate,
        supervisor: form.supervisor,
        institution: form.institution,
        course: form.course,
        yearOfStudy: form.yearOfStudy,
        emergencyContact: form.emergencyContact,
        emergencyPhone: form.emergencyPhone,
        bloodGroup: form.bloodGroup,
        address: form.address,
      };
      
      setInternData(updatedDetails);
      setEditing(false);
      showToast('Profile updated successfully!');
      
      // Refresh the page to show updated data
      setTimeout(() => {
        window.location.reload();
      }, 1500);
      
    } catch (error) {
      console.error('Error saving profile:', error);
      showToast(error instanceof Error ? error.message : 'Failed to update profile', true);
    } finally {
      setSaving(false);
    }
  };

  const getInitials = (name: string) => {
    if (!name) return 'IN';
    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
  };

  if (isLoading || !isAuthorized) {
    return (
      <InternLayout title="My Profile">
        <div className="flex justify-center items-center h-64">
          <div className="w-8 h-8 border-2 border-pink-300 border-t-pink-600 rounded-full animate-spin"></div>
        </div>
      </InternLayout>
    );
  }

  if (!user) return null;

  const allFields = [
    { label: 'Full Name', key: 'name', icon: 'ri-user-line', type: 'text', placeholder: 'Your full name' },
    { label: 'Email Address', key: 'email', icon: 'ri-mail-line', type: 'email', placeholder: 'your.email@example.com' },
    { label: 'Phone Number', key: 'phone', icon: 'ri-phone-line', type: 'tel', placeholder: '+254 700 000 000' },
    { label: 'Department', key: 'dept', icon: 'ri-building-line', type: 'text', placeholder: 'Your department' },
    { label: 'Position', key: 'position', icon: 'ri-briefcase-line', type: 'text', placeholder: 'Intern' },
    { label: 'Date of Birth', key: 'dob', icon: 'ri-cake-line', type: 'date', placeholder: 'YYYY-MM-DD' },
    { label: 'National ID', key: 'nationalId', icon: 'ri-file-text-line', type: 'text', placeholder: 'ID Number' },
    { label: 'KRA PIN', key: 'kraPin', icon: 'ri-government-line', type: 'text', placeholder: 'KRA PIN' },
    { label: 'Institution', key: 'institution', icon: 'ri-school-line', type: 'text', placeholder: 'University/College name' },
    { label: 'Course', key: 'course', icon: 'ri-book-open-line', type: 'text', placeholder: 'Course of study' },
    { label: 'Year of Study', key: 'yearOfStudy', icon: 'ri-calendar-line', type: 'text', placeholder: 'e.g., 4th Year' },
    { label: 'Attachment Start Date', key: 'joined', icon: 'ri-calendar-check-line', type: 'date', placeholder: 'Start date' },
    { label: 'Attachment End Date', key: 'endDate', icon: 'ri-calendar-close-line', type: 'date', placeholder: 'End date' },
    { label: 'Direct Supervisor', key: 'supervisor', icon: 'ri-user-star-line', type: 'text', placeholder: 'Supervisor name' },
    { label: 'Emergency Contact Name', key: 'emergencyContact', icon: 'ri-user-heart-line', type: 'text', placeholder: 'Emergency contact person' },
    { label: 'Emergency Phone', key: 'emergencyPhone', icon: 'ri-phone-line', type: 'tel', placeholder: 'Emergency phone number' },
    { label: 'Blood Group', key: 'bloodGroup', icon: 'ri-heart-pulse-line', type: 'text', placeholder: 'A+, A-, B+, B-, O+, O-, AB+, AB-' },
    { label: 'Physical Address', key: 'address', icon: 'ri-map-pin-line', type: 'text', placeholder: 'Your address' },
  ];

  const internId = user.employeeId || user.id || '-';

  return (
    <InternLayout title="My Profile">
      <div className="max-w-4xl mx-auto">
        {toast && (
          <div className="fixed top-20 right-6 z-[100] text-white px-5 py-3 rounded-xl shadow-lg flex items-center gap-2"
               style={{ background: toast.includes('success') ? '#16a34a' : '#dc2626' }}>
            <div className="w-5 h-5 flex items-center justify-center">
              <i className={toast.includes('success') ? 'ri-checkbox-circle-line text-lg' : 'ri-error-warning-line text-lg'}></i>
            </div>
            <span className="text-sm font-medium">{toast}</span>
          </div>
        )}
        
        {/* Profile Header */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
          <div className="h-28 w-full" style={{ background: 'linear-gradient(135deg, #b22698 0%, #8a1e76 100%)' }}></div>
          <div className="px-6 pb-6">
            <div className="flex items-end gap-4 -mt-12 mb-4">
              <div className="w-24 h-24 rounded-2xl bg-purple-100 flex items-center justify-center text-purple-800 font-bold text-3xl border-4 border-white shadow-md">
                {getInitials(form.name || user.name || 'Intern')}
              </div>
              <div className="pb-1 flex-1">
                <h2 className="text-2xl font-bold text-gray-800">{form.name || user.name}</h2>
                <p className="text-gray-500 text-sm">{form.position || 'Intern'} · {form.dept || user.dept || 'No Department'}</p>
              </div>
              <div className="pb-1">
                {editing ? (
                  <div className="flex items-center gap-2">
                    <button 
                      onClick={() => {
                        setEditing(false);
                        fetchProfileFromDB();
                      }} 
                      className="px-4 py-2 rounded-xl border border-gray-200 text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors cursor-pointer"
                    >
                      Cancel
                    </button>
                    <button 
                      onClick={handleSave} 
                      disabled={saving}
                      className="px-4 py-2 rounded-xl text-sm font-medium text-white cursor-pointer transition-colors disabled:opacity-50 flex items-center gap-2"
                      style={{ background: '#b22698' }}
                    >
                      {saving ? (
                        <>
                          <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                          Saving...
                        </>
                      ) : (
                        <>
                          <i className="ri-save-line"></i> Save Changes
                        </>
                      )}
                    </button>
                  </div>
                ) : (
                  <button 
                    onClick={() => setEditing(true)} 
                    className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium text-white cursor-pointer transition-colors"
                    style={{ background: '#b22698' }}
                  >
                    <i className="ri-edit-line"></i> Edit Profile
                  </button>
                )}
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <span className="bg-purple-100 text-purple-700 text-xs font-semibold px-3 py-1.5 rounded-full">Intern</span>
              <span className="bg-blue-100 text-blue-700 text-xs font-semibold px-3 py-1.5 rounded-full">ID: {internId}</span>
            </div>
          </div>
        </div>

        {/* Profile Fields */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <i className="ri-user-settings-line text-purple-600"></i>
            Personal & Internship Details
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {allFields.map((field, i) => (
              <div key={i} className="flex items-start gap-3 p-3 bg-gray-50 rounded-xl hover:bg-purple-50 transition-colors">
                <div className="w-9 h-9 flex items-center justify-center bg-purple-100 rounded-lg flex-shrink-0">
                  <i className={`${field.icon} text-purple-600 text-base`}></i>
                </div>
                <div className="flex-1">
                  <p className="text-xs text-gray-400 font-medium uppercase tracking-wide">{field.label}</p>
                  {editing ? (
                    field.type === 'date' ? (
                      <input
                        type="date"
                        value={(form as any)[field.key] || ''}
                        onChange={(e) => setForm(p => ({ ...p, [field.key]: e.target.value }))}
                        className="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm outline-none focus:border-purple-300 mt-1"
                      />
                    ) : (
                      <input
                        type={field.type}
                        value={(form as any)[field.key] || ''}
                        onChange={(e) => setForm(p => ({ ...p, [field.key]: e.target.value }))}
                        placeholder={field.placeholder}
                        className="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm outline-none focus:border-purple-300 mt-1"
                      />
                    )
                  ) : (
                    <p className="text-sm font-medium text-gray-700 mt-1 break-all">
                      {(form as any)[field.key] || <span className="text-gray-400">Not provided</span>}
                    </p>
                  )}
                </div>
              </div>
            ))}
          </div>
          
          {!editing && (
            <div className="mt-6 pt-4 border-t border-gray-100 flex justify-center">
              <p className="text-xs text-gray-400 flex items-center gap-1">
                <i className="ri-lock-line"></i> 
                Click "Edit Profile" to update your information
              </p>
            </div>
          )}
        </div>
      </div>
    </InternLayout>
  );
}