import { useState } from "react";
import CalendarPostTile from "./CalendarPostTile";
import type { CalendarDay, EnrichedCalendarPost } from "../../hooks/useCalendarPosts";
import clsx from "clsx";

const MAX_VISIBLE = 3;

interface Props {
  day: CalendarDay;
  onPostClick: (post: EnrichedCalendarPost) => void;
  onCreatePost?: (date?: string) => void;
}

export default function CalendarDayCell({ day, onPostClick, onCreatePost }: Props) {
  const [expanded, setExpanded] = useState(false);
  const visiblePosts = expanded ? day.posts : day.posts.slice(0, MAX_VISIBLE);
  const hiddenCount = day.posts.length - MAX_VISIBLE;

  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const isPast = day.date < today && !day.isToday;
  const canCreate = day.isCurrentMonth && !isPast && !!onCreatePost;

  return (
    <div
      className={clsx(
        "viraly-cal-day vr-min-h-[110px] vr-p-1 vr-border-b vr-border-r vr-border-gray-100 vr-transition-colors vr-relative",
        !day.isCurrentMonth && "vr-bg-gray-50/60",
        day.isToday && "vr-bg-primary-50/30"
      )}
    >
      {/* + icon — absolutely positioned top-right, visible on cell hover via CSS */}
      {canCreate && (
        <button
          onClick={() => onCreatePost?.(day.dateKey)}
          className="viraly-cal-add"
          title={`Create post for ${day.date.toLocaleDateString()}`}
          style={{
            position: "absolute",
            top: "4px",
            right: "4px",
            width: "20px",
            height: "20px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            border: "none",
            background: "none",
            padding: 0,
            cursor: "pointer",
            color: "#E03058",
            borderRadius: "50%",
            zIndex: 10,
          }}
          onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = "#fef5f8"; }}
          onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = "transparent"; }}
        >
          <i className="fa-solid fa-circle-plus" style={{ fontSize: "16px" }} />
        </button>
      )}

      {/* Day number — top left */}
      <div className="vr-flex vr-justify-start vr-mb-0.5 vr-px-0.5">
        <span
          className={clsx(
            "vr-text-xs vr-font-medium vr-w-6 vr-h-6 vr-flex vr-items-center vr-justify-center vr-rounded-full",
            day.isToday && "vr-bg-primary-600 vr-text-white",
            !day.isToday && day.isCurrentMonth && "vr-text-gray-700",
            !day.isToday && !day.isCurrentMonth && "vr-text-gray-300"
          )}
        >
          {day.date.getDate()}
        </span>
      </div>

      {/* Post tiles */}
      <div className="vr-space-y-0.5">
        {visiblePosts.map((post) => (
          <CalendarPostTile
            key={post.id}
            post={post}
            onClick={() => onPostClick(post)}
          />
        ))}

        {!expanded && hiddenCount > 0 && (
          <button
            onClick={() => setExpanded(true)}
            className="vr-w-full vr-text-xs vr-text-primary-600 vr-font-medium vr-py-0.5 vr-border-0 vr-bg-transparent vr-cursor-pointer hover:vr-underline"
          >
            +{hiddenCount} more
          </button>
        )}

        {expanded && hiddenCount > 0 && (
          <button
            onClick={() => setExpanded(false)}
            className="vr-w-full vr-text-xs vr-text-gray-400 vr-font-medium vr-py-0.5 vr-border-0 vr-bg-transparent vr-cursor-pointer hover:vr-underline"
          >
            Show less
          </button>
        )}
      </div>
    </div>
  );
}