import { useState, useMemo } from 'react';
import { ChevronRight, Plus, X, GripVertical } from 'lucide-react';
import { useDraggable, useDroppable } from '@dnd-kit/core';
import { cn } from '@/lib/utils';
import type { KeyPoint, OutlineSection as OutlineSectionType } from '../../types/ai-writing';
import { normalizeKeyPoint } from '../../types/ai-writing';
import { CollapseTransition } from './CollapseTransition';

interface OutlineSectionProps {
  section: OutlineSectionType;
  index: number;
  /** 章节在 outline.sections 中的下标，用于生成稳定 dnd id */
  sectionIndex: number;
  onChange: (updated: OutlineSectionType) => void;
  onRemove?: () => void;
  readOnly?: boolean;
}

// 各级 grip 标题提示文案
const DRAG_HINT = '按住拖动：项的顶/底边 = 同级重排；中间区域 = 嵌入为子项';
const DRAG_HINT_LEAF = '按住拖动重排（顶半区 = 上插入，底半区 = 下插入）';

// ─── 章节 (Level 1) ───────────────────────────────────────────────────────────
export function OutlineSection({
  section, index, sectionIndex, onChange, onRemove, readOnly,
}: OutlineSectionProps) {
  const [expanded, setExpanded] = useState(true);
  const [editingTitle, setEditingTitle] = useState(false);
  const [titleDraft, setTitleDraft] = useState(section.sectionTitle);

  const id = `s${sectionIndex}`;
  const { attributes, listeners, setNodeRef: setDragRef, isDragging } = useDraggable({
    id, disabled: readOnly,
  });
  // 三个 drop 区：before / into / after
  const beforeDrop = useDroppable({ id: `before:${id}`, disabled: readOnly });
  const intoDrop = useDroppable({ id: `into:${id}`, disabled: readOnly });
  const afterDrop = useDroppable({ id: `after:${id}`, disabled: readOnly });

  const keyPoints: KeyPoint[] = useMemo(
    () => (section.keyPoints ?? []).map(normalizeKeyPoint),
    [section.keyPoints],
  );

  function commitTitle() {
    setEditingTitle(false);
    const trimmed = titleDraft.trim();
    if (trimmed && trimmed !== section.sectionTitle) {
      onChange({ ...section, sectionTitle: trimmed });
    } else {
      setTitleDraft(section.sectionTitle);
    }
  }
  function updateKeyPoint(i: number, updated: KeyPoint) {
    const next = [...keyPoints];
    next[i] = updated;
    onChange({ ...section, keyPoints: next });
  }
  function removeKeyPoint(i: number) {
    onChange({ ...section, keyPoints: keyPoints.filter((_, idx) => idx !== i) });
  }
  function addKeyPoint() {
    onChange({ ...section, keyPoints: [...keyPoints, { pointTitle: '', subPoints: [] }] });
  }

  const totalSubPoints = keyPoints.reduce((sum, kp) => sum + (kp.subPoints?.length || 0), 0);

  return (
    <div
      ref={setDragRef}
      {...attributes}
      className={cn(
        'relative rounded border text-xs transition-colors duration-150',
        isDragging ? 'opacity-40 border-blue-300' : 'border-border/60',
        intoDrop.isOver ? 'ring-2 ring-blue-400 ring-inset bg-blue-50/40 dark:bg-blue-950/30' : 'bg-background',
      )}
    >
      {/* before：顶部 12px 命中区，命中时顶边显示蓝色线 */}
      <div ref={beforeDrop.setNodeRef} className="absolute top-0 inset-x-0 h-3 z-20 pointer-events-none" />
      {beforeDrop.isOver && <DropLine position="top" />}

      {/* into：包住头部 + 折叠体；本身就是 drop 容器 */}
      <div ref={intoDrop.setNodeRef}>
        {/* 章节头 */}
        <div className="flex items-center gap-1.5 px-2.5 py-2">
          {!readOnly && (
            <button
              type="button"
              {...listeners}
              className="shrink-0 cursor-grab active:cursor-grabbing touch-none p-0.5 -m-0.5 text-muted-foreground/40 hover:text-muted-foreground"
              aria-label="拖动排序章节"
              title={DRAG_HINT}
            >
              <GripVertical className="size-3" />
            </button>
          )}
          <button
            type="button"
            onClick={() => setExpanded((v) => !v)}
            className="shrink-0"
          >
            <ChevronRight
              className={cn(
                'size-3.5 text-muted-foreground transition-transform duration-200',
                expanded && 'rotate-90',
              )}
            />
          </button>

          <span className="text-muted-foreground/60 shrink-0 w-4 text-center">{index + 1}.</span>

          {editingTitle && !readOnly ? (
            <input
              autoFocus
              value={titleDraft}
              onChange={(e) => setTitleDraft(e.target.value)}
              onBlur={commitTitle}
              onKeyDown={(e) => {
                if (e.key === 'Enter') commitTitle();
                if (e.key === 'Escape') { setTitleDraft(section.sectionTitle); setEditingTitle(false); }
              }}
              className="flex-1 bg-transparent border-b border-primary outline-none font-medium"
            />
          ) : (
            <span
              className={cn('flex-1 font-medium', !readOnly && 'cursor-text hover:text-primary')}
              onClick={() => !readOnly && setEditingTitle(true)}
            >
              {section.sectionTitle || <span className="text-muted-foreground italic">（未命名）</span>}
            </span>
          )}

          <span className="text-muted-foreground/50 shrink-0">
            {keyPoints.length} 小节{totalSubPoints > 0 ? ` · ${totalSubPoints} 子要点` : ''}
          </span>
          {!readOnly && onRemove && (
            <button type="button" onClick={onRemove} className="shrink-0 text-muted-foreground/40 hover:text-destructive">
              <X className="size-3" />
            </button>
          )}
        </div>

        {/* 小节列表 (Level 2) */}
        <CollapseTransition open={expanded}>
          <div className="px-6 pb-2.5 pt-1 space-y-1.5 border-t">
            {keyPoints.map((kp, i) => (
              <KeyPointRow
                key={i}
                keyPoint={kp}
                sectionIndex={sectionIndex}
                keyPointIndex={i}
                onChange={(updated) => updateKeyPoint(i, updated)}
                onRemove={readOnly ? undefined : () => removeKeyPoint(i)}
                readOnly={readOnly}
              />
            ))}
            {!readOnly && (
              <button
                type="button"
                onClick={addKeyPoint}
                className="flex items-center gap-1 text-muted-foreground/60 hover:text-primary pt-0.5"
              >
                <Plus className="size-3" />
                添加小节
              </button>
            )}
          </div>
        </CollapseTransition>
      </div>

      {/* after：底部 12px 命中区 */}
      <div ref={afterDrop.setNodeRef} className="absolute bottom-0 inset-x-0 h-3 z-20 pointer-events-none" />
      {afterDrop.isOver && <DropLine position="bottom" />}
    </div>
  );
}

// ─── 小节 (Level 2) ───────────────────────────────────────────────────────────
interface KeyPointRowProps {
  keyPoint: KeyPoint;
  sectionIndex: number;
  keyPointIndex: number;
  onChange: (updated: KeyPoint) => void;
  onRemove?: () => void;
  readOnly?: boolean;
}

function KeyPointRow({ keyPoint, sectionIndex, keyPointIndex, onChange, onRemove, readOnly }: KeyPointRowProps) {
  const [expanded, setExpanded] = useState(true);
  const [editingTitle, setEditingTitle] = useState(false);
  const [titleDraft, setTitleDraft] = useState(keyPoint.pointTitle);

  const id = `s${sectionIndex}-k${keyPointIndex}`;
  const { attributes, listeners, setNodeRef: setDragRef, isDragging } = useDraggable({
    id, disabled: readOnly,
  });
  const beforeDrop = useDroppable({ id: `before:${id}`, disabled: readOnly });
  const intoDrop = useDroppable({ id: `into:${id}`, disabled: readOnly });
  const afterDrop = useDroppable({ id: `after:${id}`, disabled: readOnly });

  function commitTitle() {
    setEditingTitle(false);
    const trimmed = titleDraft.trim();
    if (trimmed !== keyPoint.pointTitle) {
      onChange({ ...keyPoint, pointTitle: trimmed });
    }
  }
  function updateSubPoint(i: number, value: string) {
    const next = [...keyPoint.subPoints];
    next[i] = value;
    onChange({ ...keyPoint, subPoints: next });
  }
  function removeSubPoint(i: number) {
    onChange({ ...keyPoint, subPoints: keyPoint.subPoints.filter((_, idx) => idx !== i) });
  }
  function addSubPoint() {
    onChange({ ...keyPoint, subPoints: [...keyPoint.subPoints, ''] });
    setExpanded(true);
  }

  return (
    <div
      ref={setDragRef}
      {...attributes}
      className={cn(
        'relative rounded border border-border/40 transition-colors duration-150',
        isDragging && 'opacity-40 border-blue-300',
        intoDrop.isOver ? 'ring-2 ring-blue-400 ring-inset bg-blue-50/40 dark:bg-blue-950/30' : 'bg-muted/10',
      )}
    >
      <div ref={beforeDrop.setNodeRef} className="absolute top-0 inset-x-0 h-2 z-20 pointer-events-none" />
      {beforeDrop.isOver && <DropLine position="top" />}

      <div ref={intoDrop.setNodeRef}>
        {/* 小节头 */}
        <div className="flex items-center gap-1.5 px-2 py-1.5">
          {!readOnly && (
            <button
              type="button"
              {...listeners}
              className="shrink-0 cursor-grab active:cursor-grabbing touch-none p-0.5 -m-0.5 text-muted-foreground/30 hover:text-muted-foreground"
              aria-label="拖动排序小节"
              title={DRAG_HINT}
            >
              <GripVertical className="size-3" />
            </button>
          )}
          <button
            type="button"
            onClick={() => setExpanded((v) => !v)}
            className="shrink-0"
            aria-label="展开/收起子要点"
          >
            <ChevronRight
              className={cn(
                'size-3 text-muted-foreground/60 transition-transform duration-200',
                expanded && 'rotate-90',
              )}
            />
          </button>

          <span className="text-purple-500/70 shrink-0">###</span>

          {editingTitle && !readOnly ? (
            <input
              autoFocus
              value={titleDraft}
              onChange={(e) => setTitleDraft(e.target.value)}
              onBlur={commitTitle}
              onKeyDown={(e) => {
                if (e.key === 'Enter') commitTitle();
                if (e.key === 'Escape') { setTitleDraft(keyPoint.pointTitle); setEditingTitle(false); }
              }}
              className="flex-1 bg-transparent border-b border-primary outline-none"
              placeholder="小节标题"
            />
          ) : (
            <span
              className={cn('flex-1', !readOnly && 'cursor-text hover:text-primary')}
              onClick={() => !readOnly && setEditingTitle(true)}
            >
              {keyPoint.pointTitle || <span className="text-muted-foreground italic">（未命名小节）</span>}
            </span>
          )}

          <span className="text-muted-foreground/40 shrink-0 text-[10px]">
            {keyPoint.subPoints.length > 0 ? `${keyPoint.subPoints.length} 子要点` : '无子要点'}
          </span>
          {!readOnly && onRemove && (
            <button
              type="button"
              onClick={onRemove}
              className="shrink-0 text-muted-foreground/40 hover:text-destructive"
              aria-label="删除小节"
            >
              <X className="size-3" />
            </button>
          )}
        </div>

        {/* 子要点 (Level 3) */}
        <CollapseTransition open={expanded}>
          <div className="px-6 pb-1.5 space-y-0.5 border-t border-border/30 bg-background/40">
            {keyPoint.subPoints.map((sp, i) => (
              <SubPointRow
                key={i}
                value={sp}
                sectionIndex={sectionIndex}
                keyPointIndex={keyPointIndex}
                subPointIndex={i}
                onChange={(value) => updateSubPoint(i, value)}
                onRemove={readOnly ? undefined : () => removeSubPoint(i)}
                readOnly={readOnly}
              />
            ))}
            {!readOnly && (
              <button
                type="button"
                onClick={addSubPoint}
                className="flex items-center gap-1 text-muted-foreground/50 hover:text-primary pt-0.5 text-[11px]"
              >
                <Plus className="size-3" />
                添加子要点
              </button>
            )}
          </div>
        </CollapseTransition>
      </div>

      <div ref={afterDrop.setNodeRef} className="absolute bottom-0 inset-x-0 h-2 z-20 pointer-events-none" />
      {afterDrop.isOver && <DropLine position="bottom" />}
    </div>
  );
}

// ─── 子要点 (Level 3，叶节点，无 into) ────────────────────────────────────────
interface SubPointRowProps {
  value: string;
  sectionIndex: number;
  keyPointIndex: number;
  subPointIndex: number;
  onChange: (value: string) => void;
  onRemove?: () => void;
  readOnly?: boolean;
}

function SubPointRow({
  value, sectionIndex, keyPointIndex, subPointIndex, onChange, onRemove, readOnly,
}: SubPointRowProps) {
  const id = `s${sectionIndex}-k${keyPointIndex}-p${subPointIndex}`;
  const { attributes, listeners, setNodeRef: setDragRef, isDragging } = useDraggable({
    id, disabled: readOnly,
  });
  // 叶节点：没有 into；顶半区 = before、底半区 = after，把整行高度铺满
  const beforeDrop = useDroppable({ id: `before:${id}`, disabled: readOnly });
  const afterDrop = useDroppable({ id: `after:${id}`, disabled: readOnly });

  return (
    <div
      ref={setDragRef}
      {...attributes}
      className={cn(
        'relative flex items-center gap-1.5 pt-1 rounded transition-colors duration-150',
        isDragging && 'opacity-40',
      )}
    >
      <div
        ref={beforeDrop.setNodeRef}
        className="absolute left-0 right-0 top-0 bottom-1/2 z-20 pointer-events-none"
      />
      {beforeDrop.isOver && <DropLine position="top" thin />}

      {!readOnly && (
        <button
          type="button"
          {...listeners}
          className="shrink-0 cursor-grab active:cursor-grabbing touch-none p-0.5 -m-0.5 text-muted-foreground/30 hover:text-muted-foreground"
          aria-label="拖动排序子要点"
          title={DRAG_HINT_LEAF}
        >
          <GripVertical className="size-2.5" />
        </button>
      )}
      <span className="text-pink-500/70 shrink-0 text-[10px] font-mono">####</span>
      {readOnly ? (
        <span className="flex-1 text-muted-foreground">{value}</span>
      ) : (
        <input
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="子要点标题(会展开成一段正文)"
          className="flex-1 bg-transparent border-b border-transparent hover:border-border focus:border-primary outline-none text-muted-foreground"
        />
      )}
      {!readOnly && onRemove && (
        <button
          type="button"
          onClick={onRemove}
          className="shrink-0 text-muted-foreground/30 hover:text-destructive"
          aria-label="删除子要点"
        >
          <X className="size-3" />
        </button>
      )}

      <div
        ref={afterDrop.setNodeRef}
        className="absolute left-0 right-0 top-1/2 bottom-0 z-20 pointer-events-none"
      />
      {afterDrop.isOver && <DropLine position="bottom" thin />}
    </div>
  );
}

// ─── 蓝色插入指示线 ───────────────────────────────────────────────────────────
function DropLine({ position, thin }: { position: 'top' | 'bottom'; thin?: boolean }) {
  return (
    <div
      className={cn(
        'absolute inset-x-1 bg-blue-500 rounded-full z-30 pointer-events-none',
        thin ? 'h-[2px]' : 'h-[3px]',
        position === 'top' ? '-top-px' : '-bottom-px',
      )}
    />
  );
}