import { useEffect, useState } from 'react';
import AdminLayout from '../../components/AdminLayout';
import { getContact, updateContact } from '../../utils/api';

const AdminContact = () => {
  const [formData, setFormData] = useState({
    phone: '',
    email: '',
    address: '',
    hours: '',
    map_embed: ''
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

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

  const loadContact = async () => {
    try {
      const response = await getContact();
      setFormData(response.data);
    } catch (error) {
      console.error('Error loading contact:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSaving(true);
    try {
      await updateContact(formData);
      alert('Contact information updated successfully!');
    } catch (error) {
      alert('Failed to update contact information');
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return <AdminLayout><div className="text-center py-20">Loading...</div></AdminLayout>;
  }

  return (
    <AdminLayout>
      <h1 className="text-3xl font-extrabold text-gray-900 mb-8">Manage Contact Information</h1>

      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 max-w-3xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-gray-700 font-semibold mb-2">Phone Number</label>
            <input 
              type="text"
              value={formData.phone}
              onChange={(e) => setFormData({...formData, phone: e.target.value})}
              className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>

          <div>
            <label className="block text-gray-700 font-semibold mb-2">Email</label>
            <input 
              type="email"
              value={formData.email}
              onChange={(e) => setFormData({...formData, email: e.target.value})}
              className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>

          <div>
            <label className="block text-gray-700 font-semibold mb-2">Address</label>
            <textarea 
              value={formData.address}
              onChange={(e) => setFormData({...formData, address: e.target.value})}
              className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500"
              rows="3"
              required
            />
          </div>

          <div>
            <label className="block text-gray-700 font-semibold mb-2">Operating Hours</label>
            <textarea 
              value={formData.hours}
              onChange={(e) => setFormData({...formData, hours: e.target.value})}
              className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500"
              rows="2"
              required
            />
          </div>

          <div>
            <label className="block text-gray-700 font-semibold mb-2">Google Maps Embed URL</label>
            <input 
              type="url"
              value={formData.map_embed}
              onChange={(e) => setFormData({...formData, map_embed: e.target.value})}
              className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500"
              placeholder="https://www.google.com/maps?q=Location&output=embed"
            />
          </div>

          <button 
            type="submit"
            disabled={saving}
            className="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700 transition disabled:opacity-50"
          >
            {saving ? 'Saving...' : 'Update Contact Info'}
          </button>
        </form>
      </div>
    </AdminLayout>
  );
};

export default AdminContact;
