---
import BaseLayout from '../../layouts/BaseLayout.astro';
import ReviewCard from '../../components/ui/ReviewCard.astro';
import Icon from '../../components/ui/Icon.astro';
import VenueReviewForm from '../../components/islands/VenueReviewForm';
import { localizedPath, getDict } from '../../lib/i18n';
import type { Locale } from '../../lib/i18n';
import { getVenueReviews } from '../../lib/db';
import { VENUE } from '../../lib/venue';

const { lang } = Astro.params;
const locale = (lang ?? 'ua') as Locale;
const dict = getDict(locale);
const supabase = Astro.locals.supabase;
const user = Astro.locals.user;

const reviews = await getVenueReviews(supabase);
const canDelete = (reviewUserId: string) => user !== null && (user.isAdmin || reviewUserId === user.id);
---

<BaseLayout
  locale={locale}
  dict={dict}
  pagePath="/about"
  user={user}
  title={`${dict.about.pageTitle} — ${dict.meta.siteName}`}
  description={dict.about.pageDescription}
>
  <section class="section">
    <div class="container">
      <div class="split">
        <div>
          <span class="eyebrow">{dict.meta.siteName}</span>
          <h1>{dict.about.pageTitle}</h1>
          <h2>{dict.about.storyTitle}</h2>
          <p>{dict.about.story}</p>
          <h2>{dict.about.contactsTitle}</h2>
          <div class="contact-details">
            <div class="contact-detail">
              <span><Icon name="pin" size={18} /></span>
              <div>
                <div class="contact-detail__label">{dict.contacts.addressLabel}</div>
                {dict.about.venueAddress}
              </div>
            </div>
            <div class="contact-detail">
              <span><Icon name="mail" size={18} /></span>
              <div>
                <div class="contact-detail__label">{dict.contacts.emailLabel}</div>
                <a href={`mailto:${VENUE.email}`}>{VENUE.email}</a>
              </div>
            </div>
            <div class="contact-detail">
              <span><Icon name="clock" size={18} /></span>
              <div>
                <div class="contact-detail__label">{dict.contacts.hoursLabel}</div>
                {dict.contacts.hoursValue}
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="card" style="padding:24px;margin-bottom:24px;">
            <h3>{dict.about.writeVenueReview}</h3>
            {user ? (
              <VenueReviewForm client:load dict={dict} />
            ) : (
              <p>
                <a href={localizedPath(locale, `/login?redirect=${encodeURIComponent(`/${locale}/about`)}`)}>
                  {dict.event.signInToReview}
                </a>
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--alt">
    <div class="container">
      <div class="section-head">
        <div>
          <span class="eyebrow">{dict.about.venueReviewsTitle}</span>
          <h2>
            {dict.about.venueReviewsTitle}{' '}
            <span class="text-muted" style="font-family:var(--font-sans);font-size:1rem;">
              ({reviews.length})
            </span>
          </h2>
        </div>
      </div>

      {reviews.length > 0 ? (
        <div class="grid-2">
          {reviews.map((review) => (
            <ReviewCard
              review={review}
              locale={locale}
              dict={dict}
              deleteUrl={canDelete(review.user_id) ? `/api/venue-reviews/${review.id}` : undefined}
            />
          ))}
        </div>
      ) : (
        <div class="empty-state">
          <div class="empty-state__icon"><Icon name="chat" size={40} /></div>
          <p>{dict.about.noVenueReviews}</p>
        </div>
      )}
    </div>
  </section>
</BaseLayout>