import { HydratedStatus } from "../types.ts";

interface HomePageProps {
  currentUser: {
    isAuthenticated: boolean;
    handle?: string;
  };
  statuses: HydratedStatus[];
  userTimezone?: string;
}

const statusOptions = [
  "👍",
  "👎",
  "💙",
  "❤️",
  "😍",
  "🤩",
  "😎",
  "🤔",
  "😴",
  "🎉",
  "🔥",
  "💯",
  "✨",
  "⭐",
  "🌟",
  "🚀",
  "💪",
  "🙌",
  "👏",
  "🤝",
  "🤗",
  "😊",
  "😄",
  "😆",
  "😂",
  "🥳",
  "🤯",
  "😱",
  "😭",
  "💔",
  "🙏",
  "🤞",
  "👀",
  "🧠",
  "💡",
];

export function HomePage({ currentUser, statuses, userTimezone }: HomePageProps) {
  return (
    <div>
      <div class="card">
        <h2>How are you feeling?</h2>
        <div class="status-options">
          {statusOptions.map((emoji) => (
            <button
              type="button"
              key={emoji}
              class="status-option"
              title={`Set status to ${emoji}`}
              hx-post="/status"
              hx-vals={`{"status": "${emoji}"}`}
              hx-target="#status-timeline"
              hx-swap="outerHTML"
              hx-indicator="#loading"
            >
              {emoji}
            </button>
          ))}
        </div>
        <div id="loading" class="htmx-indicator">
          Setting status...
        </div>
      </div>

      <div class="card">
        <h3>Recent Statuses</h3>
        <StatusTimeline statuses={statuses} userTimezone={userTimezone} />
      </div>
    </div>
  );
}

interface StatusTimelineProps {
  statuses: HydratedStatus[];
  userTimezone?: string;
}

export function StatusTimeline({ statuses, userTimezone }: StatusTimelineProps) {
  return (
    <div id="status-timeline">
      {statuses.length === 0 ? (
        <div class="status-timeline">
          <p class="status-meta">No statuses yet. Be the first to share!</p>
        </div>
      ) : (
        <div class="status-timeline">
          {statuses.map((status) => {
            const authorHandle = status.author?.handle || 
                               status.did?.split(":").pop() || 
                               "unknown";
            const createdAtDate = new Date(status.value.createdAt);
            const formatOptions: Intl.DateTimeFormatOptions = {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
              hour: 'numeric',
              minute: '2-digit',
              hour12: true
            };
            // Use user's timezone if available, otherwise let browser decide
            if (userTimezone) {
              formatOptions.timeZone = userTimezone;
            }
            const createdAt = new Intl.DateTimeFormat('en-US', formatOptions).format(createdAtDate);

            return (
              <div key={status.uri} class="status-item">
                <div class="status-emoji">{status.value.status}</div>
                <div>
                  <div class="status-meta">
                    @{authorHandle} • {createdAt}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}