'use client';

import { useState } from 'react';

const defaultData = {
  badge: 'آمن وموثوق للطالبات والموظفات',
  title: 'وصولك الآمن',
  titleHighlight: 'يبدأ من هنا',
  description: 'منصة توصيل متكاملة تربط الطالبات والموظفات بباصات الاشتراك الشهري بين المنازل والجامعات والجهات الحكومية والخاصة في المملكة العربية السعودية',
  btnPrimary: 'ابدئي رحلتك الآن',
  btnSecondary: 'شاهدي كيف يعمل',
  stat1Value: '5000+',
  stat1Label: 'مشتركة نشطة',
  stat2Value: '200+',
  stat2Label: 'باص متاح',
  stat3Value: '15+',
  stat3Label: 'مدينة مغطاة',
  ratingValue: '4.9/5',
  ratingLabel: 'تقييم المستخدمات',
};

export default function HeroSection({ onSave }: { onSave: () => void }) {
  const [data, setData] = useState(defaultData);

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

  return (
    <div className="space-y-5">
      <SectionCard title="الشارة والعنوان" icon="ri-text-wrap" color="#3B82F6" bg="#EFF6FF">
        <Field label="نص الشارة" value={data.badge} onChange={v => update('badge', v)} />
        <div className="grid grid-cols-2 gap-4">
          <Field label="العنوان الرئيسي" value={data.title} onChange={v => update('title', v)} />
          <Field label="الجزء المميز (أزرق)" value={data.titleHighlight} onChange={v => update('titleHighlight', v)} />
        </div>
        <Field label="النص التوضيحي" value={data.description} onChange={v => update('description', v)} textarea />
      </SectionCard>

      <SectionCard title="الأزرار" icon="ri-cursor-line" color="#7C3AED" bg="#EDE9FE">
        <div className="grid grid-cols-2 gap-4">
          <Field label="الزر الأول" value={data.btnPrimary} onChange={v => update('btnPrimary', v)} />
          <Field label="الزر الثاني" value={data.btnSecondary} onChange={v => update('btnSecondary', v)} />
        </div>
      </SectionCard>

      <SectionCard title="الإحصائيات" icon="ri-bar-chart-2-line" color="#059669" bg="#DCFCE7">
        <div className="grid grid-cols-3 gap-4">
          <div className="space-y-3">
            <Field label="القيمة الأولى" value={data.stat1Value} onChange={v => update('stat1Value', v)} />
            <Field label="التسمية الأولى" value={data.stat1Label} onChange={v => update('stat1Label', v)} />
          </div>
          <div className="space-y-3">
            <Field label="القيمة الثانية" value={data.stat2Value} onChange={v => update('stat2Value', v)} />
            <Field label="التسمية الثانية" value={data.stat2Label} onChange={v => update('stat2Label', v)} />
          </div>
          <div className="space-y-3">
            <Field label="القيمة الثالثة" value={data.stat3Value} onChange={v => update('stat3Value', v)} />
            <Field label="التسمية الثالثة" value={data.stat3Label} onChange={v => update('stat3Label', v)} />
          </div>
        </div>
      </SectionCard>

      <SectionCard title="بطاقة التقييم" icon="ri-star-line" color="#D97706" bg="#FEF3C7">
        <div className="grid grid-cols-2 gap-4">
          <Field label="قيمة التقييم" value={data.ratingValue} onChange={v => update('ratingValue', v)} />
          <Field label="نص التقييم" value={data.ratingLabel} onChange={v => update('ratingLabel', v)} />
        </div>
      </SectionCard>

      <PreviewCard>
        <div className="rounded-2xl p-6 text-white" style={{ background: 'linear-gradient(135deg, #0F172A, #1E3A8A)' }}>
          <span className="text-xs px-3 py-1 rounded-full mb-3 inline-block" style={{ background: 'rgba(59,130,246,0.2)', color: '#93C5FD' }}>{data.badge}</span>
          <h1 className="text-2xl font-bold mb-2">{data.title} <span style={{ color: '#60A5FA' }}>{data.titleHighlight}</span></h1>
          <p className="text-sm mb-4" style={{ color: '#94a3b8' }}>{data.description}</p>
          <div className="flex gap-3 mb-4">
            <span className="px-4 py-2 rounded-xl text-sm font-bold" style={{ background: '#1D4ED8' }}>{data.btnPrimary}</span>
            <span className="px-4 py-2 rounded-xl text-sm font-bold" style={{ background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)' }}>{data.btnSecondary}</span>
          </div>
          <div className="flex gap-6">
            {[{ v: data.stat1Value, l: data.stat1Label }, { v: data.stat2Value, l: data.stat2Label }, { v: data.stat3Value, l: data.stat3Label }].map((s, i) => (
              <div key={i} className="text-center">
                <div className="font-bold" style={{ color: '#60A5FA' }}>{s.v}</div>
                <div className="text-xs" style={{ color: '#94a3b8' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </PreviewCard>

      <SaveBtn onSave={onSave} />
    </div>
  );
}

function SectionCard({ title, icon, color, bg, children }: { title: string; icon: string; color: string; bg: string; children: React.ReactNode }) {
  return (
    <div className="bg-white rounded-2xl overflow-hidden" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 6px rgba(0,0,0,0.05)' }}>
      <div className="flex items-center gap-3 px-5 py-4 border-b" style={{ borderColor: '#F1F5F9' }}>
        <div className="w-8 h-8 rounded-xl flex items-center justify-center" style={{ background: bg }}>
          <i className={`${icon} text-base`} style={{ color }}></i>
        </div>
        <h3 className="font-bold text-slate-800 text-sm" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{title}</h3>
      </div>
      <div className="p-5 space-y-4">{children}</div>
    </div>
  );
}

function Field({ label, value, onChange, textarea }: { label: string; value: string; onChange: (v: string) => void; textarea?: boolean }) {
  return (
    <div>
      <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{label}</label>
      {textarea ? (
        <textarea
          value={value}
          onChange={e => onChange(e.target.value)}
          rows={3}
          className="w-full px-3 py-2.5 rounded-xl text-sm text-slate-800 resize-none outline-none transition-all"
          style={{ border: '1.5px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', background: '#FAFAFA' }}
          onFocus={e => (e.target.style.borderColor = '#3B82F6')}
          onBlur={e => (e.target.style.borderColor = '#E2E8F0')}
        />
      ) : (
        <input
          type="text"
          value={value}
          onChange={e => onChange(e.target.value)}
          className="w-full px-3 py-2.5 rounded-xl text-sm text-slate-800 outline-none transition-all"
          style={{ border: '1.5px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', background: '#FAFAFA' }}
          onFocus={e => (e.target.style.borderColor = '#3B82F6')}
          onBlur={e => (e.target.style.borderColor = '#E2E8F0')}
        />
      )}
    </div>
  );
}

function PreviewCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-white rounded-2xl overflow-hidden" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 6px rgba(0,0,0,0.05)' }}>
      <div className="flex items-center gap-2 px-5 py-3 border-b" style={{ borderColor: '#F1F5F9', background: '#FAFAFA' }}>
        <i className="ri-eye-line text-sm" style={{ color: '#94a3b8' }}></i>
        <span className="text-xs font-bold text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>معاينة مباشرة</span>
      </div>
      <div className="p-5">{children}</div>
    </div>
  );
}

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