"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import { Task, updateTask } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import { useTranslation } from "@/lib/i18n";
import Link from "next/link";
import { useSwipeable } from "react-swipeable";

interface TaskCardProps {
  task: Task;
  onComplete?: (taskId: string) => void;
  onAssign?: (taskId: string) => void;
  onUpdate?: () => void;
}

const STATUS_CYCLE: Task["status"][] = ["pending", "in_progress", "done"];

function statusColor(status: string): string {
  switch (status) {
    case "todo":
    case "pending":     return "#F59E0B"; // yellow
    case "in_progress": return "#3B82F6"; // blue
    case "done":        return "#22C55E"; // green
    case "cancelled":   return "#6B7280"; // gray
    default:            return "#F59E0B";
  }
}

function userColor(userId: string): string {
  const colors = [
    "#3B82F6", "#8B5CF6", "#EC4899", "#F59E0B",
    "#10B981", "#06B6D4", "#F97316", "#6366F1",
  ];
  let hash = 0;
  for (let i = 0; i < userId.length; i++) {
    hash = ((hash << 5) - hash) + userId.charCodeAt(i);
    hash |= 0;
  }
  return colors[Math.abs(hash) % colors.length];
}

function isDueSoon(dateStr: string): boolean {
  const due = new Date(dateStr).getTime();
  const now = Date.now();
  return due - now <= 7 * 24 * 60 * 60 * 1000;
}

function isPast(dateStr: string): boolean {
  return new Date(dateStr).getTime() < Date.now();
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
}

export default function TaskCard({ task, onComplete, onAssign, onUpdate }: TaskCardProps) {
  const { t } = useTranslation();
  const { token } = useAuth();
  const taskDone = task.status === "done";
  const [swipeOffset, setSwipeOffset] = useState(0);
  const [swiped, setSwiped] = useState(false);
  const cardRef = useRef<HTMLDivElement>(null);

  // Inline editing state
  const [editing, setEditing] = useState(false);
  const [editTitle, setEditTitle] = useState(task.title);
  const [saving, setSaving] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  // Status cycling state
  const [currentStatus, setCurrentStatus] = useState(task.status);

  // Sync with prop changes
  useEffect(() => {
    setEditTitle(task.title);
    setCurrentStatus(task.status);
  }, [task.title, task.status]);

  // Focus input when entering edit mode
  useEffect(() => {
    if (editing && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.setSelectionRange(0, inputRef.current.value.length);
    }
  }, [editing]);

  const SWIPE_THRESHOLD = 120;
  const assignees = task.assigned_to || [];
  const visibleAssignees = assignees.slice(0, 3);
  const groupColor = task.group_color;
  const sColor = statusColor(currentStatus);

  const swipeHandlers = useSwipeable({
    onSwiping: (e) => {
      if (e.dir === "Right" && !taskDone && onComplete) {
        setSwipeOffset(Math.min(e.deltaX, 160));
      }
    },
    onSwipedRight: (e) => {
      if (e.absX > SWIPE_THRESHOLD && !taskDone && onComplete) {
        setSwiped(true);
        setTimeout(() => { onComplete(task.id); }, 300);
      } else {
        setSwipeOffset(0);
      }
    },
    onSwiped: () => {
      if (!swiped) setSwipeOffset(0);
    },
    trackMouse: false,
    trackTouch: true,
    preventScrollOnSwipe: false,
    delta: 10,
  });

  const showCompleteHint = swipeOffset > 40;

  // Save title edit
  const saveTitle = useCallback(async () => {
    const trimmed = editTitle.trim();
    if (!trimmed || trimmed === task.title || !token) {
      setEditTitle(task.title);
      setEditing(false);
      return;
    }
    setSaving(true);
    try {
      await updateTask(token, task.id, { title: trimmed });
      setEditing(false);
      if (onUpdate) onUpdate();
    } catch (err) {
      console.error("Failed to update title:", err);
      setEditTitle(task.title);
      setEditing(false);
    } finally {
      setSaving(false);
    }
  }, [editTitle, task.title, task.id, token, onUpdate]);

  // Cycle status on dot click
  const cycleStatus = useCallback(async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (!token) return;

    const idx = STATUS_CYCLE.indexOf(currentStatus);
    const nextStatus = STATUS_CYCLE[(idx + 1) % STATUS_CYCLE.length];

    // Optimistic update
    setCurrentStatus(nextStatus);
    try {
      await updateTask(token, task.id, { status: nextStatus });
      if (onUpdate) onUpdate();
    } catch (err) {
      console.error("Failed to cycle status:", err);
      setCurrentStatus(task.status); // revert
    }
  }, [token, task.id, task.status, currentStatus, onUpdate]);

  // Handle title click -> enter edit mode
  const handleTitleClick = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setEditing(true);
  }, []);

  // Handle keyboard in edit input
  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault();
      saveTitle();
    }
    if (e.key === "Escape") {
      setEditTitle(task.title);
      setEditing(false);
    }
  }, [saveTitle, task.title]);

  return (
    <div className="relative overflow-hidden" ref={cardRef} style={{ margin: "0 0 5px" }}>
      {/* Swipe background */}
      {onComplete && !taskDone && (
        <div
          className={`absolute inset-0 flex items-center pl-4 rounded-xl transition-colors ${
            swipeOffset > SWIPE_THRESHOLD ? "bg-green-500" : "bg-green-400/80"
          }`}
        >
          <div
            className={`flex items-center gap-1.5 text-white font-medium transition-opacity ${
              showCompleteHint ? "opacity-100" : "opacity-0"
            }`}
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
            <span className="text-xs">{t("tasks.status.done")}</span>
          </div>
        </div>
      )}

      <div
        {...swipeHandlers}
        style={{
          transform: `translateX(${swipeOffset}px)`,
          transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
        }}
      >
        {/* When editing, don't wrap in Link - just show the card with input */}
        {editing ? (
          <div
            style={{
              padding: "10px 14px",
              borderRadius: 10,
              background: "#13131A",
              border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
              borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
              display: "flex",
              alignItems: "center",
              gap: 10,
            }}
          >
            {/* LEFT: editable input */}
            <div style={{ flex: 1, minWidth: 0 }}>
              <input
                ref={inputRef}
                type="text"
                value={editTitle}
                onChange={(e) => setEditTitle(e.target.value)}
                onBlur={saveTitle}
                onKeyDown={handleKeyDown}
                disabled={saving}
                style={{
                  width: "100%",
                  fontSize: 14,
                  fontWeight: 500,
                  color: "#E8E8F0",
                  background: "#1A1A28",
                  border: "1px solid #3B82F6",
                  borderRadius: 6,
                  padding: "4px 8px",
                  outline: "none",
                  boxShadow: "0 0 0 2px rgba(59,130,246,0.3)",
                  opacity: saving ? 0.6 : 1,
                }}
              />
            </div>

            {/* RIGHT: avatars + status dot (still interactive) */}
            <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
              <div style={{ display: "flex", alignItems: "center" }}>
                {visibleAssignees.map((userId, i) => (
                  <div
                    key={userId}
                    title={userId}
                    style={{
                      width: 26, height: 26,
                      borderRadius: "50%",
                      marginLeft: i > 0 ? -8 : 0,
                      border: "2px solid #13131A",
                      background: userColor(userId),
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontSize: 10, fontWeight: 700, color: "white",
                      zIndex: 3 - i,
                      position: "relative",
                      flexShrink: 0,
                    }}
                  >
                    {userId.slice(0, 2).toUpperCase()}
                  </div>
                ))}
                <div
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    if (onAssign) onAssign(task.id);
                  }}
                  title="Pridat uzivatele"
                  style={{
                    width: 26, height: 26,
                    borderRadius: "50%",
                    marginLeft: visibleAssignees.length > 0 ? -8 : 0,
                    border: "2px dashed #3A3A5A",
                    background: "transparent",
                    cursor: "pointer",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 14, color: "#4A4A6A",
                    position: "relative", zIndex: 0,
                    flexShrink: 0,
                  }}
                >
                  +
                </div>
              </div>

              {/* Status dot - clickable to cycle */}
              <div
                onClick={cycleStatus}
                title={t(`tasks.status.${currentStatus}`) + " (click to change)"}
                style={{
                  width: 14, height: 14,
                  borderRadius: "50%",
                  background: sColor,
                  flexShrink: 0,
                  boxShadow: `0 0 6px ${sColor}80`,
                  cursor: "pointer",
                  transition: "transform 0.15s ease, box-shadow 0.15s ease",
                }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLElement).style.transform = "scale(1.3)";
                  (e.currentTarget as HTMLElement).style.boxShadow = `0 0 10px ${sColor}`;
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLElement).style.transform = "scale(1)";
                  (e.currentTarget as HTMLElement).style.boxShadow = `0 0 6px ${sColor}80`;
                }}
              />
            </div>
          </div>
        ) : (
          /* Normal mode: Link wrapping for navigation on non-interactive areas */
          <Link href={`/tasks/${task.id}`} className="block">
            <div
              style={{
                padding: "10px 14px",
                borderRadius: 10,
                background: "#13131A",
                border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
                borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                gap: 10,
                opacity: swiped ? 0 : 1,
                transition: swiped ? "opacity 0.3s" : undefined,
              }}
            >
              {/* LEFT: title (clickable for inline edit) + optional due date */}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div
                  onClick={handleTitleClick}
                  style={{
                    fontSize: 14,
                    fontWeight: 500,
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    color: "#E8E8F0",
                    textDecoration: taskDone ? "line-through" : "none",
                    opacity: taskDone ? 0.5 : 1,
                    borderRadius: 4,
                    padding: "1px 4px",
                    margin: "-1px -4px",
                    transition: "background 0.15s ease",
                    cursor: "text",
                  }}
                  onMouseEnter={(e) => {
                    (e.currentTarget as HTMLElement).style.background = "rgba(59,130,246,0.1)";
                  }}
                  onMouseLeave={(e) => {
                    (e.currentTarget as HTMLElement).style.background = "transparent";
                  }}
                  title="Click to edit title"
                >
                  {task.title}
                </div>
                {task.due_at && isDueSoon(task.due_at) && (
                  <div style={{
                    fontSize: 11,
                    color: isPast(task.due_at) ? "#EF4444" : "#F59E0B",
                    marginTop: 2,
                  }}>
                    {formatDate(task.due_at)}
                  </div>
                )}
              </div>

              {/* RIGHT: avatars + big status dot */}
              <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
                {/* Avatars */}
                <div style={{ display: "flex", alignItems: "center" }}>
                  {visibleAssignees.map((userId, i) => (
                    <div
                      key={userId}
                      title={userId}
                      style={{
                        width: 26, height: 26,
                        borderRadius: "50%",
                        marginLeft: i > 0 ? -8 : 0,
                        border: "2px solid #13131A",
                        background: userColor(userId),
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 10, fontWeight: 700, color: "white",
                        zIndex: 3 - i,
                        position: "relative",
                        flexShrink: 0,
                      }}
                    >
                      {userId.slice(0, 2).toUpperCase()}
                    </div>
                  ))}

                  {/* + add user button */}
                  <div
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      if (onAssign) onAssign(task.id);
                    }}
                    title="Pridat uzivatele"
                    style={{
                      width: 26, height: 26,
                      borderRadius: "50%",
                      marginLeft: visibleAssignees.length > 0 ? -8 : 0,
                      border: "2px dashed #3A3A5A",
                      background: "transparent",
                      cursor: "pointer",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontSize: 14, color: "#4A4A6A",
                      position: "relative", zIndex: 0,
                      flexShrink: 0,
                    }}
                  >
                    +
                  </div>
                </div>

                {/* Big colored status dot - clickable to cycle */}
                <div
                  onClick={cycleStatus}
                  title={t(`tasks.status.${currentStatus}`) + " (click to change)"}
                  style={{
                    width: 14, height: 14,
                    borderRadius: "50%",
                    background: sColor,
                    flexShrink: 0,
                    boxShadow: `0 0 6px ${sColor}80`,
                    cursor: "pointer",
                    transition: "transform 0.15s ease, box-shadow 0.15s ease",
                  }}
                  onMouseEnter={(e) => {
                    (e.currentTarget as HTMLElement).style.transform = "scale(1.3)";
                    (e.currentTarget as HTMLElement).style.boxShadow = `0 0 10px ${sColor}`;
                  }}
                  onMouseLeave={(e) => {
                    (e.currentTarget as HTMLElement).style.transform = "scale(1)";
                    (e.currentTarget as HTMLElement).style.boxShadow = `0 0 6px ${sColor}80`;
                  }}
                />
              </div>
            </div>
          </Link>
        )}
      </div>
    </div>
  );
}