'use client';

import { useTranslations } from 'next-intl';
import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { motion } from 'framer-motion';
import { FiUser, FiMail, FiPhone, FiCalendar, FiEdit2, FiSave, FiX } from 'react-icons/fi';
import apiClient from '@/lib/api';
import { useAuth } from '@/lib/hooks/useAuth';
import toast from 'react-hot-toast';

interface Profile {
  full_name: string;
  phone: string | null;
  address: string | null;
  date_of_birth: string | null;
  gender: string | null;
  photo_url: string | null;
}

interface StudentInfo {
  student_number: string;
  grade_level: number;
  class: { name: string } | null;
  enrollment_date: string;
}

export default function StudentProfilePage() {
  const t = useTranslations();
  const pathname = usePathname();
  const { user } = useAuth();
  const [profile, setProfile] = useState<Profile | null>(null);
  const [studentInfo, setStudentInfo] = useState<StudentInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState<Partial<Profile>>({});
  const [saving, setSaving] = useState(false);

  useEffect(() => { fetchProfile(); }, []);

  const fetchProfile = async () => {
    try {
      setLoading(true);
      const res = await apiClient.get(`/api/v1/auth/me`, {
        headers: { Authorization: `Bearer ${localStorage.getItem('auth_token')}` },
      });
      const data = res.data.data;
      setProfile(data.profile || {});
      setStudentInfo(data.student || null);
      setForm(data.profile || {});
    } catch {} finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      await apiClient.put(`/api/v1/users/${user?.id}`, { profile: form }, {
        headers: { Authorization: `Bearer ${localStorage.getItem('auth_token')}` },
      });
      setProfile({ ...profile, ...form } as Profile);
      setEditing(false);
    } catch (err: any) {
      toast.error(err.response?.data?.message || 'Gagal menyimpan');
    } finally {
      setSaving(false);
    }
  };

  if (loading) return (
    <div className="flex justify-center items-center h-64">
      <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary" />
    </div>
  );

  return (
    <div className="p-6 space-y-6 max-w-2xl">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-neutral-dark">{t('student.myProfile')}</h1>
          <p className="text-sm text-gray-600 mt-1">{t('student.profileSub')}</p>
        </div>
        {!editing ? (
          <button onClick={() => setEditing(true)} className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-light text-sm">
            <FiEdit2 /> Edit
          </button>
        ) : (
          <div className="flex gap-2">
            <button onClick={() => setEditing(false)} className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm">
              <FiX />{t('common.cancel')}</button>
            <button onClick={handleSave} disabled={saving} className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-light text-sm disabled:opacity-50">
              <FiSave /> {saving ? t('common.saving') : t('common.save')}
            </button>
          </div>
        )}
      </div>

      {/* Avatar */}
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-lg shadow-sm p-6">
        <div className="flex items-center gap-6">
          <div className="w-20 h-20 rounded-full bg-primary text-white flex items-center justify-center text-3xl font-bold">
            {profile?.full_name?.charAt(0)?.toUpperCase() || 'S'}
          </div>
          <div>
            <h2 className="text-xl font-bold text-gray-900">{profile?.full_name || user?.name}</h2>
            <p className="text-gray-500 text-sm">{user?.email}</p>
            {studentInfo && (
              <p className="text-sm text-primary mt-1">
                {studentInfo.student_number} • {studentInfo.class?.name || `Kelas ${studentInfo.grade_level}`}
              </p>
            )}
          </div>
        </div>
      </motion.div>

      {/* Info */}
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }} className="bg-white rounded-lg shadow-sm p-6 space-y-4">
        <h3 className="font-semibold text-gray-900 border-b pb-3">{t('student.personalInfo')}</h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="text-xs font-medium text-gray-500 uppercase">{t('student.fullName')}</label>
            {editing ? (
              <input value={form.full_name || ''} onChange={(e) => setForm({ ...form, full_name: e.target.value })}
                className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary text-sm" />
            ) : (
              <p className="mt-1 text-sm text-gray-900">{profile?.full_name || '-'}</p>
            )}
          </div>

          <div>
            <label className="text-xs font-medium text-gray-500 uppercase">{t('forms.phoneLabel')}</label>
            {editing ? (
              <input value={form.phone || ''} onChange={(e) => setForm({ ...form, phone: e.target.value })}
                className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary text-sm" />
            ) : (
              <p className="mt-1 text-sm text-gray-900">{profile?.phone || '-'}</p>
            )}
          </div>

          <div>
            <label className="text-xs font-medium text-gray-500 uppercase">{t('forms.birthDateLabel')}</label>
            {editing ? (
              <input type="date" value={form.date_of_birth || ''} onChange={(e) => setForm({ ...form, date_of_birth: e.target.value })}
                className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary text-sm" />
            ) : (
              <p className="mt-1 text-sm text-gray-900">{profile?.date_of_birth ? new Date(profile.date_of_birth).toLocaleDateString('id-ID') : '-'}</p>
            )}
          </div>

          <div>
            <label className="text-xs font-medium text-gray-500 uppercase">{t('forms.genderLabel')}</label>
            {editing ? (
              <select value={form.gender || ''} onChange={(e) => setForm({ ...form, gender: e.target.value })}
                className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary text-sm">
                <option value="">{t('student.selectGender')}</option>
                <option value="male">{t('student.male')}</option>
                <option value="female">{t('student.female')}</option>
              </select>
            ) : (
              <p className="mt-1 text-sm text-gray-900">{profile?.gender === 'male' ? 'Laki-laki' : profile?.gender === 'female' ? 'Perempuan' : '-'}</p>
            )}
          </div>
        </div>

        <div>
          <label className="text-xs font-medium text-gray-500 uppercase">{t('forms.addressLabel')}</label>
          {editing ? (
            <textarea value={form.address || ''} onChange={(e) => setForm({ ...form, address: e.target.value })} rows={3}
              className="mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary text-sm" />
          ) : (
            <p className="mt-1 text-sm text-gray-900">{profile?.address || '-'}</p>
          )}
        </div>
      </motion.div>

      {/* Student Info */}
      {studentInfo && (
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="bg-white rounded-lg shadow-sm p-6 space-y-4">
          <h3 className="font-semibold text-gray-900 border-b pb-3">{t('student.academicInfo')}</h3>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-medium text-gray-500 uppercase">{t('student.nis')}</label>
              <p className="mt-1 text-sm text-gray-900">{studentInfo.student_number}</p>
            </div>
            <div>
              <label className="text-xs font-medium text-gray-500 uppercase">{t('student.classLabel')}</label>
              <p className="mt-1 text-sm text-gray-900">{studentInfo.class?.name || `Kelas ${studentInfo.grade_level}`}</p>
            </div>
            <div>
              <label className="text-xs font-medium text-gray-500 uppercase">{t('student.gradeLabel')}</label>
              <p className="mt-1 text-sm text-gray-900">Kelas {studentInfo.grade_level}</p>
            </div>
            <div>
              <label className="text-xs font-medium text-gray-500 uppercase">{t('student.enrollDate')}</label>
              <p className="mt-1 text-sm text-gray-900">{new Date(studentInfo.enrollment_date).toLocaleDateString('id-ID')}</p>
            </div>
          </div>
        </motion.div>
      )}
    </div>
  );
}