'use client';
import { useState } from 'react';

export default function FooterSection({ onSave }: { onSave?: () => void }) {
  const [data, setData] = useState({
    logoText: 'BusTrack',
    description: 'نظام متكامل لإدارة أساطير الباصات وتتبعها في الوقت الفعلي',
    copyright: '© 2024 BusTrack. جميع الحقوق محفوظة',
    twitter: 'https://twitter.com/',
    instagram: 'https://instagram.com/',
    linkedin: 'https://linkedin.com/',
  });

  const [links, setLinks] = useState([
    { id: 1, label: 'من نحن', href: '#about' },
    { id: 2, label: 'المميزات', href: '#features' },
    { id: 3, label: 'الأسعار', href: '#pricing' },
    { id: 4, label: 'تواصل معنا', href: '#contact' },
  ]);

  const handleChange = (field: string, value: string) => {
    setData(prev => ({ ...prev, [field]: value }));
  };

  const handleLinkChange = (id: number, field: string, value: string) => {
    setLinks(links.map(l => l.id === id ? { ...l, [field]: value } : l));
  };

  const addLink = () => {
    setLinks([...links, { id: Date.now(), label: 'رابط جديد', href: '#' }]);
  };

  const removeLink = (id: number) => {
    setLinks(links.filter(l => l.id !== id));
  };

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-2xl p-6 space-y-4" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 6px rgba(0,0,0,0.05)' }}>
        <div className="flex items-center gap-3 mb-2">
          <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: '#EFF6FF' }}>
            <i className="ri-layout-bottom-line text-lg" style={{ color: '#3B82F6' }}></i>
          </div>
          <h3 className="font-black text-slate-700 text-base" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>معلومات الفوتر</h3>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>اسم الشعار</label>
            <input value={data.logoText} onChange={e => handleChange('logoText', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>نص حقوق النشر</label>
            <input value={data.copyright} onChange={e => handleChange('copyright', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
          </div>
          <div className="col-span-2">
            <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>وصف قصير</label>
            <textarea value={data.description} onChange={e => handleChange('description', e.target.value)} rows={2} className="w-full px-3 py-2 rounded-lg text-sm text-right resize-none" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>تويتر / X</label>
            <input value={data.twitter} onChange={e => handleChange('twitter', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>إنستغرام</label>
            <input value={data.instagram} onChange={e => handleChange('instagram', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>لينكدإن</label>
            <input value={data.linkedin} onChange={e => handleChange('linkedin', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
          </div>
        </div>
      </div>

      <div className="bg-white rounded-2xl p-6" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 6px rgba(0,0,0,0.05)' }}>
        <div className="flex items-center justify-between mb-4">
          <h3 className="font-black text-slate-700 text-sm" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>روابط التنقل</h3>
          <button onClick={addLink} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold cursor-pointer whitespace-nowrap text-white" style={{ background: '#3B82F6', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            <i className="ri-add-line"></i> إضافة رابط
          </button>
        </div>
        <div className="space-y-2">
          {links.map(link => (
            <div key={link.id} className="flex items-center gap-3">
              <input value={link.label} onChange={e => handleLinkChange(link.id, 'label', e.target.value)} placeholder="النص" className="flex-1 px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
              <input value={link.href} onChange={e => handleLinkChange(link.id, 'href', e.target.value)} placeholder="الرابط" className="flex-1 px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
              <button onClick={() => removeLink(link.id)} className="w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer" style={{ background: '#FEF2F2', color: '#EF4444' }}>
                <i className="ri-delete-bin-line text-sm"></i>
              </button>
            </div>
          ))}
        </div>
      </div>

      <button onClick={onSave} className="flex items-center gap-2 px-5 py-2 rounded-xl text-sm font-bold cursor-pointer whitespace-nowrap text-white" style={{ background: '#3B82F6', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
        <i className="ri-save-line"></i> حفظ التغييرات
      </button>
    </div>
  );
}