// Admin panel — CRUD products (with variants) and reviews

function AdminPage({ refresh }) {
  const [tab, setTab] = React.useState('products');
  return (
    <section className="max-w-[1280px] mx-auto px-5 md:px-8 pt-8 md:pt-12">
      <div className="flex items-end justify-between mb-6 flex-wrap gap-3">
        <div>
          <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Admin</div>
          <h1 className="text-3xl font-semibold tracking-tight">Store management</h1>
          <p className="text-white/55 mt-1 text-sm">Manage products, variants, and reviews.</p>
        </div>
        <button onClick={refresh} className="btn-ghost px-3 py-2 text-sm inline-flex items-center gap-2">
          <Icon name="refresh" size={14} /> Refresh
        </button>
      </div>

      <div className="hairline rounded-xl flex overflow-auto hide-scroll" style={{ background: 'var(--bg-1)' }}>
        {[
          { id: 'products', label: 'Products' },
          { id: 'reviews', label: 'Reviews' },
        ].map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className="px-4 py-3 text-sm whitespace-nowrap transition-colors"
            style={{ color: tab === t.id ? 'var(--ink)' : 'var(--ink-dim)', borderBottom: `2px solid ${tab === t.id ? 'var(--accent)' : 'transparent'}` }}
          >
            {t.label}
          </button>
        ))}
      </div>

      <div className="mt-6">
        {tab === 'products' && <AdminProducts refresh={refresh} />}
        {tab === 'reviews' && <AdminReviews refresh={refresh} />}
      </div>
    </section>
  );
}

function AdminProducts({ refresh }) {
  const [editing, setEditing] = React.useState(null); // product object or {new:true}
  return (
    <>
      <div className="flex items-center justify-between mb-4">
        <div className="text-sm text-white/55">{PRODUCTS.length} products</div>
        <button onClick={() => setEditing({ _new: true })} className="btn-primary px-3 py-2 text-sm inline-flex items-center gap-2">
          <Icon name="sparkle" size={14} /> New product
        </button>
      </div>
      <div className="hairline rounded-2xl overflow-hidden" style={{ background: 'var(--bg-1)' }}>
        <div className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 px-4 py-3 text-[10px] mono uppercase tracking-widest text-white/40 border-b" style={{ borderColor: 'var(--line)' }}>
          <span>ID</span><span>Name</span><span>Cat</span><span>From</span><span>Stock</span><span></span>
        </div>
        {PRODUCTS.map(p => (
          <div key={p.id} className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 px-4 py-3 items-center border-t text-sm" style={{ borderColor: 'var(--line)' }}>
            <span className="mono text-xs text-white/50">{p.id}</span>
            <div className="min-w-0">
              <div className="font-medium truncate">{p.name}</div>
              <div className="text-xs text-white/50 truncate">{p.tagline}</div>
            </div>
            <span className="text-xs mono text-white/60">{p.category}</span>
            <span className="mono text-xs">{formatUSD(p.priceFrom)}</span>
            <span className="mono text-xs">{p.stock}</span>
            <div className="flex gap-2">
              <button onClick={() => setEditing(p)} className="btn-ghost px-2 py-1 text-xs">Edit</button>
              <button onClick={async () => {
                if (!confirm(`Delete ${p.name}? This removes variants too.`)) return;
                const { error } = await sb.from('products').delete().eq('id', p.id);
                if (error) alert(error.message); else refresh();
              }} className="btn-ghost px-2 py-1 text-xs">Delete</button>
            </div>
          </div>
        ))}
      </div>
      {editing && <ProductEditor product={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); refresh(); }} />}
    </>
  );
}

function ProductEditor({ product, onClose, onSaved }) {
  const isNew = product._new;
  const [form, setForm] = React.useState(() => ({
    id: product.id || '',
    name: product.name || '',
    tagline: product.tagline || '',
    category: product.category || 'streaming',
    image_url: product.imageUrl || '',
    tile: product.tile || 'tile-cloud',
    glyph: product.glyph || '•',
    glyph_color: product.glyphColor || '#a87bff',
    price_from: product.priceFrom ?? 0,
    rating: product.rating ?? 5,
    review_count: product.reviewCount ?? 0,
    stock: product.stock ?? 0,
    delivery: product.delivery || '',
    description: product.description || '',
    sort_order: 0,
    reviews_5: product.reviewsByStar?.[5] ?? 0,
    reviews_4: product.reviewsByStar?.[4] ?? 0,
    reviews_3: product.reviewsByStar?.[3] ?? 0,
    reviews_2: product.reviewsByStar?.[2] ?? 0,
    reviews_1: product.reviewsByStar?.[1] ?? 0,
  }));
  const [variants, setVariants] = React.useState(() => (product.variants || []).map(v => ({
    id: v.id, label: v.label, price: v.price, in_stock: v.inStock, badge: v.badge || '', sort_order: 0, _new: false,
  })));
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const setV = (i, k, v) => setVariants(vs => vs.map((x, j) => j === i ? { ...x, [k]: v } : x));
  const addVariant = () => setVariants(vs => [...vs, { id: '', label: '', price: 0, in_stock: 0, badge: '', sort_order: vs.length + 1, _new: true }]);
  const delVariant = (i) => setVariants(vs => vs.filter((_, j) => j !== i));

  const save = async () => {
    setErr(null); setSaving(true);
    try {
      const payload = {
        id: form.id.trim(),
        name: form.name, tagline: form.tagline, category: form.category,
        image_url: form.image_url || null,
        tile: form.tile, glyph: form.glyph, glyph_color: form.glyph_color,
        price_from: Number(form.price_from), rating: Number(form.rating),
        review_count: Number(form.review_count), stock: Number(form.stock),
        delivery: form.delivery, description: form.description, sort_order: Number(form.sort_order),
        reviews_5: Number(form.reviews_5) || 0,
        reviews_4: Number(form.reviews_4) || 0,
        reviews_3: Number(form.reviews_3) || 0,
        reviews_2: Number(form.reviews_2) || 0,
        reviews_1: Number(form.reviews_1) || 0,
      };
      if (!payload.id) throw new Error('ID is required');
      const { error } = await sb.from('products').upsert(payload);
      if (error) throw error;

      // replace variants: delete removed ones, upsert rest
      const { data: existing } = await sb.from('product_variants').select('id').eq('product_id', payload.id);
      const keepIds = variants.map(v => v.id).filter(Boolean);
      const toDelete = (existing || []).map(r => r.id).filter(id => !keepIds.includes(id));
      if (toDelete.length) {
        const { error: dErr } = await sb.from('product_variants').delete().in('id', toDelete);
        if (dErr) throw dErr;
      }
      for (let i = 0; i < variants.length; i++) {
        const v = variants[i];
        if (!v.id || !v.label) continue;
        const { error: vErr } = await sb.from('product_variants').upsert({
          id: v.id, product_id: payload.id, label: v.label, price: Number(v.price),
          in_stock: Number(v.in_stock), badge: v.badge || null, sort_order: i + 1,
        });
        if (vErr) throw vErr;
      }
      onSaved();
    } catch (e) {
      setErr(e.message || String(e));
    } finally { setSaving(false); }
  };

  return (
    <div className="fixed inset-0 z-40 flex items-start justify-center p-5 overflow-auto" style={{ background: 'rgba(7,7,12,0.8)', backdropFilter: 'blur(6px)' }}>
      <div className="relative w-full max-w-[780px] glass rounded-2xl p-6 my-10" onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} className="absolute top-3 right-3 text-white/40 hover:text-white"><Icon name="x" size={14} /></button>
        <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">{isNew ? 'New product' : 'Edit product'}</div>
        <h2 className="text-xl font-semibold tracking-tight mb-5">{form.name || '(unnamed)'}</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <Field label="ID (slug)" value={form.id} onChange={v => set('id', v)} disabled={!isNew} mono />
          <Field label="Name" value={form.name} onChange={v => set('name', v)} />
          <Field label="Tagline" value={form.tagline} onChange={v => set('tagline', v)} />
          <SelectField label="Category" value={form.category} onChange={v => set('category', v)}
            options={CATEGORIES.filter(c => c.id !== 'all').map(c => ({ value: c.id, label: c.name }))} />
          <Field label="Image URL" value={form.image_url} onChange={v => set('image_url', v)} placeholder="https://…" full />
          <Field label="Price from ($)" value={form.price_from} onChange={v => set('price_from', v)} type="number" />
          <Field label="Stock" value={form.stock} onChange={v => set('stock', v)} type="number" />
          <Field label="Rating" value={form.rating} onChange={v => set('rating', v)} type="number" step="0.1" />
          <Field label="Review count" value={form.review_count} onChange={v => set('review_count', v)} type="number" />
          <Field label="Sort order" value={form.sort_order} onChange={v => set('sort_order', v)} type="number" />
          <Field label="Tile class" value={form.tile} onChange={v => set('tile', v)} mono />
          <Field label="Glyph" value={form.glyph} onChange={v => set('glyph', v)} mono />
          <ColorField label="Glyph color" value={form.glyph_color} onChange={v => set('glyph_color', v)} />
          <Field label="Delivery" value={form.delivery} onChange={v => set('delivery', v)} full />
          <TextAreaField label="Description" value={form.description} onChange={v => set('description', v)} />
        </div>

        <div className="mt-6">
          <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Review count per star</div>
          <p className="text-xs text-white/50 mb-3">Sets the star-distribution bars on the product page. Leave all at 0 to fall back to counting actual reviews.</p>
          <div className="grid grid-cols-5 gap-2">
            {[5, 4, 3, 2, 1].map(n => (
              <label key={n} className="hairline rounded-lg p-2 flex flex-col gap-1" style={{ background: 'var(--bg-1)' }}>
                <span className="text-[11px] mono text-white/50">{n} ★</span>
                <input
                  type="number" min="0"
                  value={form[`reviews_${n}`] ?? 0}
                  onChange={e => set(`reviews_${n}`, e.target.value)}
                  className="bg-transparent mono text-sm outline-none"
                />
              </label>
            ))}
          </div>
          <div className="text-[11px] mono text-white/40 mt-2">
            Total: {[5,4,3,2,1].reduce((a,n) => a + (Number(form[`reviews_${n}`]) || 0), 0).toLocaleString()}
          </div>
        </div>

        <div className="mt-6">
          <div className="flex items-center justify-between mb-2">
            <div className="text-[11px] mono uppercase tracking-widest text-white/40">Variants</div>
            <button onClick={addVariant} className="btn-ghost px-2 py-1 text-xs inline-flex items-center gap-1"><Icon name="sparkle" size={12} /> Add variant</button>
          </div>
          <div className="space-y-2">
            {variants.map((v, i) => (
              <div key={i} className="grid grid-cols-[110px_1fr_80px_80px_90px_auto] gap-2 items-center hairline rounded-lg p-2" style={{ background: 'var(--bg-1)' }}>
                <input value={v.id} onChange={e => setV(i, 'id', e.target.value)} placeholder="variant-id" className="bg-transparent mono text-xs outline-none hairline rounded px-2 py-1" />
                <input value={v.label} onChange={e => setV(i, 'label', e.target.value)} placeholder="Label" className="bg-transparent text-sm outline-none hairline rounded px-2 py-1" />
                <input value={v.price} onChange={e => setV(i, 'price', e.target.value)} type="number" step="0.01" placeholder="price" className="bg-transparent mono text-xs outline-none hairline rounded px-2 py-1" />
                <input value={v.in_stock} onChange={e => setV(i, 'in_stock', e.target.value)} type="number" placeholder="stock" className="bg-transparent mono text-xs outline-none hairline rounded px-2 py-1" />
                <input value={v.badge} onChange={e => setV(i, 'badge', e.target.value)} placeholder="badge" className="bg-transparent mono text-xs outline-none hairline rounded px-2 py-1" />
                <button onClick={() => delVariant(i)} className="text-white/50 hover:text-white"><Icon name="x" size={14} /></button>
              </div>
            ))}
            {variants.length === 0 && <div className="text-xs text-white/50">No variants yet.</div>}
          </div>
        </div>

        {err && (
          <div className="hairline rounded-lg p-3 text-xs flex gap-2 mt-4" style={{ background: 'rgba(255,109,138,0.05)', borderColor: 'rgba(255,109,138,0.25)', color: 'var(--bad)' }}>
            <Icon name="info" size={14} /><span>{err}</span>
          </div>
        )}

        <div className="flex justify-end gap-2 mt-6">
          <button onClick={onClose} className="btn-ghost px-4 py-2 text-sm">Cancel</button>
          <button onClick={save} disabled={saving} className="btn-primary px-4 py-2 text-sm inline-flex items-center gap-2 disabled:opacity-60">
            {saving ? 'Saving…' : 'Save'}
          </button>
        </div>
      </div>
    </div>
  );
}

function AdminReviews({ refresh }) {
  const [editing, setEditing] = React.useState(null);
  const [filterProd, setFilterProd] = React.useState('all');
  const list = filterProd === 'all' ? REVIEWS : REVIEWS.filter(r => r.product === filterProd);
  return (
    <>
      <div className="flex items-center justify-between mb-4 gap-3 flex-wrap">
        <div className="flex items-center gap-2">
          <span className="text-sm text-white/55">{list.length} reviews</span>
          <select value={filterProd} onChange={e => setFilterProd(e.target.value)} className="hairline rounded-lg bg-transparent text-xs mono px-2 py-1.5" style={{ background: 'var(--bg-1)' }}>
            <option value="all">All products</option>
            {PRODUCTS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
        </div>
        <button onClick={() => setEditing({ _new: true })} className="btn-primary px-3 py-2 text-sm inline-flex items-center gap-2">
          <Icon name="sparkle" size={14} /> New review
        </button>
      </div>
      <div className="hairline rounded-2xl overflow-hidden" style={{ background: 'var(--bg-1)' }}>
        <div className="grid grid-cols-[auto_auto_1fr_auto_auto_auto] gap-4 px-4 py-3 text-[10px] mono uppercase tracking-widest text-white/40 border-b" style={{ borderColor: 'var(--line)' }}>
          <span>Product</span><span>User</span><span>Body</span><span>Rating</span><span>Ver</span><span></span>
        </div>
        {list.map(r => (
          <div key={r.id} className="grid grid-cols-[auto_auto_1fr_auto_auto_auto] gap-4 px-4 py-3 items-center border-t text-sm" style={{ borderColor: 'var(--line)' }}>
            <span className="mono text-xs text-white/60 truncate">{r.product}</span>
            <span className="mono text-xs">@{r.user}</span>
            <span className="text-xs text-white/70 truncate">{r.text}</span>
            <span className="mono text-xs">{r.rating}★</span>
            <span className="mono text-xs">{r.verified ? '✓' : '–'}</span>
            <div className="flex gap-2">
              <button onClick={() => setEditing(r)} className="btn-ghost px-2 py-1 text-xs">Edit</button>
              <button onClick={async () => {
                if (!confirm(`Delete review by @${r.user}?`)) return;
                const { error } = await sb.from('reviews').delete().eq('id', r.id);
                if (error) alert(error.message); else refresh();
              }} className="btn-ghost px-2 py-1 text-xs">Delete</button>
            </div>
          </div>
        ))}
        {list.length === 0 && <div className="px-4 py-10 text-center text-sm text-white/50">No reviews.</div>}
      </div>
      {editing && <ReviewEditor review={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); refresh(); }} />}
    </>
  );
}

function ReviewEditor({ review, onClose, onSaved }) {
  const isNew = review._new;
  const [form, setForm] = React.useState({
    product_id: review.product || (PRODUCTS[0]?.id ?? ''),
    username: review.user || '',
    rating: review.rating ?? 5,
    verified: review.verified ?? true,
    variant: review.variant || '',
    body: review.text || '',
    has_media: review.hasMedia ?? false,
    ago: review.ago || 'just now',
  });
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const save = async () => {
    setErr(null); setSaving(true);
    try {
      const payload = {
        product_id: form.product_id,
        username: form.username,
        rating: Number(form.rating),
        verified: !!form.verified,
        variant: form.variant || null,
        body: form.body,
        has_media: !!form.has_media,
        ago: form.ago,
      };
      let res;
      if (isNew) res = await sb.from('reviews').insert(payload);
      else res = await sb.from('reviews').update(payload).eq('id', review.id);
      if (res.error) throw res.error;
      onSaved();
    } catch (e) {
      setErr(e.message || String(e));
    } finally { setSaving(false); }
  };

  return (
    <div className="fixed inset-0 z-40 flex items-start justify-center p-5 overflow-auto" style={{ background: 'rgba(7,7,12,0.8)', backdropFilter: 'blur(6px)' }}>
      <div className="relative w-full max-w-[640px] glass rounded-2xl p-6 my-10" onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} className="absolute top-3 right-3 text-white/40 hover:text-white"><Icon name="x" size={14} /></button>
        <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">{isNew ? 'New review' : 'Edit review'}</div>
        <h2 className="text-xl font-semibold tracking-tight mb-5">{form.username ? `@${form.username}` : '(unnamed)'}</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <SelectField label="Product" value={form.product_id} onChange={v => set('product_id', v)}
            options={PRODUCTS.map(p => ({ value: p.id, label: p.name }))} />
          <Field label="Username" value={form.username} onChange={v => set('username', v)} mono />
          <Field label="Rating (1–5)" value={form.rating} onChange={v => set('rating', v)} type="number" min="1" max="5" />
          <Field label="Variant label" value={form.variant} onChange={v => set('variant', v)} />
          <Field label="Time text" value={form.ago} onChange={v => set('ago', v)} placeholder="2h ago" />
          <CheckboxField label="Verified" checked={form.verified} onChange={v => set('verified', v)} />
          <CheckboxField label="Has media" checked={form.has_media} onChange={v => set('has_media', v)} />
          <TextAreaField label="Review body" value={form.body} onChange={v => set('body', v)} />
        </div>

        {err && (
          <div className="hairline rounded-lg p-3 text-xs flex gap-2 mt-4" style={{ background: 'rgba(255,109,138,0.05)', borderColor: 'rgba(255,109,138,0.25)', color: 'var(--bad)' }}>
            <Icon name="info" size={14} /><span>{err}</span>
          </div>
        )}

        <div className="flex justify-end gap-2 mt-6">
          <button onClick={onClose} className="btn-ghost px-4 py-2 text-sm">Cancel</button>
          <button onClick={save} disabled={saving} className="btn-primary px-4 py-2 text-sm inline-flex items-center gap-2 disabled:opacity-60">
            {saving ? 'Saving…' : 'Save'}
          </button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, value, onChange, type = 'text', placeholder, mono, disabled, step, min, max, full }) {
  return (
    <label className={`flex flex-col gap-1.5 ${full ? 'md:col-span-2' : ''}`}>
      <span className="text-[11px] mono uppercase tracking-widest text-white/40">{label}</span>
      <input
        type={type} value={value ?? ''} onChange={e => onChange(e.target.value)}
        placeholder={placeholder} disabled={disabled}
        step={step} min={min} max={max}
        className={`hairline rounded-lg bg-transparent outline-none px-3 py-2 text-sm ${mono ? 'mono' : ''} disabled:opacity-60`}
        style={{ background: 'var(--bg-1)' }}
      />
    </label>
  );
}

function TextAreaField({ label, value, onChange }) {
  return (
    <label className="flex flex-col gap-1.5 md:col-span-2">
      <span className="text-[11px] mono uppercase tracking-widest text-white/40">{label}</span>
      <textarea
        value={value ?? ''} onChange={e => onChange(e.target.value)} rows={4}
        className="hairline rounded-lg bg-transparent outline-none px-3 py-2 text-sm"
        style={{ background: 'var(--bg-1)' }}
      />
    </label>
  );
}

function SelectField({ label, value, onChange, options }) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-[11px] mono uppercase tracking-widest text-white/40">{label}</span>
      <select value={value} onChange={e => onChange(e.target.value)}
        className="hairline rounded-lg bg-transparent outline-none px-3 py-2 text-sm"
        style={{ background: 'var(--bg-1)' }}
      >
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </label>
  );
}

function ColorField({ label, value, onChange }) {
  const safe = /^#[0-9a-fA-F]{6}$/.test(value || '') ? value : '#a87bff';
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-[11px] mono uppercase tracking-widest text-white/40">{label}</span>
      <div className="hairline rounded-lg flex items-center gap-2 px-2 py-1.5" style={{ background: 'var(--bg-1)' }}>
        <input
          type="color"
          value={safe}
          onChange={(e) => onChange(e.target.value)}
          className="w-8 h-8 rounded cursor-pointer bg-transparent border-0 p-0"
          style={{ appearance: 'none', WebkitAppearance: 'none' }}
        />
        <input
          type="text"
          value={value ?? ''}
          onChange={(e) => onChange(e.target.value)}
          placeholder="#a87bff"
          className="bg-transparent mono text-sm outline-none flex-1 min-w-0"
        />
      </div>
    </label>
  );
}

function CheckboxField({ label, checked, onChange }) {
  return (
    <label className="flex items-center gap-2 cursor-pointer hairline rounded-lg px-3 py-2.5" style={{ background: 'var(--bg-1)' }}>
      <input type="checkbox" checked={!!checked} onChange={e => onChange(e.target.checked)} />
      <span className="text-sm">{label}</span>
    </label>
  );
}

Object.assign(window, { AdminPage });