/**
 * LeftMdxPanel - 좌측 MDX 구조 탐색기
 * 
 * 기능:
 * - MDX 파일 업로드 버튼
 * - 추출된 섹션들의 계층 구조(Level 1~3) 표시
 * - 섹션 클릭 시 중앙 캔버스의 해당 구역 하이라이트
 */

import React from 'react';
import {
  FileText,
  ChevronRight,
  Upload,
  Zap,
  Layers,
  List,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Progress } from '@/components/ui/progress';
import { toast } from 'sonner';
import type { NormalizedContent } from '../types/designAgent';

interface LeftMdxPanelProps {
  normalizedContent: NormalizedContent | null;
  uploadedFile: File | null;
  isLoading: boolean;
  selectedSectionId: string | null;
  hasSlidePlan: boolean;
  /** 사용자가 frame / section / layout / zone 등 override 를 변경했을 때 true.
   *  하단 버튼이 "선택대로 재생성하기" 강조 버튼으로 전환. */
  hasPendingChanges?: boolean;
  onFileUpload: (file: File) => void;
  onGenerate: () => void;
  onSectionClick: (sectionId: string) => void;
  /** 사용자 lock 2026-05-14 — 좌측 패널에 03/04/05 fix 고정 list. 클릭 시 callback. */
  onSelectSample?: (which: "03" | "04" | "05") => void;
  selectedSample?: "03" | "04" | "05" | null;
}

const SAMPLE_MDX_LIST: { key: "03" | "04" | "05"; label: string; subtitle: string }[] = [
  { key: "03", label: "03. DX 시행을 위한 필수 요건", subtitle: "필수 요건 + Process/Product 혁신" },
  { key: "04", label: "04. DX 지연 요인", subtitle: "DX 인식 + 정책/조직 실태" },
  { key: "05", label: "05. 설계 방식의 왜곡", subtitle: "설계 자동화 오용 + S/W 한계" },
];

export default function LeftMdxPanel({
  normalizedContent,
  uploadedFile,
  isLoading,
  selectedSectionId,
  hasSlidePlan,
  hasPendingChanges = false,
  onFileUpload,
  onGenerate,
  onSectionClick,
  onSelectSample,
  selectedSample = null,
}: LeftMdxPanelProps) {
  const fileInputRef = React.useRef<HTMLInputElement>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) onFileUpload(file);
  };

  return (
    <div className="h-full flex flex-col bg-slate-50">
      {/* ── 헤더: 문서 정보 ── */}
      <div className="p-4 border-b border-slate-200 bg-white">
        <h2 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 flex items-center gap-1.5">
          <FileText className="w-3.5 h-3.5" />
          MDX Source
        </h2>

        {/* 2026-05-14 — 03/04/05 fix 고정 list. 클릭 시 해당 mdx 자동 fetch + 분석.
            frame/layout override 는 분석 후 우측 패널에서 가능. */}
        {onSelectSample && (
          <div className="space-y-1 mb-3">
            {SAMPLE_MDX_LIST.map((s) => {
              const isActive = selectedSample === s.key;
              return (
                <button
                  key={s.key}
                  onClick={() => onSelectSample(s.key)}
                  disabled={isLoading}
                  className={`w-full text-left p-2 rounded-md border transition-all ${
                    isActive
                      ? "bg-blue-50 border-blue-300 ring-1 ring-blue-200"
                      : "bg-white border-slate-200 hover:bg-slate-50 hover:border-slate-300"
                  } ${isLoading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
                  title={`${s.label} — 클릭하여 슬라이드 생성`}
                >
                  <div className="flex items-center gap-2">
                    <div className={`w-7 h-7 rounded flex items-center justify-center shrink-0 ${
                      isActive ? "bg-blue-200 text-blue-700" : "bg-slate-100 text-slate-500"
                    }`}>
                      <FileText className="w-3.5 h-3.5" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className={`text-[11px] font-bold truncate ${
                        isActive ? "text-blue-700" : "text-slate-700"
                      }`}>{s.label}</p>
                      <p className="text-[10px] text-slate-400 truncate">{s.subtitle}</p>
                    </div>
                    {isActive && <div className="w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />}
                  </div>
                </button>
              );
            })}
          </div>
        )}

        {uploadedFile ? (
          <div className="flex items-center gap-2 p-2 rounded-md bg-slate-50 border border-slate-200">
            <div className="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-blue-600">
              <FileText className="w-4 h-4" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs font-semibold text-slate-700 truncate">{uploadedFile.name}</p>
              <p className="text-[10px] text-slate-400">{(uploadedFile.size / 1024).toFixed(1)} KB</p>
            </div>
            {!hasSlidePlan && (
              <button
                className="p-1.5 text-slate-400 hover:text-red-500 transition-colors"
                onClick={() => window.location.reload()}
              >
                <Layers className="w-4 h-4 rotate-45" />
              </button>
            )}
          </div>
        ) : (
          <Button
            variant="outline"
            className="w-full h-12 border-dashed border-2 flex items-center justify-center gap-2 text-slate-500 hover:text-blue-600 hover:border-blue-300 hover:bg-blue-50"
            onClick={() => fileInputRef.current?.click()}
          >
            <Upload className="w-4 h-4" />
            <span className="text-[11px] font-medium">또는 직접 업로드</span>
            <input
              type="file"
              ref={fileInputRef}
              className="hidden"
              accept=".mdx,.md"
              onChange={handleFileChange}
            />
          </Button>
        )}
      </div>

      {/* ── 분석 진행 상태 (로딩 시) ── */}
      {isLoading && (
        <div className="p-4 border-b border-slate-200 bg-white">
          <div className="flex items-center justify-between mb-1.5">
            <span className="text-[10px] font-semibold text-blue-600">콘텐츠 분석 중...</span>
            <span className="text-[10px] text-slate-400">STAGE 1</span>
          </div>
          <Progress value={45} className="h-1" />
        </div>
      )}

      {/* ── 섹션 트리 리스트 ── */}
      <ScrollArea className="flex-1 p-2">
        {!normalizedContent ? (
          <div className="py-20 text-center px-4">
            <List className="w-8 h-8 text-slate-200 mx-auto mb-2" />
            <p className="text-[11px] text-slate-400">파일을 업로드하면<br />문서 구조가 표시됩니다.</p>
          </div>
        ) : (
          <div className="space-y-1">
            {/* 문서 제목 (Level 1) */}
            <div className="px-2 py-1.5 mb-2">
              <h1 className="text-sm font-bold text-slate-800 leading-tight">
                {normalizedContent.title}
              </h1>
            </div>

            {/* 섹션들 (Level 2+) — native HTML5 drag (framer-motion drag 와 충돌
                있어서 native 만 사용). dataTransfer 에 sectionId / section-id /
                text/plain 다 set 해서 SlideCanvas drop 이 어떤 키로든 받게. */}
            {normalizedContent.sections.map((section) => {
              const isSelected = selectedSectionId === section.id;
              const subSections = section.sub_sections ?? [];

              return (
                <div key={section.id} className="space-y-0.5">
                  {/* 중목차 (S1, S2 ...) */}
                  <button
                    draggable
                    onDragStart={(e) => {
                      e.dataTransfer.effectAllowed = "move";
                      e.dataTransfer.setData("sectionId", section.id);
                      e.dataTransfer.setData("section-id", section.id);
                      e.dataTransfer.setData("text/plain", section.id);
                    }}
                    className={`w-full text-left p-2 rounded-md transition-all group relative cursor-grab active:cursor-grabbing ${
                      isSelected
                        ? 'bg-blue-50 text-blue-700 shadow-sm ring-1 ring-blue-100'
                        : 'hover:bg-slate-100 text-slate-600'
                    }`}
                    onClick={() => onSectionClick(section.id)}
                    title={`S${section.index} — 드래그하여 zone 에 배정`}
                  >
                    <div className="flex items-start gap-2">
                      <ChevronRight className={`w-3 h-3 mt-1 shrink-0 transition-transform ${subSections.length > 0 ? 'rotate-90' : ''} ${isSelected ? 'text-blue-500' : 'text-slate-300'}`} />
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-1.5 mb-0.5">
                          <span className={`text-[10px] font-bold px-1 rounded ${isSelected ? 'bg-blue-200/50 text-blue-600' : 'bg-slate-200 text-slate-500'}`}>
                            S{section.index}
                          </span>
                          <span className="text-[11px] font-bold truncate">
                            {section.title}
                          </span>
                        </div>
                        <p className={`text-[10px] line-clamp-2 leading-relaxed ${isSelected ? 'text-blue-600/70' : 'text-slate-400'}`}>
                          {section.content_objects?.[0]?.raw_payload || (subSections.length > 0 ? `소목차 ${subSections.length} 개` : "내용 없음")}
                        </p>
                      </div>
                    </div>

                    {isSelected && (
                      <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-blue-500 rounded-full" />
                    )}
                  </button>

                  {/* 소목차 (S1.1, S1.2 ...) — 펼친 상태로 indent 표시. 각자 draggable. */}
                  {subSections.length > 0 && (
                    <div className="ml-4 pl-2 border-l border-slate-200 space-y-0.5">
                      {subSections.map((sub) => {
                        const isSubSelected = selectedSectionId === sub.id;
                        return (
                          <button
                            key={sub.id}
                            draggable
                            onDragStart={(e) => {
                              e.dataTransfer.effectAllowed = "move";
                              e.dataTransfer.setData("sectionId", sub.id);
                              e.dataTransfer.setData("section-id", sub.id);
                              e.dataTransfer.setData("text/plain", sub.id);
                            }}
                            className={`w-full text-left p-1.5 rounded-md transition-all relative cursor-grab active:cursor-grabbing ${
                              isSubSelected
                                ? 'bg-blue-50 text-blue-700 ring-1 ring-blue-100'
                                : 'hover:bg-slate-100 text-slate-500'
                            }`}
                            onClick={() => onSectionClick(sub.id)}
                            title={`S${section.index}.${sub.index} — 드래그하여 zone 에 배정`}
                          >
                            <div className="flex items-center gap-1.5">
                              <span className={`text-[9px] font-bold px-1 rounded shrink-0 ${isSubSelected ? 'bg-blue-200/50 text-blue-600' : 'bg-slate-100 text-slate-400'}`}>
                                S{section.index}.{sub.index}
                              </span>
                              <span className="text-[10px] font-medium truncate">
                                {sub.title}
                              </span>
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </ScrollArea>

      {/* ── 하단 분석 버튼 ── */}
      <div className="p-3 border-t border-slate-200 bg-white">
        {!normalizedContent ? (
          <div className="text-center py-2">
            <p className="text-[10px] text-slate-400 mb-2 font-medium uppercase tracking-tight">MDX 분석 대기 중</p>
            <Button 
              className="w-full h-10 border-slate-200 text-slate-400" 
              variant="outline"
              disabled
            >
              슬라이드 생성하기
            </Button>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            {!hasSlidePlan ? (
              <Button
                className="w-full gap-2 bg-blue-600 hover:bg-blue-700 h-10 shadow-lg shadow-blue-500/20"
                onClick={onGenerate}
                disabled={isLoading}
              >
                <Zap className="w-3.5 h-3.5 fill-current" />
                슬라이드 플랜 생성하기
              </Button>
            ) : hasPendingChanges ? (
              // override 변경 있음 — 강조 "선택대로 재생성하기" 버튼
              <div className="flex flex-col gap-2">
                <div className="flex items-center gap-1.5 px-1">
                  <div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
                  <span className="text-[10px] font-black text-amber-700 uppercase tracking-tighter">
                    Pending Changes
                  </span>
                </div>
                <Button
                  className="w-full gap-2 bg-amber-500 hover:bg-amber-600 h-11 shadow-lg shadow-amber-500/30 text-white font-bold"
                  onClick={onGenerate}
                  disabled={isLoading}
                >
                  <Zap className="w-4 h-4 fill-current" />
                  선택대로 재생성하기
                </Button>
                <p className="text-[10px] text-slate-500 leading-tight px-1">
                  레이아웃 / 프레임 / 섹션 변경을 backend 에 적용해 새 final.html 을
                  생성합니다. (※ Step D backend forwarding 연결 후 활성)
                </p>
              </div>
            ) : (
              <div className="flex flex-col gap-2">
                <div className="flex items-center justify-between px-1">
                  <span className="text-[10px] font-bold text-emerald-600 flex items-center gap-1">
                    <Zap className="w-3 h-3 fill-current" />
                    플랜 생성 완료
                  </span>
                  <button
                    className="text-[10px] text-blue-600 font-bold hover:underline"
                    onClick={onGenerate}
                  >
                    재생성
                  </button>
                </div>
                <Button
                  variant="outline"
                  className="w-full h-8 text-[11px] border-slate-200 bg-slate-50"
                  onClick={() => toast.info("MDX 원문 편집 기능은 준비 중입니다.")}
                >
                  MDX 소스 보기
                </Button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}