'use client';

import React, { useState, useEffect } from 'react';
import { PageHeader } from '@/components/common/PageHeader';
import { FormField } from '@/components/common/FormField';
import { getCurrentUserSync } from '@/lib/api/auth';
import { TSessionUser } from '@/types/auth';
import { toast } from '@/lib/stores/notificationStore';
import { Loader2, User, Mail, Save, ShieldCheck, CalendarRange, Award } from 'lucide-react';

export default function MahasiswaProfilPage() {
  const [user, setUser] = useState<TSessionUser | null>(null);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [nim, setNim] = useState('');
  const [pt, setPt] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [createdAt, setCreatedAt] = useState('');

  useEffect(() => {
    const session = getCurrentUserSync();
    if (session) {
      setUser(session);
      setName(session.name);
      setEmail(session.email);
      setNim(session.nimOrNidn || '');
      setPt(session.perguruanTinggiName || '');

      fetch('/api/auth/me')
        .then((res) => res.json())
        .then((res) => {
          if (res.success && res.data.createdAt) {
            setCreatedAt(res.data.createdAt);
          }
        })
        .catch((err) => console.error(err));
    }
  }, []);

  const formatAnggotaSejak = (dateStr: string) => {
    if (!dateStr) return 'Juni 2026';
    try {
      const date = new Date(dateStr);
      const monthsIndo = [
        'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
      ];
      return `${monthsIndo[date.getMonth()]} ${date.getFullYear()}`;
    } catch (e) {
      return 'Juni 2026';
    }
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      // Simulate profile saving
      await new Promise((resolve) => setTimeout(resolve, 800));
      
      // Update session cookie
      if (user) {
        const updatedUser: TSessionUser = {
          ...user,
          name,
          email,
          nimOrNidn: nim,
          perguruanTinggiName: pt,
        };
        document.cookie = `simkatmawa_user=${encodeURIComponent(JSON.stringify(updatedUser))}; path=/`;
      }
      
      toast.success('Profil berhasil diperbarui!');
    } catch (err) {
      toast.error('Gagal memperbarui profil.');
    } finally {
      setIsLoading(false);
    }
  };

  if (!user) {
    return (
      <div className="flex items-center justify-center min-h-[50vh]">
        <span className="text-sm text-text-muted font-bold animate-pulse">Memuat profil...</span>
      </div>
    );
  }



  return (
    <div className="space-y-6 max-w-5xl mx-auto">
      {/* Page Header */}
      <PageHeader
        title="Profil Saya"
        description="Kelola dan perbarui data profil Anda."
      />

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start animate-fade-in">
        {/* Left Column - Card Summary */}
        <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.02)] flex flex-col items-center text-center space-y-6">
          {/* Avatar Area */}
          <div className="relative group">
            <div className="absolute -inset-1.5 bg-gradient-to-tr from-primary to-accent rounded-full blur opacity-25 group-hover:opacity-45 transition duration-300"></div>
            <div className="relative h-24 w-24 bg-gradient-to-tr from-primary/10 to-accent/10 border-2 border-primary/20 text-primary text-4xl font-extrabold flex items-center justify-center rounded-full shadow-sm">
              {name.charAt(0).toUpperCase()}
            </div>
          </div>

          {/* User Basic Info */}
          <div className="space-y-2">
            <h3 className="font-bold text-slate-800 text-xl tracking-tight">{name}</h3>
            <span className="inline-flex items-center px-3.5 py-1 rounded-full text-[10px] font-extrabold bg-primary/5 text-primary border border-primary/10 tracking-wider uppercase">
              {user.role.replace('_', ' ')}
            </span>
          </div>

          {/* Additional details list */}
          <div className="w-full pt-4 border-t border-slate-50 space-y-3.5 text-left text-sm text-slate-600 font-medium">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 text-slate-400">
                <ShieldCheck className="h-4 w-4 text-emerald-500" />
                <span>Status Akun</span>
              </div>
              <span className="text-emerald-600 font-bold bg-emerald-50 border border-emerald-100 px-2.5 py-0.5 rounded-lg text-[10px] uppercase tracking-wide">Aktif</span>
            </div>
            
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 text-slate-400">
                <CalendarRange className="h-4 w-4 text-slate-400" />
                <span>Anggota Sejak</span>
              </div>
              <span className="text-slate-800 font-semibold">{formatAnggotaSejak(createdAt)}</span>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 text-slate-400">
                <Award className="h-4 w-4 text-slate-400" />
                <span>Keamanan Akun</span>
              </div>
              <span className="text-slate-800 font-semibold">Sangat Baik</span>
            </div>
          </div>
        </div>

        {/* Right Column - Form Card */}
        <div className="lg:col-span-2 bg-white border border-slate-100 rounded-3xl p-6 sm:p-8 shadow-[0_8px_30px_rgb(0,0,0,0.02)]">
          <div className="mb-6 pb-4 border-b border-slate-100">
            <h4 className="text-lg font-bold text-slate-800 tracking-tight">Sunting Detail Informasi</h4>
            <p className="text-xs text-slate-400 font-medium mt-1">Perbarui informasi dasar profil untuk keperluan administrasi sistem.</p>
          </div>

          <form onSubmit={handleSave} className="space-y-5">
            <FormField label="Nama Lengkap" required>
              <div className="relative group">
                <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400 group-focus-within:text-primary transition-colors">
                  <User className="h-4 w-4" />
                </span>
                <input
                  type="text"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  required
                  className="w-full pl-10 pr-4 py-3 bg-white border-2 border-slate-100 hover:border-slate-200 rounded-xl text-sm text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                />
              </div>
            </FormField>

            <FormField label="Email" required>
              <div className="relative group">
                <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400 group-focus-within:text-primary transition-colors">
                  <Mail className="h-4 w-4" />
                </span>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  className="w-full pl-10 pr-4 py-3 bg-white border-2 border-slate-100 hover:border-slate-200 rounded-xl text-sm text-slate-800 font-medium focus:outline-none focus:border-primary/30 focus:ring-4 focus:ring-primary/10 transition-all"
                />
              </div>
            </FormField>



            <div className="flex justify-end pt-4 border-t border-slate-100">
              <button
                type="submit"
                disabled={isLoading}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-dark hover:from-primary-dark hover:to-primary text-white text-sm font-bold rounded-xl shadow-lg shadow-primary/20 hover:shadow-primary/30 hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:hover:translate-y-0"
              >
                {isLoading ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Menyimpan...
                  </>
                ) : (
                  <>
                    <Save className="h-4 w-4" />
                    Simpan Profil
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}