Codewalkers/apps/web/src/components/review/ConflictResolutionPanel.tsx

import { Loader2, AlertCircle, GitMerge, CheckCircle2, ChevronDown, ChevronRight, Terminal } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { QuestionForm } from '@/components/QuestionForm';
import { useConflictAgent } from '@/hooks/useConflictAgent';

interface ConflictResolutionPanelProps {
  initiativeId: string;
  conflicts: string[];
  onResolved: () => void;
}

export function ConflictResolutionPanel({ initiativeId, conflicts, onResolved }: ConflictResolutionPanelProps) {
  const { state, agent: _agent, questions, spawn, resume, stop, dismiss } = useConflictAgent(initiativeId);
  const [showManual, setShowManual] = useState(false);
  const prevStateRef = useRef<string | null>(null);

  // Auto-dismiss and re-check mergeability when conflict agent completes
  useEffect(() => {
    const prev = prevStateRef.current;
    prevStateRef.current = state;
    if (prev !== 'completed' && state === 'completed') {
      dismiss();
      onResolved();
    }
  }, [state, dismiss, onResolved]);

  if (state === 'none') {
    return (
      <div className="mx-4 mt-3 rounded-lg border border-status-error-border bg-status-error-bg/50 p-4">
        <div className="flex items-start gap-3">
          <AlertCircle className="h-4 w-4 text-status-error-fg mt-0.5 shrink-0" />
          <div className="flex-1 min-w-0">
            <h3 className="text-sm font-semibold text-foreground mb-1">
              {conflicts.length} merge conflict{conflicts.length !== 1 ? 's' : ''} detected
            </h3>
            <ul className="text-xs text-muted-foreground font-mono space-y-0.5 mb-3">
              {conflicts.map((file) => (
                <li key={file}>{file}</li>
              ))}
            </ul>
            <div className="flex items-center gap-2">
              <Button
                size="sm"
                onClick={() => spawn.mutate({ initiativeId })}
                disabled={spawn.isPending}
                className="h-7 text-xs"
              >
                {spawn.isPending ? (
                  <Loader2 className="h-3 w-3 animate-spin" />
                ) : (
                  <GitMerge className="h-3 w-3" />
                )}
                Resolve with Agent
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setShowManual(!showManual)}
                className="h-7 text-xs text-muted-foreground"
              >
                {showManual ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
                Manual Resolution
              </Button>
            </div>
            {spawn.error && (
              <p className="mt-2 text-xs text-status-error-fg">{spawn.error.message}</p>
            )}
            {showManual && (
              <div className="mt-3 rounded border border-border bg-card p-3">
                <p className="text-xs text-muted-foreground mb-2">
                  In your project clone, run:
                </p>
                <pre className="text-xs font-mono bg-terminal text-terminal-fg rounded p-2 overflow-x-auto">
{`git checkout <initiative-branch>
git merge <target-branch>
# Resolve conflicts in each file
git add <resolved-files>
git commit --no-edit`}
                </pre>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  if (state === 'running') {
    return (
      <div className="mx-4 mt-3 rounded-lg border border-border bg-card px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
            <span className="text-sm text-muted-foreground">Resolving merge conflicts...</span>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => stop.mutate()}
            disabled={stop.isPending}
            className="h-7 text-xs"
          >
            Stop
          </Button>
        </div>
      </div>
    );
  }

  if (state === 'waiting' && questions) {
    return (
      <div className="mx-4 mt-3 rounded-lg border border-border bg-card p-4">
        <div className="flex items-center gap-2 mb-3">
          <Terminal className="h-3.5 w-3.5 text-primary" />
          <h3 className="text-sm font-semibold">Agent needs input</h3>
        </div>
        <QuestionForm
          questions={questions.questions}
          onSubmit={(answers) => resume.mutate(answers)}
          onCancel={() => {}}
          onDismiss={() => stop.mutate()}
          isSubmitting={resume.isPending}
          isDismissing={stop.isPending}
        />
      </div>
    );
  }

  if (state === 'completed') {
    // Auto-dismiss effect above handles this — show brief success message during transition
    return (
      <div className="mx-4 mt-3 rounded-lg border border-status-success-border bg-status-success-bg/50 px-4 py-3">
        <div className="flex items-center gap-2">
          <CheckCircle2 className="h-3.5 w-3.5 text-status-success-fg" />
          <span className="text-sm text-status-success-fg">Conflicts resolved — re-checking mergeability...</span>
          <Loader2 className="h-3 w-3 animate-spin text-status-success-fg" />
        </div>
      </div>
    );
  }

  if (state === 'crashed') {
    return (
      <div className="mx-4 mt-3 rounded-lg border border-status-error-border bg-status-error-bg/50 px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <AlertCircle className="h-3.5 w-3.5 text-status-error-fg" />
            <span className="text-sm text-status-error-fg">Conflict resolution agent crashed</span>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                dismiss();
              }}
              className="h-7 text-xs"
            >
              Dismiss
            </Button>
            <Button
              size="sm"
              onClick={() => {
                dismiss();
                spawn.mutate({ initiativeId });
              }}
              disabled={spawn.isPending}
              className="h-7 text-xs"
            >
              Retry
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return null;
}