// MyBookings — 飼い主のマイページ。予約履歴・再予約・初回カウンセリング・レビュー投稿を集約

const MY_BOOKINGS = [
  {
    id:'B-3842', status:'completed', sitter:'みかこ', sitterId:1, sitterPhoto:'peach',
    date:'2026-05-12（日）', time:'14:00–16:00', service:'訪問ケア', pet:'ココ（柴犬・3歳）',
    total: 12900, reviewed:true, rating:5,
  },
  {
    id:'B-3744', status:'completed', sitter:'みかこ', sitterId:1, sitterPhoto:'peach',
    date:'2026-04-28（日）', time:'10:00–12:00', service:'訪問ケア・散歩', pet:'ココ（柴犬・3歳）',
    total: 12900, reviewed:false, rating:null,
  },
  {
    id:'B-3611', status:'completed', sitter:'たくみ', sitterId:2, sitterPhoto:'warm',
    date:'2026-04-06（日）', time:'09:00–13:00', service:'訪問ケア・散歩', pet:'ココ（柴犬・3歳）',
    total: 21600, reviewed:true, rating:5,
  },
  {
    id:'B-3520', status:'completed', sitter:'ゆり', sitterId:3, sitterPhoto:'sage',
    date:'2026-03-24（日）', time:'13:00–15:00', service:'訪問ケア', pet:'ココ（柴犬・3歳）',
    total: 13800, reviewed:true, rating:4,
  },
];

const UPCOMING = [
  {
    id:'B-3911', status:'upcoming', sitter:'みかこ', sitterId:1, sitterPhoto:'peach',
    date:'2026-05-24（土）', time:'10:00–13:00', service:'訪問ケア・散歩', pet:'ココ（柴犬・3歳）',
    total: 16100, paymentStatus:'paid', // pre-paid
  },
];

function MyBookings({ initialTab = 'overview' }) {
  const [tab, setTab] = React.useState(initialTab);   // overview | history | counseling | reviews
  const [reviewing, setReviewing] = React.useState(null); // booking to review

  return (
    <div data-page="mypage" style={{
      width:'100%',minHeight:'100%',background:'var(--c-bg)',
      color:'#2E2418',fontFamily:'var(--font-jp)',display:'flex',flexDirection:'column',
    }}>
      {/* Header */}
      <header style={{
        display:'flex',alignItems:'center',justifyContent:'space-between',
        padding:'18px 32px',background:'#fff',borderBottom:'1px solid rgba(0,0,0,.04)',
      }}>
        <img src="assets/logo-horizontal.png" alt="palpet" style={{height:44}}/>
        <nav style={{display:'flex',gap:24,fontSize:13}}>
          <a style={{fontWeight:700,color:'var(--c-primary-deep)'}}>マイページ</a>
          <a style={{color:'#7a6a55'}}>シッターを探す</a>
          <a style={{color:'#7a6a55'}}>メッセージ</a>
          <a style={{color:'#7a6a55'}}>ヘルプ</a>
        </nav>
        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          <button style={{
            width:38,height:38,borderRadius:12,border:'none',background:'transparent',
            cursor:'pointer',display:'grid',placeItems:'center',
          }}><Icons.Bell size={18}/></button>
          <div style={{
            width:38,height:38,borderRadius:'50%',background:'var(--c-primary-soft)',
            color:'var(--c-primary-deep)',display:'grid',placeItems:'center',fontWeight:700,
          }}>S</div>
        </div>
      </header>

      {/* Sub-nav tabs */}
      <div style={{
        background:'#fff',padding:'0 32px',borderBottom:'1px solid rgba(0,0,0,.04)',
        display:'flex',gap:4,
      }}>
        {[
          ['overview','ホーム'],
          ['history','予約履歴'],
          ['counseling','初回カウンセリング'],
          ['reviews','レビュー'],
        ].map(([k,n])=>(
          <button key={k} onClick={()=>setTab(k)} style={{
            padding:'16px 20px',background:'transparent',border:'none',cursor:'pointer',
            fontFamily:'inherit',fontSize:14,fontWeight:tab===k?700:500,
            color:tab===k?'var(--c-primary-deep)':'#7a6a55',
            borderBottom:'3px solid '+(tab===k?'var(--c-primary)':'transparent'),
            marginBottom:-1,
          }}>{n}</button>
        ))}
      </div>

      <main style={{padding:'32px 32px 48px',flex:1}}>
        {tab === 'overview' && <OverviewTab onTab={setTab} onReview={setReviewing}/>}
        {tab === 'history' && <HistoryTab onReview={setReviewing}/>}
        {tab === 'counseling' && <CounselingTab/>}
        {tab === 'reviews' && <ReviewsTab onReview={setReviewing}/>}
      </main>

      {reviewing && <ReviewModal booking={reviewing} onClose={()=>setReviewing(null)}/>}
    </div>
  );
}

// ---------- ホーム ----------
function OverviewTab({ onTab, onReview }) {
  const next = UPCOMING[0];
  const unreviewed = MY_BOOKINGS.filter(b => !b.reviewed);
  return (
    <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:24,maxWidth:1240,margin:'0 auto'}}>
      <div>
        {/* 次の予定 */}
        <Card>
          <CardHead label="次の予定" right={next ? <a style={{fontSize:12,color:'var(--c-primary-deep)'}}>予約を編集</a> : null}/>
          {next ? (
            <div style={{display:'flex',gap:16,alignItems:'center'}}>
              <div style={{
                width:88,height:88,borderRadius:18,
                background: window.photoBG ? window.photoBG(next.sitterPhoto) : 'var(--c-bg)',flex:'0 0 auto',
              }}/>
              <div style={{flex:1}}>
                <div style={{fontSize:12,color:'#7a6a55',marginBottom:2}}>{next.date} ・ {next.time}</div>
                <div style={{fontSize:18,fontWeight:700}}>{next.sitter}さんが {next.pet} のお世話</div>
                <div style={{fontSize:13,color:'#5d4d3a',marginTop:4}}>{next.service}</div>
                <div style={{display:'flex',gap:6,marginTop:8,flexWrap:'wrap'}}>
                  <PaidBadge/>
                  <span style={{
                    fontSize:11,padding:'3px 9px',borderRadius:999,
                    background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',fontWeight:700,
                  }}>事前精算済</span>
                </div>
              </div>
              <button style={{
                background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',border:'none',
                padding:'12px 18px',borderRadius:12,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:13,
              }}>メッセージ</button>
            </div>
          ) : (
            <div style={{padding:'18px 0',color:'#7a6a55',fontSize:14}}>予約はありません。シッターを探してみましょう。</div>
          )}
        </Card>

        {/* 未投稿のレビュー */}
        {unreviewed.length > 0 && (
          <Card style={{marginTop:18}}>
            <CardHead label="レビューをお願いします" right={<a style={{fontSize:12,color:'var(--c-primary-deep)'}} onClick={()=>onTab('reviews')}>すべて見る</a>}/>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {unreviewed.slice(0,2).map(b=>(
                <ReviewPrompt key={b.id} booking={b} onClick={()=>onReview(b)}/>
              ))}
            </div>
          </Card>
        )}

        {/* リピート予約 */}
        <Card style={{marginTop:18}}>
          <CardHead label="もう一度予約" right={<a style={{fontSize:12,color:'var(--c-primary-deep)'}} onClick={()=>onTab('history')}>履歴を見る</a>}/>
          <div style={{fontSize:12,color:'#7a6a55',marginBottom:12}}>
            以前と同じシッター・同じ条件で、ワンクリックで予約できます。
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            {MY_BOOKINGS.slice(0,2).map(b => <RebookCard key={b.id} booking={b}/>)}
          </div>
        </Card>
      </div>

      <div>
        {/* 初回カウンセリング */}
        <Card>
          <CardHead label="まだお試しですか？" />
          <div style={{display:'flex',gap:10,alignItems:'flex-start',marginBottom:10}}>
            <div style={{
              width:40,height:40,borderRadius:12,background:'var(--c-primary-soft)',
              color:'var(--c-primary-deep)',display:'grid',placeItems:'center',flex:'0 0 auto',
            }}><Icons.Sparkle size={20}/></div>
            <div style={{flex:1}}>
              <div style={{fontWeight:700,fontSize:15,marginBottom:4}}>初回カウンセリング</div>
              <div style={{fontSize:12,color:'#5d4d3a',lineHeight:1.7}}>
                30分・無料。ペットの性格や暮らしについてヒアリングし、相性のいいシッターをご提案します。
              </div>
            </div>
          </div>
          <button onClick={()=>onTab('counseling')} style={{
            width:'100%',background:'var(--c-primary-deep)',color:'#fff',border:'none',
            padding:'12px',borderRadius:12,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:14,
          }}>無料カウンセリングを予約</button>
        </Card>

        {/* サマリー */}
        <Card style={{marginTop:18}}>
          <CardHead label="累計サマリー"/>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <StatBox n={MY_BOOKINGS.length + UPCOMING.length} l="ご予約回数"/>
            <StatBox n="3名" l="ご縁のあったシッター"/>
            <StatBox n="¥61,300" l="累計お支払い"/>
            <StatBox n="4.83" l="あなたのレビュー平均"/>
          </div>
        </Card>
      </div>
    </div>
  );
}

// ---------- 予約履歴 ----------
function HistoryTab({ onReview }) {
  const [filter, setFilter] = React.useState('all'); // all | upcoming | completed | unreviewed
  const all = [...UPCOMING.map(b=>({...b,status:'upcoming'})), ...MY_BOOKINGS];
  const items = all.filter(b => {
    if (filter === 'all') return true;
    if (filter === 'upcoming') return b.status === 'upcoming';
    if (filter === 'completed') return b.status === 'completed';
    if (filter === 'unreviewed') return b.status === 'completed' && !b.reviewed;
    return true;
  });

  return (
    <div style={{maxWidth:1240,margin:'0 auto'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:18}}>
        <div>
          <h2 style={{fontSize:24,fontWeight:700,letterSpacing:'-.01em'}}>予約履歴</h2>
          <div style={{fontSize:13,color:'#7a6a55',marginTop:4}}>{items.length}件の予約</div>
        </div>
        <div style={{display:'flex',gap:6}}>
          {[['all','すべて'],['upcoming','予定'],['completed','完了'],['unreviewed','未レビュー']].map(([k,n])=>(
            <button key={k} onClick={()=>setFilter(k)} style={{
              padding:'8px 14px',borderRadius:999,fontFamily:'inherit',cursor:'pointer',
              border:'1.5px solid '+(filter===k?'var(--c-primary)':'rgba(0,0,0,.08)'),
              background:filter===k?'var(--c-primary-soft)':'#fff',
              color:filter===k?'var(--c-primary-deep)':'#5d4d3a',
              fontWeight:filter===k?700:500,fontSize:13,
            }}>{n}</button>
          ))}
        </div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {items.map(b => (
          <BookingRow key={b.id} booking={b} onReview={onReview}/>
        ))}
      </div>
    </div>
  );
}

function BookingRow({ booking, onReview }) {
  const b = booking;
  const isUpcoming = b.status === 'upcoming';
  return (
    <div style={{
      background:'#fff',borderRadius:18,padding:'18px 20px',
      display:'grid',gridTemplateColumns:'80px 1fr auto',gap:18,alignItems:'center',
      border:'1px solid '+(isUpcoming?'var(--c-primary)':'rgba(0,0,0,.04)'),
    }}>
      <div style={{
        width:80,height:80,borderRadius:14,
        background: window.photoBG ? window.photoBG(b.sitterId || b.sitterPhoto) : 'var(--c-bg)',
      }}/>
      <div>
        <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:4}}>
          <span style={{
            fontSize:11,padding:'2px 9px',borderRadius:999,fontWeight:700,
            background: isUpcoming?'var(--c-primary)':'rgba(0,0,0,.06)',
            color: isUpcoming?'#fff':'#7a6a55',
          }}>{isUpcoming?'予定':'完了'}</span>
          <span style={{fontSize:12,color:'#9c8a72',fontFamily:'ui-monospace'}}>{b.id}</span>
          <span style={{fontSize:13,color:'#7a6a55'}}>{b.date}・{b.time}</span>
        </div>
        <div style={{fontSize:16,fontWeight:700}}>
          {b.sitter}さん ・ <span style={{fontWeight:500,color:'#5d4d3a'}}>{b.service}</span>
        </div>
        <div style={{fontSize:12,color:'#7a6a55',marginTop:4}}>
          {b.pet} ・ 合計 ¥{b.total.toLocaleString()}（事前精算済）
        </div>
        {b.status === 'completed' && b.reviewed && (
          <div style={{fontSize:11,marginTop:6,color:'var(--c-primary-deep)'}}>
            <Icons.Star size={11}/> あなたのレビュー：{b.rating}.0
          </div>
        )}
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        {isUpcoming ? (
          <>
            <button style={{
              background:'var(--c-primary-deep)',color:'#fff',border:'none',
              padding:'10px 18px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:13,
            }}>詳細</button>
            <button style={{
              background:'#fff',color:'#7a6a55',border:'1.5px solid rgba(0,0,0,.1)',
              padding:'8px 18px',borderRadius:10,fontWeight:600,cursor:'pointer',fontFamily:'inherit',fontSize:12,
            }}>変更</button>
          </>
        ) : (
          <>
            <button style={{
              background:'var(--c-primary-deep)',color:'#fff',border:'none',
              padding:'10px 18px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:13,
              display:'inline-flex',alignItems:'center',gap:6,
            }}><Icons.Calendar size={12}/> もう一度予約</button>
            {!b.reviewed && (
              <button onClick={()=>onReview(b)} style={{
                background:'color-mix(in oklab, var(--c-accent) 25%, #fff)',
                color:'#8b6a14',border:'none',
                padding:'8px 18px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:12,
              }}>★ レビュー</button>
            )}
          </>
        )}
      </div>
    </div>
  );
}

// ---------- 初回カウンセリング ----------
function CounselingTab() {
  const slots = [
    ['5/22 (木)','10:00','available'],
    ['5/22 (木)','14:00','available'],
    ['5/22 (木)','19:00','full'],
    ['5/23 (金)','11:00','available'],
    ['5/23 (金)','15:00','available'],
    ['5/23 (金)','20:00','available'],
    ['5/24 (土)','10:00','full'],
    ['5/24 (土)','13:00','available'],
    ['5/24 (土)','16:00','available'],
  ];
  const [pick, setPick] = React.useState('5/23 (金) 15:00');
  return (
    <div style={{maxWidth:980,margin:'0 auto'}}>
      <div style={{textAlign:'center',marginBottom:24}}>
        <div style={{
          display:'inline-flex',gap:8,alignItems:'center',
          background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
          padding:'6px 14px',borderRadius:999,fontSize:12,fontWeight:700,marginBottom:14,
        }}><Icons.Sparkle size={14}/> 初めての方限定 ・ 30分 ・ 無料</div>
        <h2 style={{fontSize:32,fontWeight:700,letterSpacing:'-.01em',marginBottom:8}}>
          まずはお話を聞かせてください
        </h2>
        <p style={{fontSize:14,color:'#5d4d3a',lineHeight:1.9,maxWidth:560,margin:'0 auto'}}>
          専属のコンシェルジュが、ペットの性格や暮らし方を伺ったうえで、相性の良いシッターをご提案します。
          ビデオ通話または電話、どちらでもOKです。
        </p>
      </div>

      <Card>
        <CardHead label="ご希望の日時を選んでください"/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:18}}>
          {slots.map(([d,t,st],i)=>{
            const key = `${d} ${t}`;
            const sel = pick === key;
            const full = st === 'full';
            return (
              <button key={i} onClick={()=> !full && setPick(key)} disabled={full} style={{
                padding:'12px 14px',borderRadius:14,fontFamily:'inherit',
                cursor:full?'not-allowed':'pointer',
                border:'1.5px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
                background:full?'rgba(0,0,0,.03)':sel?'var(--c-primary-soft)':'#fff',
                color:full?'#bbb':sel?'var(--c-primary-deep)':'#3c2f1e',
                textAlign:'left',
              }}>
                <div style={{fontSize:11,color:full?'#bbb':'#7a6a55'}}>{d}</div>
                <div style={{fontWeight:700,fontSize:16,marginTop:2}}>{t}{full && <span style={{fontSize:10,marginLeft:6}}>満員</span>}</div>
              </button>
            );
          })}
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:18}}>
          <Field label="通話方法">
            <div style={{display:'flex',gap:6}}>
              {['ビデオ通話','電話'].map((n,i)=>(
                <button key={n} style={{
                  flex:1,padding:'12px 0',borderRadius:12,fontFamily:'inherit',cursor:'pointer',
                  border:'1.5px solid '+(i===0?'var(--c-primary)':'rgba(0,0,0,.08)'),
                  background:i===0?'var(--c-primary-soft)':'#fff',
                  color:i===0?'var(--c-primary-deep)':'#5d4d3a',
                  fontWeight:600,fontSize:13,
                }}>{n}</button>
              ))}
            </div>
          </Field>
          <Field label="ご相談ペット">
            <select style={inputCss}>
              <option>ココ（柴犬・3歳）</option>
              <option>新しいペットを登録…</option>
            </select>
          </Field>
        </div>

        <Field label="気になっていること（任意）" hint="どんな小さなことでも教えてください">
          <textarea placeholder="例：人見知りなので、最初はゆっくり距離を縮めてくれる方がいいです。"
                    style={{...inputCss, minHeight:100, resize:'vertical'}}/>
        </Field>

        <div style={{
          marginTop:18,padding:'14px 18px',borderRadius:14,
          background:'var(--c-bg-alt)',display:'flex',justifyContent:'space-between',alignItems:'center',
        }}>
          <div>
            <div style={{fontSize:12,color:'#7a6a55'}}>選択中</div>
            <div style={{fontWeight:700,fontSize:18}}>{pick}</div>
          </div>
          <button style={{
            background:'var(--c-primary-deep)',color:'#fff',border:'none',
            padding:'14px 26px',borderRadius:14,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:15,
          }}>無料で予約する</button>
        </div>
      </Card>
    </div>
  );
}

// ---------- レビュー ----------
function ReviewsTab({ onReview }) {
  const unreviewed = MY_BOOKINGS.filter(b => !b.reviewed);
  const myReviews = MY_BOOKINGS.filter(b => b.reviewed);
  return (
    <div style={{maxWidth:1240,margin:'0 auto',display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:24}}>
      <div>
        <h2 style={{fontSize:20,fontWeight:700,marginBottom:12}}>未投稿のレビュー</h2>
        {unreviewed.length === 0 ? (
          <Card><div style={{padding:'12px 0',color:'#7a6a55',fontSize:14}}>未投稿のレビューはありません。</div></Card>
        ) : (
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            {unreviewed.map(b => <ReviewPrompt key={b.id} booking={b} onClick={()=>onReview(b)}/>)}
          </div>
        )}
      </div>

      <div>
        <h2 style={{fontSize:20,fontWeight:700,marginBottom:12}}>投稿済みのレビュー</h2>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {myReviews.map(b => (
            <Card key={b.id}>
              <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:8}}>
                <div style={{
                  width:40,height:40,borderRadius:'50%',
                  background: window.photoBG ? window.photoBG(b.sitterId || b.sitterPhoto) : 'var(--c-bg)',
                }}/>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700}}>{b.sitter}さん</div>
                  <div style={{fontSize:11,color:'#9c8a72'}}>{b.date}</div>
                </div>
                <div style={{color:'var(--c-primary-deep)',fontWeight:700,display:'flex',gap:2,alignItems:'center'}}>
                  {[1,2,3,4,5].map(i=>(
                    <Icons.Star key={i} size={14}/>
                  )).slice(0, b.rating)}
                </div>
              </div>
              <div style={{fontSize:13,color:'#3c2f1e',lineHeight:1.8}}>
                とても丁寧に対応していただきました。写真もたくさん送ってくれて、安心して任せられます。
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- レビュー入力モーダル ----------
function ReviewModal({ booking, onClose }) {
  const [rating, setRating] = React.useState(5);
  const [tags, setTags] = React.useState([]);
  const [text, setText] = React.useState('');
  const tagOptions = ['丁寧','時間通り','報告が細かい','うちの子が懐いた','清潔','また頼みたい'];
  const toggleTag = (t) => setTags(s => s.includes(t) ? s.filter(x=>x!==t) : [...s,t]);
  return (
    <div style={{
      position:'absolute',inset:0,background:'rgba(20,16,12,.4)',
      display:'flex',alignItems:'center',justifyContent:'center',padding:40,zIndex:5,
    }} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{
        width:'min(560px, 100%)',maxHeight:'90%',overflow:'auto',
        background:'#fff',borderRadius:24,padding:'28px 28px 24px',
      }}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:16}}>
          <div>
            <div style={{fontSize:12,color:'#9c8a72',fontWeight:600,letterSpacing:'.04em',marginBottom:4}}>REVIEW</div>
            <h3 style={{fontSize:22,fontWeight:700,letterSpacing:'-.01em'}}>
              {booking.sitter}さんへのレビュー
            </h3>
            <div style={{fontSize:12,color:'#7a6a55',marginTop:4}}>{booking.date}・{booking.service}</div>
          </div>
          <button onClick={onClose} style={{
            background:'transparent',border:'none',cursor:'pointer',color:'#7a6a55',padding:4,
          }}><Icons.Close size={20}/></button>
        </div>

        <div style={{
          padding:'18px 0',borderTop:'1px solid rgba(0,0,0,.06)',borderBottom:'1px solid rgba(0,0,0,.06)',
          textAlign:'center',marginBottom:18,
        }}>
          <div style={{fontSize:13,color:'#7a6a55',marginBottom:10}}>満足度を教えてください</div>
          <div style={{display:'flex',gap:6,justifyContent:'center'}}>
            {[1,2,3,4,5].map(i=>(
              <button key={i} onClick={()=>setRating(i)} style={{
                background:'transparent',border:'none',cursor:'pointer',
                color: i<=rating ? 'var(--c-primary)' : 'rgba(0,0,0,.12)',
                padding:4,
              }}>
                <Icons.Star size={36}/>
              </button>
            ))}
          </div>
          <div style={{fontSize:13,color:'var(--c-primary-deep)',fontWeight:700,marginTop:6}}>
            {['','要改善','物足りない','ふつう','満足','とても満足'][rating]}
          </div>
        </div>

        <Field label="あてはまるものを選んでください（複数可）">
          <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
            {tagOptions.map(t=>{
              const sel = tags.includes(t);
              return (
                <button key={t} onClick={()=>toggleTag(t)} style={{
                  padding:'8px 14px',borderRadius:999,fontFamily:'inherit',cursor:'pointer',
                  border:'1.5px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
                  background:sel?'var(--c-primary-soft)':'#fff',
                  color:sel?'var(--c-primary-deep)':'#3c2f1e',
                  fontWeight:sel?700:500,fontSize:13,
                }}>{sel && '✓ '}{t}</button>
              );
            })}
          </div>
        </Field>

        <div style={{marginTop:16}}>
          <Field label="コメント" hint="他の飼い主さんの参考になります。具体的なエピソードがあれば嬉しいです。">
            <textarea value={text} onChange={e=>setText(e.target.value)}
                      placeholder="例：留守中の写真と動画がこまめに届いて安心でした…"
                      style={{...inputCss, minHeight:120, resize:'vertical'}}/>
          </Field>
        </div>

        <div style={{display:'flex',gap:10,marginTop:18,justifyContent:'flex-end'}}>
          <button onClick={onClose} style={{
            background:'#fff',color:'#7a6a55',border:'1.5px solid rgba(0,0,0,.1)',
            padding:'12px 22px',borderRadius:12,fontWeight:600,cursor:'pointer',fontFamily:'inherit',fontSize:14,
          }}>キャンセル</button>
          <button style={{
            background:'var(--c-primary-deep)',color:'#fff',border:'none',
            padding:'12px 24px',borderRadius:12,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:14,
          }}>レビューを投稿</button>
        </div>
      </div>
    </div>
  );
}

// ---------- 共通パーツ ----------
function Card({ children, style }) {
  return (
    <div style={{
      background:'#fff',borderRadius:20,padding:'22px 24px',
      border:'1px solid rgba(0,0,0,.04)',...style,
    }}>{children}</div>
  );
}
function CardHead({ label, right }) {
  return (
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
      <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.06em'}}>{label}</div>
      <div>{right}</div>
    </div>
  );
}
function StatBox({n,l}) {
  return (
    <div style={{padding:'12px 14px',background:'var(--c-bg)',borderRadius:12}}>
      <div style={{fontSize:20,fontWeight:700,letterSpacing:'-.01em'}}>{n}</div>
      <div style={{fontSize:11,color:'#7a6a55',marginTop:2}}>{l}</div>
    </div>
  );
}
function PaidBadge() {
  return (
    <span style={{
      fontSize:11,padding:'3px 9px',borderRadius:999,fontWeight:700,
      background:'#E8F5E0',color:'#3a7a2a',
      display:'inline-flex',alignItems:'center',gap:4,
    }}><Icons.Check size={10} stroke={3}/> 支払い完了</span>
  );
}
function ReviewPrompt({ booking, onClick }) {
  return (
    <div onClick={onClick} style={{
      cursor:'pointer',padding:'14px 16px',borderRadius:14,
      background:'color-mix(in oklab, var(--c-accent) 12%, #fff)',
      border:'1px solid color-mix(in oklab, var(--c-accent) 35%, #fff)',
      display:'flex',gap:14,alignItems:'center',
    }}>
      <div style={{
        width:48,height:48,borderRadius:14,
        background: window.photoBG ? window.photoBG(booking.sitterId || booking.sitterPhoto) : 'var(--c-bg)',
      }}/>
      <div style={{flex:1}}>
        <div style={{fontWeight:700,fontSize:14}}>{booking.sitter}さんはいかがでしたか？</div>
        <div style={{fontSize:11,color:'#7a6a55',marginTop:2}}>{booking.date}・{booking.service}</div>
      </div>
      <button style={{
        background:'#8b6a14',color:'#fff',border:'none',
        padding:'9px 16px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:13,
      }}>★ レビューを書く</button>
    </div>
  );
}

function RebookCard({booking}) {
  const b = booking;
  return (
    <div style={{
      padding:14,borderRadius:14,background:'var(--c-bg)',
      display:'flex',gap:12,alignItems:'center',
    }}>
      <div style={{
        width:56,height:56,borderRadius:12,flex:'0 0 auto',
        background: window.photoBG ? window.photoBG(b.sitterId || b.sitterPhoto) : '#fff',
      }}/>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:11,color:'#9c8a72'}}>前回：{b.date}</div>
        <div style={{fontWeight:700}}>{b.sitter}さん</div>
        <div style={{fontSize:11,color:'#7a6a55'}}>{b.service} ・ ¥{b.total.toLocaleString()}</div>
      </div>
      <button style={{
        background:'var(--c-primary-deep)',color:'#fff',border:'none',
        padding:'8px 12px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:12,
        whiteSpace:'nowrap',
      }}>同条件で予約</button>
    </div>
  );
}

const Field = ({label, hint, children, half}) => (
  <div style={{flex: half ? '1 1 calc(50% - 8px)' : '1 1 100%', minWidth: half ? 'calc(50% - 8px)' : 0}}>
    <div style={{fontSize:13,fontWeight:600,marginBottom:6,color:'#3c2f1e'}}>{label}</div>
    {children}
    {hint && <div style={{fontSize:11,color:'#9c8a72',marginTop:6}}>{hint}</div>}
  </div>
);
const inputCss = {
  width:'100%',padding:'12px 14px',borderRadius:12,
  border:'1.5px solid rgba(0,0,0,.08)',background:'#fff',
  fontSize:14,fontFamily:'inherit',color:'#2E2418',outline:'none',
};

window.MyBookings = MyBookings;
