import {
  Check,
  X,
  MessageSquare,
  GitBranch,
  FileCode,
  Plus,
  Minus,
  Circle,
  CheckCircle2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import type { FileDiff, ReviewComment, ReviewStatus } from "./types";

interface ReviewSidebarProps {
  title: string;
  description: string;
  author: string;
  status: ReviewStatus;
  sourceBranch: string;
  targetBranch: string;
  files: FileDiff[];
  comments: ReviewComment[];
  onApprove: () => void;
  onRequestChanges: () => void;
  onFileClick: (filePath: string) => void;
}

export function ReviewSidebar({
  title,
  description,
  author,
  status,
  sourceBranch,
  targetBranch,
  files,
  comments,
  onApprove,
  onRequestChanges,
  onFileClick,
}: ReviewSidebarProps) {
  const unresolvedCount = comments.filter((c) => !c.resolved).length;
  const resolvedCount = comments.filter((c) => c.resolved).length;
  const totalAdditions = files.reduce((s, f) => s + f.additions, 0);
  const totalDeletions = files.reduce((s, f) => s + f.deletions, 0);

  return (
    <div className="space-y-5">
      {/* Review info */}
      <div className="space-y-3">
        <div className="flex items-start justify-between gap-2">
          <h3 className="text-sm font-semibold leading-tight">{title}</h3>
          <StatusBadge status={status} />
        </div>
        <p className="text-xs text-muted-foreground leading-relaxed">
          {description}
        </p>
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <span className="font-medium text-foreground">{author}</span>
        </div>
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground font-mono">
          <GitBranch className="h-3 w-3" />
          <span>{sourceBranch}</span>
          <span className="text-muted-foreground/50">&rarr;</span>
          <span>{targetBranch}</span>
        </div>
      </div>

      {/* Actions */}
      <div className="space-y-2">
        {status === "pending" && (
          <>
            <Button
              className="w-full"
              size="sm"
              onClick={onApprove}
              disabled={unresolvedCount > 0}
            >
              <Check className="h-3.5 w-3.5 mr-1" />
              {unresolvedCount > 0
                ? `Resolve ${unresolvedCount} thread${unresolvedCount > 1 ? "s" : ""} first`
                : "Approve"}
            </Button>
            <Button
              className="w-full"
              variant="outline"
              size="sm"
              onClick={onRequestChanges}
            >
              <X className="h-3.5 w-3.5 mr-1" />
              Request Changes
            </Button>
          </>
        )}
        {status === "approved" && (
          <div className="flex items-center gap-2 rounded-md bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-900 px-3 py-2 text-xs text-green-700 dark:text-green-400">
            <Check className="h-4 w-4" />
            <span className="font-medium">Approved</span>
          </div>
        )}
        {status === "changes_requested" && (
          <div className="flex items-center gap-2 rounded-md bg-orange-50 dark:bg-orange-950/20 border border-orange-200 dark:border-orange-900 px-3 py-2 text-xs text-orange-700 dark:text-orange-400">
            <X className="h-4 w-4" />
            <span className="font-medium">Changes Requested</span>
          </div>
        )}
      </div>

      {/* Comment summary */}
      <div className="space-y-2">
        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
          Discussions
        </h4>
        <div className="flex items-center gap-3 text-xs">
          <span className="flex items-center gap-1 text-muted-foreground">
            <MessageSquare className="h-3 w-3" />
            {comments.length} comment{comments.length !== 1 ? "s" : ""}
          </span>
          {resolvedCount > 0 && (
            <span className="flex items-center gap-1 text-green-600">
              <CheckCircle2 className="h-3 w-3" />
              {resolvedCount} resolved
            </span>
          )}
          {unresolvedCount > 0 && (
            <span className="flex items-center gap-1 text-orange-600">
              <Circle className="h-3 w-3" />
              {unresolvedCount} open
            </span>
          )}
        </div>
      </div>

      {/* Stats */}
      <div className="space-y-2">
        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
          Changes
        </h4>
        <div className="flex items-center gap-3 text-xs">
          <span className="flex items-center gap-1">
            <FileCode className="h-3 w-3 text-muted-foreground" />
            {files.length} file{files.length !== 1 ? "s" : ""}
          </span>
          <span className="flex items-center gap-0.5 text-green-600">
            <Plus className="h-3 w-3" />
            {totalAdditions}
          </span>
          <span className="flex items-center gap-0.5 text-red-600">
            <Minus className="h-3 w-3" />
            {totalDeletions}
          </span>
        </div>
      </div>

      {/* File list */}
      <div className="space-y-1">
        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
          Files
        </h4>
        {files.map((file) => {
          const fileCommentCount = comments.filter(
            (c) => c.filePath === file.newPath
          ).length;
          return (
            <button
              key={file.newPath}
              className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50 transition-colors group"
              onClick={() => onFileClick(file.newPath)}
            >
              <FileCode className="h-3 w-3 text-muted-foreground shrink-0" />
              <span className="truncate flex-1 font-mono text-[11px]">
                {file.newPath.split("/").pop()}
              </span>
              <span className="flex items-center gap-1.5 shrink-0">
                {fileCommentCount > 0 && (
                  <span className="flex items-center gap-0.5 text-muted-foreground">
                    <MessageSquare className="h-2.5 w-2.5" />
                    {fileCommentCount}
                  </span>
                )}
                <span className="text-green-600 text-[10px]">+{file.additions}</span>
                <span className="text-red-600 text-[10px]">-{file.deletions}</span>
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function StatusBadge({ status }: { status: ReviewStatus }) {
  if (status === "approved") {
    return (
      <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 border-green-200 dark:border-green-800 text-[10px]">
        Approved
      </Badge>
    );
  }
  if (status === "changes_requested") {
    return (
      <Badge className="bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 border-orange-200 dark:border-orange-800 text-[10px]">
        Changes Requested
      </Badge>
    );
  }
  return (
    <Badge variant="secondary" className="text-[10px]">
      Pending Review
    </Badge>
  );
}
