import React, { useState } from 'react';
import { useApp } from '../context/AppContext';
import { ArrowLeft, UserCircle2, CheckCircle2 } from 'lucide-react';

export const EditProfileView: React.FC = () => {
  const { user, updateProfile, popView } = useApp();
  const [name, setName] = useState(user.name);
  const [email, setEmail] = useState(user.email);
  const [phone, setPhone] = useState(user.phone);
  const [message, setMessage] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim() || !email.trim() || !phone.trim()) {
      alert('সবগুলো ফিল্ড সঠিকভাবে ফিলাপ করুন!');
      return;
    }

    updateProfile(name, email, phone);
    setMessage('✓ প্রোফাইল পরিবর্তনসমূহ সফলভাবে সংরক্ষণ করা হয়েছে!');
    setTimeout(() => {
      setMessage('');
      popView();
    }, 1500);
  };

  return (
    <div className="space-y-6 pb-28">
      {/* Header back */}
      <div className="flex items-center gap-3 border-b border-slate-800 pb-3">
        <button onClick={popView} className="p-1 px-2.5 rounded-lg bg-slate-800/100 hover:bg-slate-700 text-slate-100">
          <ArrowLeft className="w-5 h-5 inline mr-1" />
          Back
        </button>
        <div>
          <h2 className="text-[#f8fafc] text-lg font-black tracking-tight leading-none">
            Edit Profile
          </h2>
          <span className="text-xs text-slate-400 font-bold uppercase font-mono">
            Customize Credentials
          </span>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="space-y-5">
        
        {/* Profile Avatar change avatar representation */}
        <div className="flex flex-col items-center justify-center py-4 space-y-2">
          <div className="w-20 h-20 bg-slate-800 border-2 border-slate-700 rounded-full flex items-center justify-center text-slate-450 relative shadow-inner">
            <UserCircle2 className="w-12 h-12 text-slate-400" />
            <span className="absolute bottom-0 right-0 bg-[#facc15] text-[#0a0f1d] p-1 text-[8px] font-black leading-none rounded-full border border-[#0a0f1d]">
              EDIT
            </span>
          </div>
          <span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">
            Avatar selected: Default
          </span>
        </div>

        {/* Floating label box format inputs */}
        <div className="space-y-4 text-xs font-semibold text-slate-400">
          
          <div className="space-y-1 bg-slate-900 border border-slate-850 rounded-xl px-4 py-2">
            <label className="text-[10px] text-yellow-400 font-black block tracking-wider uppercase font-mono">
              Display Name
            </label>
            <input 
              type="text" 
              value={name} 
              onChange={(e) => setName(e.target.value)}
              className="w-full bg-transparent text-white font-bold py-1.5 focus:outline-none placeholder-slate-600 text-sm"
              placeholder="e.g. Rahul"
              required
            />
          </div>

          <div className="space-y-1 bg-slate-900 border border-slate-850 rounded-xl px-4 py-2">
            <label className="text-[10px] text-yellow-400 font-black block tracking-wider uppercase font-mono">
              Email Address
            </label>
            <input 
              type="email" 
              value={email} 
              onChange={(e) => setEmail(e.target.value)}
              className="w-full bg-transparent text-white font-bold py-1.5 focus:outline-none placeholder-slate-600 text-sm"
              placeholder="e.g. example@gmail.com"
              required
            />
          </div>

          <div className="space-y-1 bg-slate-900 border border-slate-850 rounded-xl px-4 py-2">
            <label className="text-[10px] text-yellow-400 font-black block tracking-wider uppercase font-mono">
              Phone Number
            </label>
            <input 
              type="tel" 
              value={phone} 
              onChange={(e) => setPhone(e.target.value)}
              className="w-full bg-transparent text-white font-bold py-1.5 focus:outline-none placeholder-slate-600 text-sm"
              placeholder="e.g. 01XXXXXXXXX"
              required
            />
          </div>

        </div>

        {/* Display Status Alerts */}
        {message && (
          <div className="bg-emerald-500/15 border border-emerald-550/20 text-emerald-400 rounded-xl p-3.5 flex items-center justify-center gap-2 text-xs font-black">
            <CheckCircle2 className="w-5 h-5 stroke-[2.5]" />
            {message}
          </div>
        )}

        {/* Save button */}
        <button 
          type="submit"
          className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-black tracking-widest uppercase text-xs py-4 rounded-xl shadow-lg active:scale-95 transition-all text-center"
        >
          SAVE CHANGES
        </button>

      </form>
    </div>
  );
};
