import React, { useState, useEffect } from 'react';
import {
  X,
  Check,
  Calendar,
  Trash2,
  FileText,
  Plus,
  CheckSquare,
  Clock,
  Layers,
  Hash,
  AlertTriangle,
  Flame,
  ChevronRight,
  Folder,
} from 'lucide-react';
import { Thought, SubTask, TaskList, KanbanColumn } from '../../lib/types';
import { triggerHaptic } from '../../lib/api';

interface TaskDetailModalProps {
  task: Thought | null;
  isOpen: boolean;
  onClose: () => void;
  activeColumns: KanbanColumn[];
  taskLists: TaskList[];
  onUpdateTitle: (task: Thought, newTitle: string) => Promise<void>;
  onUpdateStatus: (task: Thought, newStatus: string) => Promise<void>;
  onUpdatePriority: (task: Thought, newPriority: string) => Promise<void>;
  onUpdateDueDate: (task: Thought, newDueDate: string) => Promise<void>;
  onUpdateTaskList: (task: Thought, newListId: string) => Promise<void>;
  onUpdateNotes: (task: Thought, newNotes: string) => Promise<void>;
  onUpdateTags?: (task: Thought, newTags: string[]) => Promise<void>;
  onToggleSubtask: (task: Thought, subtaskId: string) => Promise<void>;
  onAddSubtask: (task: Thought, title: string) => Promise<void>;
  onDeleteSubtask: (task: Thought, subtaskId: string) => Promise<void>;
  onConvertToDoc: (task: Thought) => void;
  onDeleteTask: (taskId: string) => void;
}

export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
  task,
  isOpen,
  onClose,
  activeColumns,
  taskLists,
  onUpdateTitle,
  onUpdateStatus,
  onUpdatePriority,
  onUpdateDueDate,
  onUpdateTaskList,
  onUpdateNotes,
  onUpdateTags,
  onToggleSubtask,
  onAddSubtask,
  onDeleteSubtask,
  onConvertToDoc,
  onDeleteTask,
}) => {
  if (!isOpen || !task) return null;

  const [titleDraft, setTitleDraft] = useState(task.content);
  const [isEditingTitle, setIsEditingTitle] = useState(false);

  const [isEditingNotes, setIsEditingNotes] = useState(false);
  const [notesDraft, setNotesDraft] = useState(task.notes || '');

  const [newSubtaskTitle, setNewSubtaskTitle] = useState('');
  const [newTagDraft, setNewTagDraft] = useState('');

  useEffect(() => {
    setTitleDraft(task.content);
    setNotesDraft(task.notes || '');
    setIsEditingTitle(false);
    setIsEditingNotes(false);
  }, [task.id]);

  // Handle escape key to close
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        if (isEditingNotes) {
          setIsEditingNotes(false);
        } else if (isEditingTitle) {
          setIsEditingTitle(false);
        } else {
          onClose();
        }
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [onClose, isEditingNotes, isEditingTitle]);

  const handleTitleSubmit = async () => {
    const trimmed = titleDraft.trim();
    if (!trimmed) {
      setTitleDraft(task.content);
      setIsEditingTitle(false);
      return;
    }
    if (trimmed !== task.content) {
      await onUpdateTitle(task, trimmed);
    }
    setIsEditingTitle(false);
  };

  const handleNotesSubmit = async () => {
    await onUpdateNotes(task, notesDraft);
    setIsEditingNotes(false);
  };

  const handleAddSubtaskSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = newSubtaskTitle.trim();
    if (!trimmed) return;
    await onAddSubtask(task, trimmed);
    setNewSubtaskTitle('');
  };

  const handleAddTagSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    let cleaned = newTagDraft.trim().replace(/^#+/, '').toLowerCase();
    if (!cleaned) return;
    const currentTags = Array.isArray(task.tags) ? [...task.tags] : [];
    if (!currentTags.includes(cleaned)) {
      const updated = [...currentTags, cleaned];
      if (onUpdateTags) {
        await onUpdateTags(task, updated);
      } else {
        await onUpdateTitle(task, `${task.content} #${cleaned}`);
      }
    }
    setNewTagDraft('');
  };

  const handleRemoveTag = async (tagToRemove: string) => {
    const currentTags = Array.isArray(task.tags) ? [...task.tags] : [];
    const updated = currentTags.filter((t) => t !== tagToRemove);
    if (onUpdateTags) {
      await onUpdateTags(task, updated);
    }
  };

  const handleQuickDueDate = (daysOffset: number | null) => {
    if (daysOffset === null) {
      onUpdateDueDate(task, '');
      return;
    }
    const d = new Date();
    d.setDate(d.getDate() + daysOffset);
    const dateStr = d.toISOString().split('T')[0];
    onUpdateDueDate(task, dateStr);
  };

  const currentColumn = activeColumns.find((c) => c.id === task.kanbanStatus) ||
    (task.isCompleted
      ? activeColumns.find((c) => c.isDone) || activeColumns[activeColumns.length - 1]
      : activeColumns.find((c) => !c.isDone) || activeColumns[0]);

  const subtasks = Array.isArray(task.subtasks) ? task.subtasks : [];
  const completedSubtasks = subtasks.filter((s) => s.isCompleted).length;
  const subtasksPercent = subtasks.length > 0 ? Math.round((completedSubtasks / subtasks.length) * 100) : 0;

  return (
    <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
      <div
        className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Top Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-panel">
          <div className="flex items-center gap-2 min-w-0">
            <button
              onClick={() => {
                triggerHaptic(15);
                const nextState = !task.isCompleted;
                const doneCol = activeColumns.find((c) => c.isDone) || activeColumns[activeColumns.length - 1];
                const todoCol = activeColumns.find((c) => !c.isDone) || activeColumns[0];
                const nextKanban = nextState ? (doneCol ? doneCol.id : 'done') : (todoCol ? todoCol.id : 'todo');
                onUpdateStatus(task, nextKanban);
              }}
              className={`w-5 h-5 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
                task.isCompleted
                  ? 'bg-status-ok border-status-ok text-on-accent'
                  : 'border-strong hover:border-accent text-transparent'
              }`}
              title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt markieren'}
            >
              <Check className="w-3.5 h-3.5 stroke-[3]" />
            </button>
            <span className="text-xs font-semibold text-main truncate">
              {task.isCompleted ? 'Erledigte Aufgabe' : 'Aufgabe bearbeiten'}
            </span>
          </div>

          <div className="flex items-center gap-1.5">
            <button
              type="button"
              onClick={() => {
                onClose();
                onConvertToDoc(task);
              }}
              title="Als Dokument / Notiz vertiefen"
              className="btn-action min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5"
            >
              <FileText className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-accent" />
              <span className="hidden sm:inline">Als Notiz vertiefen</span>
            </button>
            <button
              type="button"
              onClick={() => {
                if (window.confirm('Möchten Sie diese Aufgabe wirklich löschen?')) {
                  onClose();
                  onDeleteTask(task.id);
                }
              }}
              title="Aufgabe löschen"
              className="btn-action min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs text-status-err border-status-err/30 hover:bg-status-err/10 flex items-center gap-1"
            >
              <Trash2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
              <span className="sm:hidden font-medium">Löschen</span>
            </button>
            <button
              type="button"
              onClick={onClose}
              className="text-muted hover:text-main p-2 sm:p-1.5 min-h-[38px] min-w-[38px] sm:min-h-0 sm:min-w-0 flex items-center justify-center transition-colors"
              title="Schließen"
            >
              <X className="w-5 h-5 sm:w-4 sm:h-4" />
            </button>
          </div>
        </div>

        {/* Scrollable Body */}
        <div className="p-4 overflow-y-auto space-y-4 flex-1">
          {/* Task Title */}
          <div>
            {isEditingTitle ? (
              <div className="space-y-2">
                <textarea
                  value={titleDraft}
                  onChange={(e) => setTitleDraft(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleTitleSubmit();
                    } else if (e.key === 'Escape') {
                      setIsEditingTitle(false);
                      setTitleDraft(task.content);
                    }
                  }}
                  autoFocus
                  rows={2}
                  className="w-full text-base font-semibold input-field p-2.5 resize-none leading-snug"
                />
                <div className="flex justify-end gap-1.5">
                  <button
                    type="button"
                    onClick={() => {
                      setIsEditingTitle(false);
                      setTitleDraft(task.content);
                    }}
                    className="btn-action h-7 px-2.5 text-xs"
                  >
                    Abbrechen
                  </button>
                  <button
                    type="button"
                    onClick={handleTitleSubmit}
                    className="btn-primary h-7 px-3 text-xs"
                  >
                    Speichern
                  </button>
                </div>
              </div>
            ) : (
              <div
                onClick={() => setIsEditingTitle(true)}
                className="group cursor-pointer p-2 rounded-card hover:bg-panel transition-colors border border-transparent hover:border-border"
                title="Klicken zum Bearbeiten des Titels"
              >
                <h2
                  className={`text-base font-semibold break-words leading-snug ${
                    task.isCompleted ? 'line-through text-faint' : 'text-main'
                  }`}
                >
                  {task.content}
                </h2>
                <span className="text-[10px] text-muted opacity-0 group-hover:opacity-100 transition-opacity">
                  Klicken zum Umbenennen
                </span>
              </div>
            )}
          </div>

          {/* Kanban Status Buttons */}
          <div className="space-y-1.5 pt-1 border-t border-border">
            <label className="block text-xs font-semibold text-main">
              Zustand / Kanban-Status:
            </label>
            <div className="flex flex-wrap items-center gap-1.5">
              {activeColumns.map((col) => {
                const isActive = (task.kanbanStatus === col.id) || (!task.kanbanStatus && col.id === 'todo');
                return (
                  <button
                    key={col.id}
                    type="button"
                    onClick={() => {
                      triggerHaptic(10);
                      onUpdateStatus(task, col.id);
                    }}
                    className={`h-8 px-3 text-xs rounded-btn font-medium transition-all flex items-center gap-1.5 border ${
                      isActive
                        ? 'bg-panel border-accent text-accent font-semibold shadow-sm'
                        : 'bg-canvas border-border text-muted hover:text-main hover:border-strong'
                    }`}
                  >
                    <span
                      className={`w-2 h-2 rounded-full ${
                        col.isDone
                          ? 'bg-status-ok'
                          : col.id === 'in_progress'
                          ? 'bg-accent'
                          : col.id === 'waiting'
                          ? 'bg-status-warn'
                          : 'bg-faint'
                      }`}
                    />
                    <span>{col.name}</span>
                    {isActive && <Check className="w-3 h-3 text-accent stroke-[3] ml-0.5" />}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Priority Buttons */}
          <div className="space-y-1.5 pt-1 border-t border-border">
            <label className="block text-xs font-semibold text-main">
              Priorität:
            </label>
            <div className="flex flex-wrap items-center gap-1.5">
              <button
                type="button"
                onClick={() => onUpdatePriority(task, 'normal')}
                className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border ${
                  !task.priority || task.priority === 'normal' || task.priority === 'low'
                    ? 'bg-panel border-accent text-main font-semibold'
                    : 'bg-canvas border-border text-muted hover:text-main'
                }`}
              >
                Normal / Keine
              </button>
              <button
                type="button"
                onClick={() => onUpdatePriority(task, 'high')}
                className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
                  task.priority === 'high'
                    ? 'bg-status-warn/15 border-status-warn text-status-warn font-semibold'
                    : 'bg-canvas border-border text-muted hover:text-main'
                }`}
              >
                <AlertTriangle className="w-3 h-3 text-status-warn" />
                <span>Wichtig</span>
              </button>
              <button
                type="button"
                onClick={() => onUpdatePriority(task, 'urgent')}
                className={`h-7 px-3 text-xs rounded-btn font-medium transition-colors border flex items-center gap-1 ${
                  task.priority === 'urgent'
                    ? 'bg-status-err/15 border-status-err text-status-err font-semibold'
                    : 'bg-canvas border-border text-muted hover:text-main'
                }`}
              >
                <Flame className="w-3 h-3 text-status-err" />
                <span>Dringend</span>
              </button>
            </div>
          </div>

          {/* Due Date & List Selection Row */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1 border-t border-border">
            {/* Due Date */}
            <div className="space-y-1.5">
              <label className="block text-xs font-semibold text-main flex items-center gap-1">
                <Calendar className="w-3.5 h-3.5 text-accent" />
                <span>Fälligkeitsdatum:</span>
              </label>
              <div className="flex items-center gap-1.5">
                <input
                  type="date"
                  value={task.dueDate || ''}
                  onChange={(e) => onUpdateDueDate(task, e.target.value)}
                  className="flex-1 h-8 input-field px-2 text-xs bg-panel"
                />
                {task.dueDate && (
                  <button
                    type="button"
                    onClick={() => onUpdateDueDate(task, '')}
                    className="btn-action h-8 px-2 text-xs text-muted hover:text-status-err"
                    title="Datum entfernen"
                  >
                    <X className="w-3.5 h-3.5" />
                  </button>
                )}
              </div>
              <div className="flex flex-wrap gap-1 text-[10px]">
                <button
                  type="button"
                  onClick={() => handleQuickDueDate(0)}
                  className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-muted hover:text-main"
                >
                  Heute
                </button>
                <button
                  type="button"
                  onClick={() => handleQuickDueDate(1)}
                  className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-muted hover:text-main"
                >
                  Morgen
                </button>
                <button
                  type="button"
                  onClick={() => handleQuickDueDate(7)}
                  className="px-1.5 py-0.5 bg-canvas border border-border rounded-btn text-muted hover:text-main"
                >
                  +1 Woche
                </button>
              </div>
            </div>

            {/* Task List assignment */}
            <div className="space-y-1.5">
              <label className="block text-xs font-semibold text-main flex items-center gap-1">
                <Folder className="w-3.5 h-3.5 text-accent" />
                <span>Aufgabenliste:</span>
              </label>
              <select
                value={task.taskListId || ''}
                onChange={(e) => onUpdateTaskList(task, e.target.value)}
                className="w-full h-8 input-field px-2.5 text-xs bg-panel"
              >
                <option value="">-- Keine Liste (Allgemein) --</option>
                {taskLists.map((tl) => (
                  <option key={tl.id} value={tl.id}>
                    {tl.icon} {tl.title}
                  </option>
                ))}
              </select>
            </div>
          </div>

          {/* Hashtags Section */}
          <div className="space-y-1.5 pt-1 border-t border-border">
            <label className="block text-xs font-semibold text-main flex items-center gap-1">
              <Hash className="w-3.5 h-3.5 text-accent" />
              <span>Hashtags:</span>
            </label>
            <div className="flex flex-wrap items-center gap-1.5">
              {Array.isArray(task.tags) &&
                task.tags.map((tag) => (
                  <span
                    key={tag}
                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-pill bg-panel border border-border text-xs text-main"
                  >
                    <span>#{tag}</span>
                    <button
                      type="button"
                      onClick={() => handleRemoveTag(tag)}
                      className="text-muted hover:text-status-err"
                    >
                      <X className="w-3 h-3" />
                    </button>
                  </span>
                ))}
              <form onSubmit={handleAddTagSubmit} className="inline-flex items-center gap-1">
                <input
                  type="text"
                  value={newTagDraft}
                  onChange={(e) => setNewTagDraft(e.target.value)}
                  placeholder="+ #hashtag"
                  className="h-6 w-24 px-1.5 text-xs input-field"
                />
              </form>
            </div>
          </div>

          {/* Subtasks Checklist */}
          <div className="space-y-2 pt-1 border-t border-border">
            <div className="flex items-center justify-between">
              <label className="block text-xs font-semibold text-main flex items-center gap-1.5">
                <CheckSquare className="w-3.5 h-3.5 text-accent" />
                <span>Unteraufgaben ({completedSubtasks}/{subtasks.length}):</span>
              </label>
              {subtasks.length > 0 && (
                <span className="text-[11px] font-mono text-muted">{subtasksPercent}%</span>
              )}
            </div>

            {subtasks.length > 0 && (
              <div className="w-full h-1 bg-border rounded-full overflow-hidden">
                <div
                  className={`h-full transition-all duration-300 ${
                    subtasksPercent === 100 ? 'bg-status-ok' : 'bg-accent'
                  }`}
                  style={{ width: `${subtasksPercent}%` }}
                />
              </div>
            )}

            {/* Subtask items list */}
            {subtasks.length > 0 && (
              <div className="space-y-1 max-h-48 overflow-y-auto pr-1">
                {subtasks.map((st) => (
                  <div
                    key={st.id}
                    className="p-1.5 bg-canvas border border-border rounded-card flex items-center justify-between text-xs group"
                  >
                    <div className="flex items-center gap-2 min-w-0 flex-1">
                      <button
                        type="button"
                        onClick={() => onToggleSubtask(task, st.id)}
                        className={`w-3.5 h-3.5 checkbox-square flex items-center justify-center flex-shrink-0 transition-colors border ${
                          st.isCompleted
                            ? 'bg-status-ok border-status-ok text-on-accent'
                            : 'border-strong hover:border-accent text-transparent'
                        }`}
                      >
                        <Check className="w-2.5 h-2.5 stroke-[3]" />
                      </button>
                      <span
                        className={`truncate ${
                          st.isCompleted ? 'line-through text-faint' : 'text-main'
                        }`}
                      >
                        {st.title}
                      </span>
                    </div>
                    <button
                      type="button"
                      onClick={() => onDeleteSubtask(task, st.id)}
                      className="opacity-0 group-hover:opacity-100 text-faint hover:text-status-err p-0.5 transition-opacity"
                    >
                      <Trash2 className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
            )}

            {/* Inline add subtask form */}
            <form onSubmit={handleAddSubtaskSubmit} className="flex items-center gap-1.5">
              <input
                type="text"
                value={newSubtaskTitle}
                onChange={(e) => setNewSubtaskTitle(e.target.value)}
                placeholder="Neue Unteraufgabe hinzufügen…"
                className="flex-1 h-7 px-2 text-xs input-field"
              />
              <button
                type="submit"
                disabled={!newSubtaskTitle.trim()}
                className="btn-action h-7 px-2.5 text-xs disabled:opacity-40"
              >
                <Plus className="w-3 h-3" />
                <span>Hinzufügen</span>
              </button>
            </form>
          </div>

          {/* Notes Section */}
          <div className="space-y-2 pt-1 border-t border-border">
            <div className="flex items-center justify-between">
              <label className="block text-xs font-semibold text-main flex items-center gap-1.5">
                <FileText className="w-3.5 h-3.5 text-accent" />
                <span>Detailnotizen:</span>
              </label>
              {!isEditingNotes && task.notes && (
                <button
                  type="button"
                  onClick={() => {
                    setNotesDraft(task.notes || '');
                    setIsEditingNotes(true);
                  }}
                  className="text-[11px] text-accent hover:underline"
                >
                  Bearbeiten
                </button>
              )}
            </div>

            {isEditingNotes ? (
              <div className="space-y-2">
                <textarea
                  value={notesDraft}
                  onChange={(e) => setNotesDraft(e.target.value)}
                  placeholder="Detailnotizen eingeben… (Markdown unterstützt)"
                  rows={6}
                  autoFocus
                  className="w-full input-field p-2.5 text-xs font-mono leading-relaxed resize-y min-h-[100px]"
                />
                <div className="flex justify-end gap-1.5">
                  <button
                    type="button"
                    onClick={() => {
                      setIsEditingNotes(false);
                      setNotesDraft(task.notes || '');
                    }}
                    className="btn-action h-7 px-2.5 text-xs"
                  >
                    Abbrechen
                  </button>
                  <button
                    type="button"
                    onClick={handleNotesSubmit}
                    className="btn-primary h-7 px-3 text-xs"
                  >
                    Notiz speichern
                  </button>
                </div>
              </div>
            ) : task.notes ? (
              <div
                onClick={() => {
                  setNotesDraft(task.notes || '');
                  setIsEditingNotes(true);
                }}
                className="p-3 bg-canvas border border-border rounded-card text-xs text-muted leading-relaxed whitespace-pre-wrap cursor-pointer hover:border-strong transition-colors"
                title="Klicken zum Bearbeiten"
              >
                {task.notes}
              </div>
            ) : (
              <button
                type="button"
                onClick={() => {
                  setNotesDraft('');
                  setIsEditingNotes(true);
                }}
                className="w-full py-2.5 px-3 border border-dashed border-border rounded-card text-xs text-muted hover:text-main hover:bg-panel transition-colors text-left flex items-center gap-1.5"
              >
                <Plus className="w-3.5 h-3.5 text-accent" />
                <span>Detailnotiz hinzufügen…</span>
              </button>
            )}
          </div>
        </div>

        {/* Modal Footer */}
        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border bg-panel">
          <div className="text-[11px] text-faint">
            Erstellt: {new Date(task.createdAt).toLocaleDateString('de-DE')}
          </div>
          <button
            type="button"
            onClick={onClose}
            className="btn-action h-7 px-3 text-xs"
          >
            Fertig
          </button>
        </div>
      </div>
    </div>
  );
};