"use client";

import { useState, useRef, useEffect } from "react";
import Link from "next/link";
import { Icons } from "@turbostarter/ui-web/icons";
import { Button } from "@turbostarter/ui-web/button";
import { Input } from "@turbostarter/ui-web/input";
import { Badge } from "@turbostarter/ui-web/badge";
import { pathsConfig } from "~/config/paths";
import { diagramTypeConfig } from "../DiagramCard";

import type { DiagramType } from "../../types/graph";

interface EditorHeaderProps {
  title: string;
  diagramType: DiagramType;
  onRename: (newTitle: string) => void;
  sidebarOpen: boolean;
  onToggleSidebar: () => void;
}

export function EditorHeader({
  title,
  diagramType,
  onRename,
  sidebarOpen,
  onToggleSidebar,
}: EditorHeaderProps) {
  const [isEditing, setIsEditing] = useState(false);
  const [editValue, setEditValue] = useState(title);
  const inputRef = useRef<HTMLInputElement>(null);
  const config = diagramTypeConfig[diagramType];
  const TypeIcon = config.icon;

  useEffect(() => {
    setEditValue(title);
  }, [title]);

  useEffect(() => {
    if (isEditing && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, [isEditing]);

  const handleSave = () => {
    const trimmed = editValue.trim();
    if (trimmed && trimmed !== title) {
      onRename(trimmed);
    } else {
      setEditValue(title);
    }
    setIsEditing(false);
  };

  const handleCancel = () => {
    setEditValue(title);
    setIsEditing(false);
  };

  return (
    <div className="flex h-12 shrink-0 items-center border-b border-border bg-background px-3 gap-3">
      {/* Sidebar toggle */}
      <Button
        variant="ghost"
        size="icon"
        className="h-8 w-8"
        onClick={onToggleSidebar}
        title={sidebarOpen ? "Collapse sidebar (⌘B)" : "Expand sidebar (⌘B)"}
      >
        <Icons.PanelLeft className="h-4 w-4" />
      </Button>

      {/* Breadcrumb */}
      <nav className="flex items-center gap-1.5 text-sm text-muted-foreground">
        <Link
          href={pathsConfig.dashboard.user.diagrams}
          className="hover:text-foreground transition-colors"
        >
          Diagrams
        </Link>
        <Icons.ChevronRight className="h-3.5 w-3.5" />
      </nav>

      {/* Title */}
      {isEditing ? (
        <Input
          ref={inputRef}
          value={editValue}
          onChange={(e) => setEditValue(e.target.value)}
          onBlur={handleSave}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              handleSave();
            } else if (e.key === "Escape") {
              handleCancel();
            }
          }}
          className="h-7 w-56 text-sm font-medium"
          maxLength={255}
        />
      ) : (
        <button
          className="text-sm font-medium hover:text-primary/80 transition-colors truncate max-w-64"
          onClick={() => {
            setEditValue(title);
            setIsEditing(true);
          }}
          title="Click to rename"
        >
          {title}
        </button>
      )}

      {/* Diagram type badge */}
      <Badge variant="secondary" className="gap-1 text-xs shrink-0">
        <TypeIcon className={`h-3 w-3 ${config.color}`} />
        {config.label}
      </Badge>

      {/* Spacer */}
      <div className="flex-1" />
    </div>
  );
}
