import BottomNav from '@/components/shared/BottomNav'

export default function ProfilPage() {
  return (
    <>
      <header className="fixed top-0 w-full z-50 bg-[#f9f9ff] shadow-sm flex justify-between items-center px-4 h-16 max-w-[430px]">
        <button className="flex items-center justify-center p-2 rounded-full text-[#3c4a42]">
          <span className="material-symbols-outlined">storefront</span>
        </button>
        <h1 className="text-[20px] font-bold text-[#006c49]">CommunityMarket</h1>
        <button className="flex items-center justify-center p-2 rounded-full text-[#3c4a42] relative">
          <span className="material-symbols-outlined">notifications</span>
          <span className="absolute top-1 right-2 w-2 h-2 bg-[#ba1a1a] rounded-full"></span>
        </button>
      </header>

      <main className="pt-20 px-4 space-y-6 pb-24">
        <h2 className="text-[24px] font-semibold text-[#141b2b]">Toko Saya</h2>

        {/* Profile Card */}
        <div className="bg-white rounded-xl p-4 shadow-sm border border-[#e1e2e4] flex items-center space-x-4">
          <div className="w-16 h-16 rounded-full overflow-hidden flex-shrink-0 bg-[#dce2f7]">
            <img className="w-full h-full object-cover"
              src="https://lh3.googleusercontent.com/aida-public/AB6AXuByyqvFP69EaygWIaJ6dWluJepOdKS8Fw2qXOR-sm-4A1iIslHG5LjUCETsHemF7I66frqB9CuTd_sa0L0ytfi5KEPCh1iekdpYBmQ095Km1TNTc5hBifciZEaArNH-K48BLuxUZIfASyNMDykLRI6eV0W0mmpul1gTl9Mbi10b7mjHVoFP4JPS5UzxWkeNx_CAP7n1YPPtFsLOxga1GLKsxTPpglUEeFw4FTdTtVC-LN6kghXATAi_rQeiz0TGKgawrs1EEs1sw9at"
              alt="Profil" />
          </div>
          <div className="flex-grow">
            <h3 className="text-[20px] font-semibold text-[#141b2b]">Budi's Fresh Farm</h3>
            <p className="text-[14px] text-[#3c4a42] flex items-center mt-1">
              <span className="material-symbols-outlined text-sm mr-1">location_on</span>Jakarta Selatan
            </p>
            <div className="mt-2 inline-flex items-center bg-[#f1f3ff] px-2 py-1 rounded-full border border-[#dee0e2]">
              <span className="material-symbols-outlined text-sm text-[#006c49] mr-1" style={{ fontVariationSettings: "'FILL' 1" }}>star</span>
              <span className="text-[12px] font-semibold text-[#141b2b]">4.9 Seller Level</span>
            </div>
          </div>
          <button className="p-2 text-[#3c4a42] hover:text-[#006c49]">
            <span className="material-symbols-outlined">edit</span>
          </button>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-2 gap-4">
          <div className="bg-white rounded-xl p-4 shadow-sm border border-[#e1e2e4] flex flex-col justify-between">
            <div className="flex items-center justify-between mb-2">
              <span className="text-[14px] text-[#3c4a42]">Total Order</span>
              <div className="w-8 h-8 rounded-full bg-[#e9edff] flex items-center justify-center">
                <span className="material-symbols-outlined text-[#006c49] text-sm">receipt_long</span>
              </div>
            </div>
            <div className="text-[30px] font-bold text-[#141b2b]">124</div>
            <div className="text-[12px] text-[#006c49] flex items-center mt-1">
              <span className="material-symbols-outlined text-[10px] mr-1">trending_up</span>+12% bln ini
            </div>
          </div>
          <div className="bg-white rounded-xl p-4 shadow-sm border border-[#e1e2e4] flex flex-col justify-between">
            <div className="flex items-center justify-between mb-2">
              <span className="text-[14px] text-[#3c4a42]">Terjual</span>
              <div className="w-8 h-8 rounded-full bg-[#e9edff] flex items-center justify-center">
                <span className="material-symbols-outlined text-[#006c49] text-sm">inventory_2</span>
              </div>
            </div>
            <div className="text-[30px] font-bold text-[#141b2b]">892</div>
            <div className="text-[12px] text-[#3c4a42] mt-1">Total items</div>
          </div>
          <div className="col-span-2 bg-gradient-to-r from-[#006c49] to-[#10b981] rounded-xl p-4 shadow-lg text-white flex items-center justify-between">
            <div>
              <span className="text-[14px] opacity-90 block mb-1">Pendapatan Bulan Ini</span>
              <div className="text-[30px] font-bold">Rp 4.5M</div>
            </div>
            <div className="bg-white/20 p-3 rounded-full">
              <span className="material-symbols-outlined text-white" style={{ fontVariationSettings: "'FILL' 1" }}>account_balance_wallet</span>
            </div>
          </div>
        </div>

        {/* Menu */}
        <div className="bg-white rounded-xl shadow-sm border border-[#e1e2e4] overflow-hidden">
          <h3 className="text-[20px] font-semibold text-[#141b2b] px-4 pt-4 pb-2 border-b border-[#e1e2e4]">Manajemen Toko</h3>
          <ul className="flex flex-col">
            {[
              { icon: 'inventory_2', label: 'Produk', meta: '24 Aktif' },
              { icon: 'receipt_long', label: 'Pesanan', meta: '3 Baru', metaStyle: 'bg-[#ba1a1a] text-white px-2 py-0.5 rounded-full text-[12px]' },
              { icon: 'add_circle', label: 'Tambah Produk Baru', iconStyle: 'text-[#006c49]', labelStyle: 'text-[#006c49]' },
              { icon: 'campaign', label: 'Pusat Promosi', meta: '' },
            ].map(({ icon, label, meta, metaStyle, iconStyle, labelStyle }) => (
              <li key={label} className="border-b border-[#e1e2e4] last:border-b-0">
                <button className="w-full flex items-center justify-between px-4 py-4 hover:bg-[#f1f3ff] transition-colors group">
                  <div className="flex items-center">
                    <div className="w-10 h-10 rounded-full bg-[#e9edff] flex items-center justify-center mr-4">
                      <span className={`material-symbols-outlined ${iconStyle ?? 'text-[#3c4a42]'}`}>{icon}</span>
                    </div>
                    <span className={`text-[16px] font-semibold ${labelStyle ?? 'text-[#141b2b]'}`}>{label}</span>
                  </div>
                  <div className="flex items-center">
                    {meta && <span className={metaStyle ?? 'text-[14px] text-[#3c4a42] mr-3'}>{meta}</span>}
                    <span className="material-symbols-outlined text-[#3c4a42] text-sm">chevron_right</span>
                  </div>
                </button>
              </li>
            ))}
          </ul>
        </div>
      </main>

      <BottomNav />
    </>
  )
}