import { useState, useRef, useEffect } from "react";
import {
  Check,
  X,
  GitBranch,
  FileCode,
  Plus,
  Minus,
  Loader2,
  ArrowRight,
  Eye,
  AlertCircle,
  GitMerge,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { PreviewControls } from "./PreviewControls";
import type { PreviewState } from "./PreviewControls";
import type { FileDiff, ReviewStatus } from "./types";

interface PhaseOption {
  id: string;
  name: string;
  status: string;
}

interface ReviewHeaderProps {
  ref?: React.Ref<HTMLDivElement>;
  phases: PhaseOption[];
  activePhaseId: string | null;
  isReadOnly?: boolean;
  onPhaseSelect: (id: string) => void;
  phaseName: string;
  sourceBranch: string;
  targetBranch: string;
  files: FileDiff[];
  status: ReviewStatus;
  unresolvedCount: number;
  onApprove: () => void;
  onRequestChanges: () => void;
  isRequestingChanges?: boolean;
  preview: PreviewState | null;
  viewedCount?: number;
  totalCount?: number;
}

export function ReviewHeader({
  ref,
  phases,
  activePhaseId,
  isReadOnly,
  onPhaseSelect,
  phaseName,
  sourceBranch,
  targetBranch,
  files,
  status,
  unresolvedCount,
  onApprove,
  onRequestChanges,
  isRequestingChanges,
  preview,
  viewedCount,
  totalCount,
}: ReviewHeaderProps) {
  const totalAdditions = files.reduce((s, f) => s + f.additions, 0);
  const totalDeletions = files.reduce((s, f) => s + f.deletions, 0);
  const [showConfirmation, setShowConfirmation] = useState(false);
  const [showRequestConfirm, setShowRequestConfirm] = useState(false);
  const confirmRef = useRef<HTMLDivElement>(null);
  const requestConfirmRef = useRef<HTMLDivElement>(null);

  // Click-outside handler to dismiss confirmation dropdowns
  useEffect(() => {
    if (!showConfirmation && !showRequestConfirm) return;
    function handleClickOutside(e: MouseEvent) {
      if (
        showConfirmation &&
        confirmRef.current &&
        !confirmRef.current.contains(e.target as Node)
      ) {
        setShowConfirmation(false);
      }
      if (
        showRequestConfirm &&
        requestConfirmRef.current &&
        !requestConfirmRef.current.contains(e.target as Node)
      ) {
        setShowRequestConfirm(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [showConfirmation, showRequestConfirm]);

  const viewed = viewedCount ?? 0;
  const total = totalCount ?? 0;

  return (
    <div ref={ref} className="border-b border-border bg-card backdrop-blur-sm sticky top-0 z-20 rounded-t-lg shadow-[0_-50px_0_0_hsl(var(--background))]">
      {/* Phase selector row */}
      {phases.length > 1 && (
        <div className="flex items-center gap-1 px-4 pt-3 pb-2 border-b border-border/50">
          <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mr-2 shrink-0">
            Phases
          </span>
          <div className="flex gap-1 overflow-x-auto">
            {phases.map((phase) => {
              const isActive = phase.id === activePhaseId;
              const isCompleted = phase.status === "completed";
              const dotColor = isActive
                ? "bg-primary"
                : isCompleted
                  ? "bg-status-success-dot"
                  : "bg-status-warning-dot";
              return (
                <button
                  key={phase.id}
                  onClick={() => onPhaseSelect(phase.id)}
                  className={`
                    flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium
                    transition-all duration-fast whitespace-nowrap
                    ${isActive
                      ? "bg-primary/10 text-primary border border-primary/20 shadow-xs"
                      : "text-muted-foreground hover:text-foreground hover:bg-muted border border-transparent"
                    }
                  `}
                >
                  <span
                    className={`h-1.5 w-1.5 rounded-full shrink-0 ${dotColor}`}
                  />
                  {phase.name}
                </button>
              );
            })}
          </div>
        </div>
      )}

      {/* Main toolbar row */}
      <div className="flex items-center gap-3 px-4 py-2.5">
        {/* Left: branch info + stats */}
        <div className="flex items-center gap-3 min-w-0 flex-1">
          <h2 className="text-sm font-semibold truncate shrink-0">
            {phaseName}
          </h2>

          {sourceBranch && (
            <div className="flex items-center gap-1 text-[11px] text-muted-foreground font-mono min-w-0">
              <GitBranch className="h-3 w-3 shrink-0" />
              <span className="truncate" title={sourceBranch}>
                {sourceBranch}
              </span>
              <ArrowRight className="h-2.5 w-2.5 shrink-0 text-muted-foreground/50" />
              <span className="truncate" title={targetBranch}>
                {targetBranch}
              </span>
            </div>
          )}

          <div className="flex items-center gap-2.5 text-[11px] shrink-0">
            <span className="flex items-center gap-0.5 text-muted-foreground">
              <FileCode className="h-3 w-3" />
              {files.length}
            </span>
            <span className="flex items-center gap-0.5 text-diff-add-fg">
              <Plus className="h-3 w-3" />
              {totalAdditions}
            </span>
            <span className="flex items-center gap-0.5 text-diff-remove-fg">
              <Minus className="h-3 w-3" />
              {totalDeletions}
            </span>
          </div>
        </div>

        {/* Center: review progress */}
        {total > 0 && (
          <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground shrink-0">
            <Eye className="h-3 w-3" />
            <span>
              {viewed}/{total} viewed
            </span>
          </div>
        )}

        {/* Right: preview + actions */}
        <div className="flex items-center gap-3 shrink-0">
          {/* Preview controls */}
          {preview && <PreviewControls preview={preview} />}

          {/* Review status / actions */}
          {isReadOnly ? (
            <Badge variant="success" size="xs">
              <Check className="h-3 w-3" />
              Merged
            </Badge>
          ) : (
            <>
              {status === "pending" && (
                <>
                  <div className="relative" ref={requestConfirmRef}>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setShowRequestConfirm(true)}
                      disabled={isRequestingChanges || unresolvedCount === 0}
                      className="h-8 text-xs px-3 border-status-error-border/50 text-status-error-fg hover:bg-status-error-bg/50 hover:border-status-error-border"
                    >
                      {isRequestingChanges ? (
                        <Loader2 className="h-3 w-3 animate-spin" />
                      ) : (
                        <X className="h-3 w-3" />
                      )}
                      Request Changes
                    </Button>

                    {showRequestConfirm && (
                      <div className="absolute right-0 top-full mt-1 z-30 w-64 rounded-lg border border-border bg-card shadow-lg p-4">
                        <p className="text-sm font-semibold mb-3">
                          Request changes?
                        </p>
                        <div className="space-y-1.5 mb-4">
                          <div className="flex items-center gap-2 text-xs">
                            <AlertCircle className="h-3.5 w-3.5 text-status-error-fg" />
                            <span className="text-muted-foreground">
                              {unresolvedCount} unresolved {unresolvedCount === 1 ? "comment" : "comments"} will be sent
                            </span>
                          </div>
                        </div>
                        <div className="flex items-center justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => setShowRequestConfirm(false)}
                            className="h-8 text-xs"
                          >
                            Cancel
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              setShowRequestConfirm(false);
                              onRequestChanges();
                            }}
                            className="h-8 px-4 text-xs font-semibold shadow-sm border-status-error-border text-status-error-fg hover:bg-status-error-bg"
                          >
                            <X className="h-3.5 w-3.5" />
                            Request Changes
                          </Button>
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="relative" ref={confirmRef}>
                    <Button
                      size="sm"
                      onClick={() => {
                        if (unresolvedCount > 0) return;
                        setShowConfirmation(true);
                      }}
                      disabled={unresolvedCount > 0}
                      className="h-9 px-5 text-sm font-semibold shadow-sm"
                    >
                      {unresolvedCount > 0 ? (
                        <>
                          <AlertCircle className="h-3.5 w-3.5" />
                          {unresolvedCount} unresolved
                        </>
                      ) : (
                        <>
                          <GitMerge className="h-3.5 w-3.5" />
                          Approve & Merge
                        </>
                      )}
                    </Button>

                    {/* Merge confirmation dropdown */}
                    {showConfirmation && (
                      <div className="absolute right-0 top-full mt-1 z-30 w-64 rounded-lg border border-border bg-card shadow-lg p-4">
                        <p className="text-sm font-semibold mb-3">
                          Ready to merge?
                        </p>
                        <div className="space-y-1.5 mb-4">
                          <div className="flex items-center gap-2 text-xs">
                            <Check className="h-3.5 w-3.5 text-status-success-fg" />
                            <span className="text-muted-foreground">
                              0 unresolved comments
                            </span>
                          </div>
                          <div className="flex items-center gap-2 text-xs">
                            <Eye className="h-3.5 w-3.5 text-muted-foreground" />
                            <span className="text-muted-foreground">
                              {viewed}/{total} files viewed
                            </span>
                          </div>
                        </div>
                        <div className="flex items-center justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => setShowConfirmation(false)}
                            className="h-8 text-xs"
                          >
                            Cancel
                          </Button>
                          <Button
                            size="sm"
                            onClick={() => {
                              setShowConfirmation(false);
                              onApprove();
                            }}
                            className="h-8 px-4 text-xs font-semibold shadow-sm"
                          >
                            <GitMerge className="h-3.5 w-3.5" />
                            Merge Now
                          </Button>
                        </div>
                      </div>
                    )}
                  </div>
                </>
              )}
              {status === "approved" && (
                <Badge variant="success" size="xs">
                  <Check className="h-3 w-3" />
                  Approved
                </Badge>
              )}
              {status === "changes_requested" && (
                <Badge variant="warning" size="xs">
                  <X className="h-3 w-3" />
                  Changes Requested
                </Badge>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

