import { useState } from "react";

import { mergeBranches } from "../api/git_repositories";

interface MergeDialogProps {
  projectId: string;
  repoId: string;
  branches: string[];
  currentBranch: string;
  isOpen: boolean;
  onClose: () => void;
  onMerge: () => void;
}

export const MergeDialog = ({
  projectId,
  repoId,
  branches,
  currentBranch,
  isOpen,
  onClose,
  onMerge,
}: MergeDialogProps) => {
  const [sourceBranch, setSourceBranch] = useState("");
  const [commitMessage, setCommitMessage] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  if (!isOpen) return null;

  const availableBranches = branches.filter((b) => b !== currentBranch);

  const handleMerge = async () => {
    if (!sourceBranch) {
      setError("Please select a source branch");
      return;
    }
    setLoading(true);
    setError(null);
    setSuccess(false);
    try {
      await mergeBranches(
        projectId,
        repoId,
        sourceBranch,
        currentBranch,
        commitMessage || undefined
      );
      setSuccess(true);
      setTimeout(() => {
        onMerge();
        onClose();
      }, 1500);
    } catch {
      setError("Merge failed. There may be conflicts to resolve.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Merge Branch</h2>
        
        <div className="merge-form">
          <div className="form-field">
            <label>Source Branch (merge from)</label>
            <select
              value={sourceBranch}
              onChange={(e) => setSourceBranch(e.target.value)}
              disabled={loading}
            >
              <option value="">Select branch...</option>
              {availableBranches.map((branch) => (
                <option key={branch} value={branch}>
                  {branch}
                </option>
              ))}
            </select>
          </div>

          <div className="form-field">
            <label>Target Branch (merge into)</label>
            <input
              type="text"
              value={currentBranch}
              disabled
              className="input-disabled"
            />
          </div>

          <div className="form-field">
            <label>Commit Message (optional)</label>
            <textarea
              value={commitMessage}
              onChange={(e) => setCommitMessage(e.target.value)}
              placeholder={`Merge ${sourceBranch || "branch"} into ${currentBranch}`}
              rows={3}
              disabled={loading}
            />
          </div>

          {error && <div className="error-text">{error}</div>}
          {success && (
            <div className="success-text">Merge successful!</div>
          )}

          <div className="modal-actions">
            <button
              className="secondary-button"
              onClick={onClose}
              disabled={loading}
              type="button"
            >
              Cancel
            </button>
            <button
              className="primary-button"
              onClick={handleMerge}
              disabled={loading || !sourceBranch}
              type="button"
            >
              {loading ? "Merging..." : "Merge"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};