"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useI18n } from "@/lib/i18n";
import {
  clearRecentDestinations,
  loadRecentDestinations,
  type RecentDestination,
} from "@/lib/recentDestinations";
import { meetupCityHref } from "@/lib/meetupLinks";

interface Props {
  compact?: boolean;
}

export default function RecentlyViewed({ compact = false }: Props) {
  const { t } = useI18n();
  const [items, setItems] = useState<RecentDestination[]>([]);

  useEffect(() => {
    setItems(loadRecentDestinations());
  }, []);

  if (items.length === 0) return null;

  return (
    <section className={`recently-viewed${compact ? " compact" : ""}`} aria-label={t.recent.title}>
      <div className={compact ? undefined : "container"}>
        <div className="recently-viewed-head">
          <div>
            <span className="section-tag">{t.recent.tag}</span>
            <h2>{t.recent.title}</h2>
            {!compact && <p className="section-desc">{t.recent.subtitle}</p>}
          </div>
          <div className="recently-viewed-actions">
            {!compact && (
              <Link href="/compare" className="btn btn-ghost btn-sm">
                {t.nav.compare}
              </Link>
            )}
            <button
              type="button"
              className="btn btn-ghost btn-sm"
              onClick={() => {
                clearRecentDestinations();
                setItems([]);
              }}
            >
              {t.common.clear}
            </button>
          </div>
        </div>
        <div className="recently-viewed-grid">
          {items.map((d) => (
            <Link key={d.slug} href={`/destinations/${d.slug}`} className="recently-viewed-card">
              <span className="recently-viewed-emoji" aria-hidden>
                {d.emoji}
              </span>
              <div>
                <strong>
                  {d.name}
                  <span className="recently-viewed-country">, {d.country}</span>
                </strong>
                <p>
                  ¥{d.cost.toLocaleString()}/mo · ⭐ {d.rating}
                </p>
              </div>
            </Link>
          ))}
        </div>
        {items.length >= 2 && (
          <div className="recently-viewed-compare">
            <Link
              href={`/compare?cities=${items
                .slice(0, 4)
                .map((d) => d.slug)
                .join(",")}`}
              className="btn btn-primary btn-sm"
            >
              {t.recent.compareRecent}
            </Link>
            <Link href={meetupCityHref(items[0].name)} className="btn btn-sm">
              {t.common.cityMeetups}
            </Link>
            <Link href="/plan" className="btn btn-ghost btn-sm">
              {t.strip.openPlan}
            </Link>
          </div>
        )}
      </div>
    </section>
  );
}