"use client";

import type { Task } from "@/types/task";

export default function TaskCard({
  task,
  onArchive,
  onEdit,
  onStatusClick,
}: {
  task: Task;
  onArchive: (task: Task) => void;
  onEdit: (task: Task) => void;
  onStatusClick: (task: Task) => void;
}) {
  const cardStyle = {
    ...styles.card,
    ...(task.isOverdue ? styles.overdueCard : {}),
    ...(task.archivedAt ? styles.archivedCard : {}),
  };

  return (
    <div style={cardStyle}>
      <div style={styles.cardHeader}>
        <button
          type="button"
          style={{
            ...styles.circle,
            cursor:
              task.status === "Complete" || task.archivedAt ? "default" : "pointer",
          }}
          onClick={() => onStatusClick(task)}
          title="Change Status"
          disabled={task.status === "Complete" || Boolean(task.archivedAt)}
        >
          {task.status === "Complete" ? "✓" : ""}
        </button>

        <div style={styles.cardTitle}>{task.title}</div>
      </div>

      <div style={styles.cardDescription}>
        {task.description.slice(0, 60)}
        {task.description.length > 60 && "..."}
      </div>

      <div style={styles.metaRow}>
        <span>Due: {task.dueDate}</span>
        <span>{task.topic}</span>
      </div>

      <div style={styles.badgeRow}>
        <span style={styles.statusBadge}>{task.status}</span>
        {task.isOverdue && <span style={styles.overdueBadge}>Overdue</span>}
        {task.archivedAt && <span style={styles.archivedBadge}>Archived</span>}
      </div>

      <div style={styles.actions}>
        <button type="button" onClick={() => onEdit(task)} style={styles.actionButton}>
          Edit
        </button>
        <button
          type="button"
          onClick={() => onArchive(task)}
          style={styles.actionButton}
          disabled={Boolean(task.archivedAt)}
        >
          Archive
        </button>
      </div>
    </div>
  );
}

const styles = {
  card: {
    background: "#dae4f0",
    padding: "18px",
    borderRadius: "12px",
    marginBottom: "15px",
    color: "#0f172a",
    fontSize: "16px",
    border: "2px solid transparent",
  },
  overdueCard: {
    borderColor: "#dc2626",
    background: "#fee2e2",
  },
  archivedCard: {
    opacity: 0.72,
  },
  cardHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "6px",
    gap: "10px",
  },
  cardTitle: {
    fontWeight: "700",
    flex: 1,
  },
  cardDescription: {
    fontSize: "13px",
    opacity: 0.7,
    marginBottom: "8px",
  },
  metaRow: {
    display: "flex",
    justifyContent: "space-between",
    gap: "12px",
    fontSize: "12px",
    opacity: 0.72,
    marginBottom: "10px",
  },
  badgeRow: {
    display: "flex",
    flexWrap: "wrap" as const,
    gap: "6px",
    marginBottom: "12px",
  },
  statusBadge: {
    background: "#e0f2fe",
    color: "#075985",
    borderRadius: "999px",
    padding: "3px 8px",
    fontSize: "11px",
    fontWeight: "700",
  },
  overdueBadge: {
    background: "#dc2626",
    color: "white",
    borderRadius: "999px",
    padding: "3px 8px",
    fontSize: "11px",
    fontWeight: "700",
  },
  archivedBadge: {
    background: "#475569",
    color: "white",
    borderRadius: "999px",
    padding: "3px 8px",
    fontSize: "11px",
    fontWeight: "700",
  },
  circle: {
    width: "22px",
    height: "22px",
    border: "2px solid black",
    borderRadius: "50%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "14px",
    fontWeight: "bold",
    backgroundColor: "white",
    color: "#0f172a",
    padding: 0,
  },
  actions: {
    display: "flex",
    justifyContent: "flex-end",
    gap: "8px",
  },
  actionButton: {
    background: "#f8fafc",
    color: "#0f172a",
    border: "1px solid #cbd5e1",
    padding: "6px 10px",
    borderRadius: "8px",
    cursor: "pointer",
    fontWeight: "600",
  },
};