import React from "react";
import { Box, Text } from "ink";
import type { Project } from "../types/index.ts";

interface ProjectItemProps {
  project: Project;
  isSelected: boolean;
  isCursor: boolean;
}

/**
 * Get status icon for a project
 */
function getStatusIcon(project: Project): { icon: string; color: string } {
  if (project.type === "non-git") {
    return { icon: "-", color: "gray" };
  }

  if (project.type === "git-submodule") {
    return { icon: "○", color: "magenta" };
  }

  if (!project.status) {
    return { icon: "?", color: "gray" };
  }

  if (project.status.isDirty) {
    return { icon: "●", color: "yellow" };
  }

  return { icon: "✓", color: "green" };
}

/**
 * Format sync status badges
 */
function getSyncBadges(project: Project): React.ReactNode[] {
  const badges: React.ReactNode[] = [];

  if (!project.status) return badges;

  if (project.status.isAhead && project.status.unpushedCommits > 0) {
    badges.push(
      <Text key="ahead" color="blue">
        ↑{project.status.unpushedCommits}
      </Text>
    );
  }

  if (project.status.isBehind && project.status.unpulledCommits > 0) {
    badges.push(
      <Text key="behind" color="magenta">
        ↓{project.status.unpulledCommits}
      </Text>
    );
  }

  if (!project.status.hasRemote && project.type === "git") {
    badges.push(
      <Text key="noremote" color="gray">
        no-remote
      </Text>
    );
  }

  return badges;
}

/**
 * Format the last activity date
 */
function formatLastActivity(date: Date | null | undefined): string {
  if (!date) return "";

  const now = new Date();
  const diff = now.getTime() - date.getTime();
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (days === 0) return "today";
  if (days === 1) return "yesterday";
  if (days < 7) return `${days}d ago`;
  if (days < 30) return `${Math.floor(days / 7)}w ago`;
  if (days < 365) return `${Math.floor(days / 30)}mo ago`;
  return `${Math.floor(days / 365)}y ago`;
}

export function ProjectItem({ project, isSelected, isCursor }: ProjectItemProps) {
  const { icon, color } = getStatusIcon(project);
  const syncBadges = getSyncBadges(project);
  const lastActivity = formatLastActivity(project.status?.lastLocalCommit);

  const bgColor = isCursor ? "blue" : undefined;
  const textColor = isCursor ? "white" : undefined;

  return (
    <Box>
      {/* Cursor indicator */}
      <Box width={2}>
        <Text color={textColor} backgroundColor={bgColor}>{isCursor ? ">" : " "}</Text>
      </Box>

      {/* Selection checkbox */}
      <Box width={4}>
        <Text color={isSelected ? "green" : textColor} backgroundColor={bgColor}>
          {isSelected ? "[x]" : "[ ]"}
        </Text>
      </Box>

      {/* Status icon */}
      <Box width={3}>
        <Text color={isCursor ? textColor : color} backgroundColor={bgColor}>{icon}</Text>
      </Box>

      {/* Project name */}
      <Box flexGrow={1}>
        <Text color={textColor} backgroundColor={bgColor} bold={isCursor}>
          {project.name}
        </Text>
        {project.status?.currentBranch && (
          <Text color={isCursor ? textColor : "cyan"} backgroundColor={bgColor}> ⎇ {project.status.currentBranch}</Text>
        )}
        {project.type === "git-submodule" && (
          <Text color={isCursor ? textColor : "gray"} backgroundColor={bgColor}> (sub)</Text>
        )}
        {project.projectMarker && project.type === "non-git" && (
          <Text color={isCursor ? textColor : "gray"} backgroundColor={bgColor}> [{project.projectMarker}]</Text>
        )}
      </Box>

      {/* Sync badges */}
      <Box width={12} gap={1}>
        {syncBadges.map((badge, i) => (
          <Text key={i} backgroundColor={bgColor}>{badge}</Text>
        ))}
      </Box>

      {/* Last activity */}
      <Box width={12} justifyContent="flex-end">
        <Text color={isCursor ? textColor : "gray"} backgroundColor={bgColor}>{lastActivity}</Text>
      </Box>
    </Box>
  );
}