import { Link } from "react-router-dom";
import { usePomodoro } from "../hooks/usePomodoro";
import { formatTime } from "../utils/time";
import "./PomodoroWidget.css";

interface PomodoroWidgetProps {
  compact?: boolean;
}

export default function PomodoroWidget({ compact = false }: PomodoroWidgetProps) {
  const { status } = usePomodoro();

  if (!status) return null;

  const isActive = status.status === "running" || status.status === "paused";
  const displaySeconds = isActive ? status.remaining_seconds : status.duration_min * 60;
  const progress = isActive
    ? ((status.duration_min * 60 - status.remaining_seconds) / (status.duration_min * 60)) * 100
    : 0;

  return (
    <Link to="/pomodoro" className={`pomodoro-widget ${compact ? "compact" : ""}`}>
      <div
        className="pomodoro-widget-ring"
        style={{ background: `conic-gradient(#4f7cff ${progress}%, #1f2633 0)` }}
      >
        <div className="pomodoro-widget-inner">
          <span className="pomodoro-widget-time">{formatTime(displaySeconds)}</span>
          <span className="pomodoro-widget-label">
            {status.status === "idle" ? "помидоро" : status.status}
          </span>
        </div>
      </div>
      {!compact && status.task_note && (
        <p className="pomodoro-widget-task">{status.task_note}</p>
      )}
    </Link>
  );
}