import Link from "next/link";
import Icon from "@/components/ui/Icon";
import PlaceCard from "@/components/life/PlaceCard";
import { Gallery, InfoRow } from "@/components/life/Detail";
import type { Cover } from "@/lib/api/types";
import type { ExperienceDetail, GuideDetail } from "@/lib/api/guides";

const days = (n: number | null) => (n ? (n === 1 ? "1 day" : `${n} days`) : null);
const media = (c?: Cover | null) => (c ? [{ id: c.id, path: c.path, is_cover: true }] : []);

export function GuideDetailBody({ item }: { item: GuideDetail }) {
  return (
    <div className="lfd-split">
      <div className="lfd-media">
        <Gallery name={item.name} media={media(item.cover)} />
      </div>
      <div className="lfd-body">
        <section className="lfd-card" aria-label="Contact">
          <ul className="lfd-info">
            {item.city && <InfoRow icon="apartment">{item.city.name}</InfoRow>}
            {item.phone && (
              <InfoRow icon="call">
                <a href={`tel:${item.phone}`}>{item.phone}</a>
              </InfoRow>
            )}
          </ul>
        </section>
        {item.bio && <p className="lfd-lead">{item.bio}</p>}
        {item.experiences.length > 0 && (
          <section aria-labelledby="gd-xp">
            <h2 id="gd-xp" className="lfd-h2">
              Experiences with {item.name}
            </h2>
            <div className="lf-grid">
              {item.experiences.map((e, i) => (
                <PlaceCard
                  key={e.id}
                  index={i}
                  item={{ key: `x-${e.id}`, name: e.name, meta: days(e.days) ?? "", tags: [], src: e.cover?.url ?? null, href: `/explore/tour-guides/details/experience?id=${e.id}` }}
                />
              ))}
            </div>
          </section>
        )}
      </div>
    </div>
  );
}

export function ExperienceDetailBody({ item }: { item: ExperienceDetail }) {
  return (
    <div className="lfd-split">
      <div className="lfd-media">
        <Gallery name={item.name} media={media(item.cover)} />
      </div>
      <div className="lfd-body">
        <section className="lfd-card" aria-label="Experience details">
          <ul className="lfd-info">
            {days(item.days) && <InfoRow icon="schedule">{days(item.days)}</InfoRow>}
            {item.tour_guide && (
              <InfoRow icon="badge">
                <Link href={`/explore/tour-guides/details/guide?id=${item.tour_guide.id}`}>Guided by {item.tour_guide.name}</Link>
              </InfoRow>
            )}
          </ul>
        </section>
        {item.description && <p className="lfd-lead">{item.description}</p>}
        <Link className="lf-back" href="/explore/tour-guides">
          <Icon name="arrow_back" />
          All tour guides
        </Link>
      </div>
    </div>
  );
}