import "./DuplicateWarningModal.css";
import { useEffect, useRef } from "react";
import type { DuplicateMatch } from "../api";

interface DuplicateWarningModalProps {
  matches: DuplicateMatch[];
  onOpen: (id: string) => void;
  onProceed: () => void;
  onCancel: () => void;
}

function toStatusClass(column: string): string {
  return `card-status-badge--${column}`;
}

export function DuplicateWarningModal({ matches, onOpen, onProceed, onCancel }: DuplicateWarningModalProps) {
  const cancelButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    cancelButtonRef.current?.focus();
  }, []);

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        event.preventDefault();
        onCancel();
      }
    };
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [onCancel]);

  return (
    <div className="modal-overlay open" role="presentation">
      <div className="modal duplicate-warning-modal" role="dialog" aria-modal="true" aria-labelledby="duplicate-warning-modal-title">
        <div className="modal-header">
          <h3 id="duplicate-warning-modal-title">Possible duplicates</h3>
        </div>
        <div className="duplicate-warning-modal-body">
          <p className="duplicate-warning-modal-copy">We found similar active tasks. Open an existing task or create this one anyway.</p>
          <div className="duplicate-warning-modal-list">
            {matches.map((match) => (
              <article className="card duplicate-warning-modal-item" key={match.id}>
                <div className="duplicate-warning-modal-item-header">
                  <span className="card-id">{match.id}</span>
                  <span className={`card-status-badge ${toStatusClass(match.column)}`}>{match.column}</span>
                  <span className="duplicate-warning-modal-score">{Math.round(match.score * 100)}%</span>
                </div>
                <div className="card-title duplicate-warning-modal-title">{match.title || "Untitled task"}</div>
                <div className="duplicate-warning-modal-actions">
                  <button className="btn btn-sm" type="button" onClick={() => onOpen(match.id)}>Open</button>
                </div>
              </article>
            ))}
          </div>
        </div>
        <div className="modal-actions">
          <div className="modal-actions-left">
            <button className="btn" type="button" ref={cancelButtonRef} onClick={onCancel}>Cancel</button>
          </div>
          <div className="modal-actions-right">
            <button className="btn btn-primary" type="button" onClick={onProceed}>Create anyway</button>
          </div>
        </div>
      </div>
    </div>
  );
}