import { Component, createSignal, Show } from 'solid-js';
import type { RevisionData } from '../../lib/revisions/types';

export interface RevisionReviewProps {
  revision: RevisionData;
  onAccept: (revisionId: number) => void;
  onReject: (revisionId: number, reason?: string) => void;
  onCompareWithBase?: (revisionId: number) => void;
}

export const RevisionReview: Component<RevisionReviewProps> = (props) => {
  const [showRejectDialog, setShowRejectDialog] = createSignal(false);
  const [rejectReason, setRejectReason] = createSignal('');
  const [isProcessing, setIsProcessing] = createSignal(false);

  const handleAccept = () => {
    setIsProcessing(true);
    props.onAccept(props.revision.id);
    setIsProcessing(false);
  };

  const handleReject = () => {
    setIsProcessing(true);
    props.onReject(props.revision.id, rejectReason() || undefined);
    setShowRejectDialog(false);
    setRejectReason('');
    setIsProcessing(false);
  };

  const getStatusDisplay = () => {
    switch (props.revision.status) {
      case 'draft':
        return { label: 'Draft', color: '#6b7280' };
      case 'pending_review':
        return { label: 'Pending Review', color: '#f59e0b' };
      case 'accepted':
        return { label: 'Accepted', color: '#22c55e' };
      case 'rejected':
        return { label: 'Rejected', color: '#ef4444' };
    }
  };

  const canReview = props.revision.status === 'pending_review' || props.revision.status === 'draft';

  return (
    <div class="revision-review">
      <div class="review-header">
        <div class="revision-info">
          <h3>{props.revision.title}</h3>
          <div class="revision-meta">
            <span class="version">v{props.revision.versionNumber}</span>
            <span class="branch">{props.revision.branchName}</span>
            <span
              class="status"
              style={{
                color: getStatusDisplay().color,
                background: getStatusDisplay().color + '22',
              }}
            >
              {getStatusDisplay().label}
            </span>
          </div>
        </div>

        <Show when={props.revision.summary}>
          <div class="revision-summary">{props.revision.summary}</div>
        </Show>
      </div>

      <div class="review-actions">
        <Show when={canReview}>
          <button
            class="btn btn-accept"
            onClick={handleAccept}
            disabled={isProcessing()}
          >
            Accept Revision
          </button>

          <button
            class="btn btn-reject"
            onClick={() => setShowRejectDialog(true)}
            disabled={isProcessing()}
          >
            Reject Revision
          </button>
        </Show>

        <button
          class="btn btn-compare"
          onClick={() => props.onCompareWithBase?.(props.revision.id)}
        >
          Compare with Previous
        </button>
      </div>

      <Show when={props.revision.reviewedById}>
        <div class="review-info">
          <p>Reviewed by User #{props.revision.reviewedById}</p>
          <Show when={props.revision.reviewedAt}>
            {(reviewedAt) => (
              <p class="review-date">
                {new Date(reviewedAt()).toLocaleString()}
              </p>
            )}
          </Show>
        </div>
      </Show>

      <Show when={showRejectDialog()}>
        <div class="reject-dialog-overlay" onClick={() => setShowRejectDialog(false)}>
          <div class="reject-dialog" onClick={(e) => e.stopPropagation()}>
            <h4>Reject Revision</h4>
            <p>Please provide a reason for rejecting this revision:</p>
            <textarea
              class="reject-reason"
              value={rejectReason()}
              onInput={(e) => setRejectReason(e.target.value)}
              placeholder="Explain why this revision is being rejected..."
              rows={4}
            />
            <div class="dialog-actions">
              <button
                class="btn btn-confirm-reject"
                onClick={handleReject}
                disabled={isProcessing()}
              >
                Confirm Rejection
              </button>
              <button
                class="btn btn-cancel"
                onClick={() => {
                  setShowRejectDialog(false);
                  setRejectReason('');
                }}
                disabled={isProcessing()}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      </Show>
    </div>
  );
};

export default RevisionReview;
