"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { DashboardElement } from "../types";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

interface YardWidgetConfigSidebarProps {
  element: DashboardElement;
  isOpen: boolean;
  onClose: () => void;
  onApply: (updates: Partial<DashboardElement>) => void;
}

export function YardWidgetConfigSidebar({ element, isOpen, onClose, onApply }: YardWidgetConfigSidebarProps) {
  const [customTitle, setCustomTitle] = useState(element.customTitle || "");
  const [showHeader, setShowHeader] = useState(element.showHeader !== false);

  useEffect(() => {
    if (isOpen) {
      setCustomTitle(element.customTitle || "");
      setShowHeader(element.showHeader !== false);
    }
  }, [isOpen, element]);

  const handleApply = () => {
    onApply({
      customTitle,
      showHeader,
    });
    onClose();
  };

  return (
    <div
      className={cn(
        "fixed top-14 left-0 z-[100] flex h-[calc(100vh-3.5rem)] w-80 flex-col bg-muted transition-transform duration-300 ease-in-out",
        isOpen ? "translate-x-0" : "translate-x-[-100%]",
      )}
    >
      {/* 헤더 */}
      <div className="flex items-center justify-between bg-background px-3 py-2 shadow-sm">
        <div className="flex items-center gap-2">
          <div className="bg-primary/10 flex h-6 w-6 items-center justify-center rounded">
            <span className="text-primary text-xs font-bold">🏗️</span>
          </div>
          <span className="text-xs font-semibold text-foreground">야드 관리 위젯 설정</span>
        </div>
        <button
          onClick={onClose}
          className="flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-muted"
        >
          <X className="h-3.5 w-3.5 text-muted-foreground" />
        </button>
      </div>

      {/* 컨텐츠 */}
      <div className="flex-1 overflow-y-auto p-3">
        <div className="space-y-3">
          {/* 위젯 제목 */}
          <div className="rounded-lg bg-background p-3 shadow-sm">
            <div className="mb-2 text-[10px] font-semibold tracking-wide text-muted-foreground uppercase">위젯 제목</div>
            <Input
              value={customTitle}
              onChange={(e) => setCustomTitle(e.target.value)}
              placeholder="제목을 입력하세요 (비워두면 기본 제목 사용)"
              className="h-8 text-xs"
              style={{ fontSize: "12px" }}
            />
            <p className="mt-1 text-[10px] text-muted-foreground">기본 제목: 야드 관리 3D</p>
          </div>

          {/* 헤더 표시 */}
          <div className="rounded-lg bg-background p-3 shadow-sm">
            <div className="mb-2 text-[10px] font-semibold tracking-wide text-muted-foreground uppercase">헤더 표시</div>
            <RadioGroup
              value={showHeader ? "show" : "hide"}
              onValueChange={(value) => setShowHeader(value === "show")}
              className="flex items-center gap-3"
            >
              <div className="flex items-center gap-1.5">
                <RadioGroupItem value="show" id="header-show" className="h-3 w-3" />
                <Label htmlFor="header-show" className="cursor-pointer text-[11px] font-normal">
                  표시
                </Label>
              </div>
              <div className="flex items-center gap-1.5">
                <RadioGroupItem value="hide" id="header-hide" className="h-3 w-3" />
                <Label htmlFor="header-hide" className="cursor-pointer text-[11px] font-normal">
                  숨김
                </Label>
              </div>
            </RadioGroup>
          </div>
        </div>
      </div>

      {/* 푸터 */}
      <div className="flex gap-2 bg-background p-2 shadow-[0_-2px_8px_rgba(0,0,0,0.05)]">
        <button
          onClick={onClose}
          className="flex-1 rounded bg-muted py-2 text-xs font-medium text-foreground transition-colors hover:bg-muted"
        >
          취소
        </button>
        <button
          onClick={handleApply}
          className="bg-primary hover:bg-primary/90 flex-1 rounded py-2 text-xs font-medium text-primary-foreground transition-colors"
        >
          적용
        </button>
      </div>
    </div>
  );
}