/* IIFE */
(function(){
const { useState } = React;
const DS = window.OurlotDesignSystem_7a8a8b;
const { Icon, Button, Badge, Avatar, Rating, Tag, Tabs, Input, Textarea, Switch } = DS;
const { reviews } = window.OLT_DATA;

function Sidebar({ view, setView }) {
  const nav = [['overview', 'Home', 'layout-dashboard'], ['reviews', 'Reviews', 'star'], ['insights', 'Insights', 'trending-up'], ['profile', 'Business profile', 'store'], ['photos', 'Photos', 'image'], ['settings', 'Settings', 'settings']];
  return (
    <aside style={{ width: 240, background: 'var(--green-900)', color: 'var(--green-100)', display: 'flex', flexDirection: 'column', flex: '0 0 240px', position: 'sticky', top: 0, height: '100vh' }}>
      <div style={{ padding: '20px 20px 16px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: '#fff' }}>ourlot<span style={{ color: 'var(--apricot-400)' }}>.</span> <span style={{ fontSize: 12, fontFamily: 'var(--font-sans)', fontWeight: 600, color: 'var(--green-300)', letterSpacing: '.04em' }}>BUSINESS</span></div>
      <div style={{ padding: '0 12px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {nav.map(([id, l, i]) => (
          <button key={id} onClick={() => setView(id)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', border: 0, borderRadius: 'var(--radius-md)', cursor: 'pointer', textAlign: 'left', fontSize: 14, fontWeight: view === id ? 700 : 500, fontFamily: 'var(--font-sans)', background: view === id ? 'var(--green-700)' : 'transparent', color: view === id ? '#fff' : 'var(--green-100)' }}><Icon name={i} size={18} />{l}</button>
        ))}
      </div>
      <div style={{ marginTop: 'auto', padding: 16, display: 'flex', gap: 10, alignItems: 'center', borderTop: '1px solid var(--green-800)' }}><Avatar name="Ada's Coffee" size={36} /><div style={{ minWidth: 0 }}><div style={{ color: '#fff', fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Ada's Coffee House</div><div style={{ fontSize: 12, color: 'var(--green-300)' }}>Owner</div></div></div>
    </aside>
  );
}

function Topbar({ title }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 10, background: 'color-mix(in srgb,var(--surface-page) 90%,transparent)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border-subtle)', padding: '14px 28px', display: 'flex', alignItems: 'center', gap: 16 }}>
      <h1 style={{ fontSize: 'var(--text-xl)', margin: 0 }}>{title}</h1>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
        <Badge tone="success" dot>Live · Verified</Badge>
        <Button variant="secondary" size="sm" iconLeft={<Icon name="external-link" size={15} />}>View listing</Button>
        <Button size="sm">Publish updates</Button>
      </div>
    </div>
  );
}

function Stat({ label, value, delta, icon, up = true }) {
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--text-muted)' }}><span style={{ fontSize: 13, fontWeight: 600 }}>{label}</span><Icon name={icon} size={18} /></div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, color: 'var(--text-strong)', margin: '8px 0 4px' }}>{value}</div>
      <div style={{ fontSize: 13, color: up ? 'var(--color-success)' : 'var(--color-danger)', display: 'flex', gap: 4, alignItems: 'center' }}><Icon name={up ? 'arrow-up-right' : 'arrow-down-right'} size={14} />{delta} vs last week</div>
    </div>
  );
}

function Bars() {
  const data = [40, 55, 48, 70, 62, 88, 74];
  const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 18 }}><h3 style={{ margin: 0, fontSize: 'var(--text-lg)' }}>Profile views</h3><Badge tone="primary">This week</Badge></div>
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', height: 160 }}>
        {data.map((v, i) => <div key={i} style={{ flex: 1, textAlign: 'center' }}><div style={{ height: v * 1.6, background: i === 5 ? 'var(--apricot-400)' : 'var(--green-500)', borderRadius: 'var(--radius-sm) var(--radius-sm) 0 0' }} /><div style={{ fontSize: 12, color: 'var(--text-subtle)', marginTop: 6 }}>{days[i]}</div></div>)}
      </div>
    </div>
  );
}

function ReviewCard({ r, respondable }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 18, boxShadow: 'var(--shadow-sm)' }}>
      <div style={{ display: 'flex', gap: 12 }}>
        <Avatar name={r.name} size={40} />
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><strong style={{ color: 'var(--text-strong)' }}>{r.name}</strong><span style={{ fontSize: 13, color: 'var(--text-subtle)' }}>{r.when}</span>{respondable && <Badge tone="warning" style={{ marginLeft: 'auto' }}>Needs reply</Badge>}</div>
          <div style={{ margin: '4px 0 6px' }}><Rating value={r.rating} size={13} showValue={false} /></div>
          <p style={{ margin: 0, fontSize: 15, color: 'var(--text-body)' }}>{r.body}</p>
          {open ? <div style={{ marginTop: 10 }}><Textarea placeholder="Thank them and keep it warm…" rows={2} /><div style={{ marginTop: 8, display: 'flex', gap: 8 }}><Button size="sm" onClick={() => setOpen(false)}>Post reply</Button><Button size="sm" variant="ghost" onClick={() => setOpen(false)}>Cancel</Button></div></div>
            : respondable && <Button size="sm" variant="secondary" style={{ marginTop: 10 }} iconLeft={<Icon name="reply" size={14} />} onClick={() => setOpen(true)}>Reply</Button>}
        </div>
      </div>
    </div>
  );
}

function Overview() {
  return (
    <div style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
        <Stat label="Profile views" value="1,284" delta="+12%" icon="eye" />
        <Stat label="Direction taps" value="342" delta="+8%" icon="navigation" />
        <Stat label="Calls" value="96" delta="+21%" icon="phone" />
        <Stat label="Rating" value="4.7" delta="+0.1" icon="star" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
        <Bars />
        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 20 }}>
          <h3 style={{ margin: '0 0 14px', fontSize: 'var(--text-lg)' }}>Profile strength</h3>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            <div style={{ position: 'relative', width: 64, height: 64 }}><svg width="64" height="64"><circle cx="32" cy="32" r="27" fill="none" stroke="var(--stone-200)" strokeWidth="7" /><circle cx="32" cy="32" r="27" fill="none" stroke="var(--color-primary)" strokeWidth="7" strokeDasharray="170" strokeDashoffset="34" strokeLinecap="round" transform="rotate(-90 32 32)" /></svg><span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--text-strong)' }}>80%</span></div>
            <div style={{ fontSize: 14, color: 'var(--text-muted)' }}>Add 2 more photos and your hours to reach 100%.</div>
          </div>
          {[['Verified details', true], ['Photos (3/5)', false], ['Opening hours', false], ['Responded to reviews', true]].map(([l, done]) => <div key={l} style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '6px 0', fontSize: 14, color: done ? 'var(--text-body)' : 'var(--text-muted)' }}><Icon name={done ? 'check-circle' : 'circle'} size={16} color={done ? 'var(--color-success)' : 'var(--stone-400)'} />{l}</div>)}
        </div>
      </div>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}><h3 style={{ margin: 0, fontSize: 'var(--text-lg)' }}>Recent reviews</h3><Button variant="ghost" size="sm" iconRight={<Icon name="chevron-right" size={16} />}>All reviews</Button></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>{reviews.slice(0, 2).map((r, i) => <ReviewCard key={r.id} r={r} respondable={i === 0} />)}</div>
      </div>
    </div>
  );
}

function Reviews() {
  return (
    <div style={{ padding: 28 }}>
      <Tabs defaultValue="all" tabs={[{ value: 'all', label: 'All', count: reviews.length }, { value: 'reply', label: 'Needs reply', count: 1 }, { value: 'replied', label: 'Replied' }]} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 20 }}>{reviews.map((r, i) => <ReviewCard key={r.id} r={r} respondable={i === 0} />)}</div>
    </div>
  );
}

function Profile() {
  return (
    <div style={{ padding: 28, maxWidth: 720 }}>
      <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Input label="Business name" defaultValue="Ada's Coffee House" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}><DS.Select label="Category" options={['Café', 'Restaurant', 'Bakery']} /><Input label="Price level" defaultValue="££" /></div>
        <Textarea label="About" defaultValue="A dependable neighbourhood café in Shoreditch — great coffee, warm service, and reliable wifi." rows={3} />
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}><Tag onRemove={() => {}}>Independent</Tag><Tag onRemove={() => {}}>Great for work</Tag><Tag onRemove={() => {}}>Vegan options</Tag><Button variant="ghost" size="sm" iconLeft={<Icon name="plus" size={14} />}>Add tag</Button></div>
        <Switch label="Show 'open now' status automatically from hours" defaultChecked />
        <div style={{ display: 'flex', gap: 10 }}><Button>Save changes</Button><Button variant="ghost">Cancel</Button></div>
      </div>
    </div>
  );
}

function Placeholder({ icon, label }) {
  return <div style={{ padding: 28 }}><div style={{ background: 'var(--surface-card)', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-lg)', padding: 60, textAlign: 'center', color: 'var(--text-muted)' }}><Icon name={icon} size={36} /><p style={{ marginTop: 10 }}>{label}</p></div></div>;
}

const TITLES = { overview: 'Home', reviews: 'Reviews', insights: 'Insights', profile: 'Business profile', photos: 'Photos', settings: 'Settings' };

function BusinessDashboardApp() {
  const [view, setView] = useState('overview');
  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--surface-page)' }}>
      <Sidebar view={view} setView={setView} />
      <main style={{ flex: 1, minWidth: 0 }}>
        <Topbar title={TITLES[view]} />
        {view === 'overview' && <Overview />}
        {view === 'reviews' && <Reviews />}
        {view === 'profile' && <Profile />}
        {view === 'insights' && <Placeholder icon="trending-up" label="Insights charts would appear here." />}
        {view === 'photos' && <Placeholder icon="image" label="Photo manager would appear here." />}
        {view === 'settings' && <Placeholder icon="settings" label="Account settings would appear here." />}
      </main>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<BusinessDashboardApp />);

})();