'use client';

import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import ProgressBar from '../common/ProgressBar';
import { theme } from '@/styles/theme';

interface ProjectCardProps {
  id: number;
  name: string;
  description: string | null;
  status: string;
  progress: number;
  doneTasks: number;
  totalTasks: number;
  openPRs: number;
  currentSprint: string | null;
}

const Card = styled(Link)`
  display: block;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-color: rgba(88,166,255,0.3);
  }
`;

const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 8px;
`;

const Name = styled.span`
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
`;

const Meta = styled.div`
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const Stats = styled.div`
  display: flex;
  gap: 16px;
  margin-top: 12px;
`;

const Stat = styled.div`
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
`;

const ProgressLabel = styled.div`
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
`;

const ProgressText = styled.span`
  font-size: 11px;
  color: var(--text-secondary);
`;

const PRBadge = styled.span<{ $count: number }>`
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: ${({ $count }) => $count > 0 ? 'rgba(88,166,255,0.12)' : 'rgba(139,148,158,0.08)'};
  color: ${({ $count }) => $count > 0 ? '#58A6FF' : 'var(--text-secondary)'};
  font-weight: 600;
`;

export default function ProjectCard({
  id, name, description, progress, doneTasks, totalTasks, openPRs, currentSprint,
}: ProjectCardProps) {
  return (
    <Card href={`/projects/${id}`}>
      <Header>
        <Name>{name}</Name>
        <PRBadge $count={openPRs}>PR {openPRs}</PRBadge>
      </Header>
      {description && <Meta>{description}</Meta>}
      {currentSprint && (
        <Meta>📌 {currentSprint}</Meta>
      )}
      <ProgressLabel>
        <ProgressText>진행률</ProgressText>
        <ProgressText>{progress}% ({doneTasks}/{totalTasks})</ProgressText>
      </ProgressLabel>
      <ProgressBar value={progress} size="sm" />
    </Card>
  );
}