const { Button, IconButton, Icon, Badge, Tag, Rating, MetadataRow, PriceDisplay, PhotoFrame, Modal, TextInput, Textarea, Alert, Tabs, Breadcrumbs } = window.VE;

function PackageDetailScreen({ pkg, onPlanTrip, onToast }) {
  const D = window.VE_DATA;
  const p = pkg || D.packages[0];
  const [enquiry, setEnquiry] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const photos = [p.photo, 'coast', 'food', 'market', 'horizon'];
  const hotels = [
    { name: 'The Quiet House', place: 'Seminyak · 2 nights', photo: 'cafe', note: 'Garden rooms, breakfast until eleven.' },
    { name: 'Valley Lodge', place: 'Ubud · 2 nights', photo: 'cliffs', note: 'Open-sided rooms above the river.' },
    { name: 'Sandbar Villas', place: 'Nusa Dua · 1 night', photo: 'ocean', note: 'A last morning on the water.' }
  ];
  return (
    <main>
      <div className="ve-container" style={{ paddingTop: 'var(--space-lg)', display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
        <Breadcrumbs items={[{ label: 'Home', href: '#' }, { label: 'Packages', href: '#' }, { label: p.title }]} />
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,2fr) minmax(0,1fr)', gap: 8, height: 420 }}>
          <div style={{ borderRadius: 'var(--radius-lg) 0 0 var(--radius-lg)', overflow: 'hidden' }}>
            <img src={vePhoto(photos[0], 1400, 1000)} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 8 }}>
            <div style={{ borderRadius: '0 var(--radius-lg) 0 0', overflow: 'hidden' }}>
              <img src={vePhoto(photos[1], 700, 500)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ borderRadius: '0 0 var(--radius-lg) 0', overflow: 'hidden', position: 'relative' }}>
              <img src={vePhoto(photos[2], 700, 500)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <button type="button" className="ve-btn ve-btn--inverse ve-btn--sm" style={{ position: 'absolute', right: 12, bottom: 12, boxShadow: 'var(--elevation-card)' }}>
                <Icon name="Camera" size={15} />All photos
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="ve-container" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.6fr) minmax(0,1fr)', gap: 'var(--space-3xl)', paddingBlock: 'var(--space-xl) var(--space-section)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2xl)' }}>
          <header style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
              <Badge tone="brand">{p.nights} nights</Badge>
              <Rating value={p.rating} count={p.reviews} />
            </div>
            <h1 className="ve-display-md">{p.title}</h1>
            <MetadataRow items={[p.destination, p.nights + ' nights / ' + p.days + ' days', 'Private transfers']} />
            <p className="ve-body-lg" style={{ color: 'var(--color-body)', maxWidth: '60ch' }}>
              A week paced for two: two nights by the water, two in the hills, and a last morning with nothing planned. Every stay is one we have slept in.
            </p>
          </header>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <h2 className="ve-heading-lg">What is included</h2>
            <ul className="ve-inclusions" style={{ gridTemplateColumns: 'repeat(2,minmax(0,1fr))', gap: '12px 24px' }}>
              {p.inclusions.concat(['Daily breakfast', 'Airport pickup', 'Local specialist on call', 'All entry tickets']).map((i) => (
                <li className="ve-inclusion" key={i}><Icon name="Check" size={16} strokeWidth={2} />{i}</li>
              ))}
            </ul>
            <p className="ve-caption">Flights are quoted separately so you can use miles or a preferred airline.</p>
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
            <h2 className="ve-heading-lg">Day by day</h2>
            <ol style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column' }}>
              {D.itinerary.slice(0, p.days).map((day, i) => (
                <li key={day.day} style={{ display: 'grid', gridTemplateColumns: '132px minmax(0,1fr)', gap: 'var(--space-lg)', padding: 'var(--space-lg) 0', borderTop: i === 0 ? 'none' : '1px solid var(--color-hairline-soft)' }}>
                  <PhotoFrame src={vePhoto(day.photo, 400, 300)} alt={day.title} ratio="4/3" />
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <span className="ve-eyebrow">{day.day}</span>
                    <span className="ve-heading-sm">{day.title}</span>
                    <span className="ve-body-sm" style={{ color: 'var(--color-muted)' }}>{day.body}</span>
                  </div>
                </li>
              ))}
            </ol>
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <h2 className="ve-heading-lg">Where you stay</h2>
            <div className="ve-grid ve-grid--3">
              {hotels.map((h) => (
                <div key={h.name} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
                  <PhotoFrame src={vePhoto(h.photo, 600, 450)} alt={h.name} ratio="4/3" />
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span className="ve-heading-sm">{h.name}</span>
                    <span className="ve-caption">{h.place}</span>
                    <span className="ve-body-sm" style={{ color: 'var(--color-muted)' }}>{h.note}</span>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <h2 className="ve-heading-lg">Activities you can add</h2>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-sm)' }}>
              {['Sunrise trek', 'Cooking class', 'Private boat day', 'Spa afternoon', 'Photography walk', 'Diving course'].map((a) => <Tag key={a}>{a}</Tag>)}
            </div>
          </section>

          <section id="enquiry" style={{ background: 'var(--color-surface-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-xl)', display: 'flex', flexDirection: 'column', gap: 'var(--space-base)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <h2 className="ve-heading-lg">Enquire about this package</h2>
              <p className="ve-body-sm" style={{ color: 'var(--color-muted)' }}>We will reply with dates, room options and a full quote.</p>
            </div>
            {sent ? <Alert tone="success" title="Enquiry sent">A specialist will reply from veloriaescape@gmail.com within a few hours.</Alert> : null}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-base)' }}>
              <TextInput label="Full name" placeholder="Ananya Sharma" />
              <TextInput label="Phone" type="tel" icon="Phone" placeholder="+91" />
              <TextInput label="Email" type="email" icon="Mail" placeholder="you@email.com" />
              <TextInput label="Rough travel dates" placeholder="Second week of November" />
            </div>
            <Textarea label="Anything we should know?" rows={3} placeholder="Anniversary trip, we love long breakfasts and short drives." />
            <div style={{ display: 'flex', gap: 'var(--space-md)', alignItems: 'center' }}>
              <Button variant="primary" onClick={() => { setSent(true); if (onToast) onToast('Enquiry sent to Veloria Escape'); }}>Send enquiry</Button>
              <Button variant="secondary" leadingIcon="Phone" href="tel:+919717972359">Call instead</Button>
            </div>
          </section>
        </div>

        <aside style={{ position: 'sticky', top: 'calc(var(--nav-height) + 24px)', alignSelf: 'start', border: '1px solid var(--color-hairline)', borderRadius: 'var(--radius-card)', padding: 'var(--space-lg)', display: 'flex', flexDirection: 'column', gap: 'var(--space-base)', boxShadow: 'var(--elevation-card)' }}>
          <PriceDisplay amount={p.price} size="lg" unit="per person" />
          <MetadataRow separator="none" items={[{ icon: 'BedDouble', label: p.nights + ' nights, twin sharing' }, { icon: 'Plane', label: 'Flights quoted separately' }]} />
          <hr className="ve-divider" />
          <Button variant="primary" block size="lg" onClick={() => setEnquiry(true)}>Enquire now</Button>
          <Button variant="secondary" block onClick={onPlanTrip}>Customise this trip</Button>
          <p className="ve-caption">No payment until you approve the final itinerary.</p>
        </aside>
      </div>

      <Modal open={enquiry} onClose={() => setEnquiry(false)} title={'Enquire about ' + p.title}
        description="Tell us your dates and we will send an itinerary within 24 hours."
        footer={<><Button variant="secondary" onClick={() => setEnquiry(false)}>Cancel</Button>
          <Button variant="primary" onClick={() => { setEnquiry(false); setSent(true); if (onToast) onToast('Enquiry sent to Veloria Escape'); }}>Send enquiry</Button></>}>
        <TextInput label="Full name" placeholder="Ananya Sharma" />
        <TextInput label="Email" type="email" icon="Mail" placeholder="you@email.com" />
        <TextInput label="Rough travel dates" placeholder="Second week of November" />
      </Modal>
    </main>
  );
}
Object.assign(window, { PackageDetailScreen });