import React, { useEffect, useState } from 'react';
import {
  Check,
  CheckCircle2,
  Circle,
  Calendar,
  Trash2,
  RotateCcw,
  FileText,
  Tag,
  AlertCircle,
} from 'lucide-react';
import { Thought } from '../../lib/types';
import { api, triggerHaptic } from '../../lib/api';

interface TasksViewProps {
  onRefreshStats: () => void;
  onOpenDocument: (docId: string) => void;
}

export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocument }) => {
  const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open');
  const [tasks, setTasks] = useState<Thought[]>([]);
  const [discarded, setDiscarded] = useState<Thought[]>([]);
  const [loading, setLoading] = useState(true);

  const loadData = async () => {
    setLoading(true);
    try {
      const [allTasks, allDiscarded] = await Promise.all([
        api.getTasks(),
        api.getThoughts('discarded'),
      ]);
      setTasks(allTasks);
      setDiscarded(allDiscarded);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  const handleToggleDone = async (task: Thought) => {
    triggerHaptic(15);
    const nextState = !task.isCompleted;
    setTasks((prev) =>
      prev.map((t) => (t.id === task.id ? { ...t, isCompleted: nextState } : t))
    );
    await api.updateThought(task.id, { isCompleted: nextState });
    onRefreshStats();
  };

  const handleDueDateChange = async (task: Thought, newDate: string) => {
    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, dueDate: newDate } : t)));
    await api.updateThought(task.id, { dueDate: newDate });
  };

  const handleConvertToDoc = async (task: Thought) => {
    triggerHaptic(20);
    const updated = await api.triageAction(task.id, 'keep', { convertTo: 'document' });
    onRefreshStats();
    if (updated.convertedRefId) {
      onOpenDocument(updated.convertedRefId);
    } else {
      loadData();
    }
  };

  const handleRestore = async (item: Thought) => {
    triggerHaptic(15);
    await api.triageAction(item.id, 'restore');
    await loadData();
    onRefreshStats();
  };

  const handleDeletePermanent = async (id: string) => {
    triggerHaptic(20);
    await api.deleteThought(id);
    await loadData();
    onRefreshStats();
  };

  const handlePurgeAllDiscarded = async () => {
    await api.purgeDiscarded();
    await loadData();
    onRefreshStats();
  };

  const openTasks = tasks.filter((t) => !t.isCompleted);
  const doneTasks = tasks.filter((t) => t.isCompleted);

  return (
    <div className="max-w-3xl mx-auto space-y-4">
      {/* Filter Pills */}
      <div className="flex flex-wrap items-center justify-between gap-3 mb-2">
        <div className="flex items-center gap-1.5">
          <button
            onClick={() => setFilter('open')}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
              filter === 'open'
                ? 'bg-[#1d8cf8] text-white shadow-sm'
                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
            }`}
          >
            Alle Offenen ({openTasks.length})
          </button>

          <button
            onClick={() => setFilter('done')}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
              filter === 'done'
                ? 'bg-[#1d8cf8] text-white shadow-sm'
                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
            }`}
          >
            Erledigt ({doneTasks.length})
          </button>

          <button
            onClick={() => setFilter('discarded')}
            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-all ${
              filter === 'discarded'
                ? 'bg-[#1d8cf8] text-white shadow-sm'
                : 'text-zinc-400 hover:text-white hover:bg-[#222428]'
            }`}
          >
            Verworfen ({discarded.length})
          </button>
        </div>

        {filter === 'discarded' && discarded.length > 0 && (
          <button
            onClick={handlePurgeAllDiscarded}
            className="h-8 px-3.5 rounded-full bg-[#ef4444]/15 hover:bg-[#ef4444]/25 text-[#ef4444] text-xs font-medium flex items-center gap-1.5 transition-colors"
          >
            <Trash2 className="w-3.5 h-3.5" />
            Papierkorb leeren
          </button>
        )}
      </div>

      {loading ? (
        <div className="p-8 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
      ) : filter === 'discarded' ? (
        <div className="space-y-2.5">
          {discarded.length === 0 ? (
            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
              Keine verworfenen Gedanken im Papierkorb.
            </div>
          ) : (
            discarded.map((item) => (
              <div
                key={item.id}
                className="p-3.5 sm:p-4 rounded-2xl bg-[#222428] border border-white/[0.06] flex items-center justify-between gap-4"
              >
                <div className="flex items-center gap-3 min-w-0 flex-1">
                  <div className="w-9 h-9 rounded-xl bg-zinc-700 text-zinc-300 flex items-center justify-center flex-shrink-0">
                    <Trash2 className="w-4 h-4" />
                  </div>
                  <p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <button
                    onClick={() => handleRestore(item)}
                    className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
                  >
                    <RotateCcw className="w-3.5 h-3.5" /> Zurück
                  </button>
                  <button
                    onClick={() => handleDeletePermanent(item.id)}
                    className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
            ))
          )}
        </div>
      ) : (
        <div className="space-y-2.5">
          {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
            <div className="p-10 rounded-2xl bg-[#222428] border border-white/[0.06] text-center text-zinc-400 text-sm">
              {filter === 'open'
                ? 'Keine offenen Aufgaben vorhanden.'
                : 'Noch keine erledigten Aufgaben.'}
            </div>
          ) : (
            (filter === 'open' ? openTasks : doneTasks).map((task, idx) => {
              // Alternate squircle colors matching template: blue, green, purple, orange, violet
              const squircleColors = [
                'bg-[#1d8cf8]', // electric blue
                'bg-[#22c55e]', // vibrant green
                'bg-[#a855f7]', // purple
                'bg-[#f97316]', // orange
                'bg-[#8b5cf6]', // violet
              ];
              const squircleBg = task.priority === 'urgent'
                ? 'bg-[#ef4444]'
                : task.isCompleted
                ? 'bg-[#a855f7]'
                : squircleColors[idx % squircleColors.length];

              // In template: active/top items have a thin bright green outline
              const isHighlightGreen = !task.isCompleted && idx < 3;

              return (
                <div
                  key={task.id}
                  className={`p-3.5 sm:p-4 rounded-2xl bg-[#222428] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors ${
                    isHighlightGreen
                      ? 'border border-[#22c55e]/80 shadow-[0_0_12px_-4px_rgba(34,197,94,0.3)]'
                      : 'border border-white/[0.06]'
                  } ${task.isCompleted ? 'opacity-75' : ''}`}
                >
                  <div className="flex items-center gap-3.5 min-w-0 flex-1">
                    {/* Template Squircle Icon */}
                    <button
                      onClick={() => handleToggleDone(task)}
                      className={`w-10 h-10 rounded-xl ${squircleBg} text-white flex items-center justify-center flex-shrink-0 shadow-sm transition-transform active:scale-95`}
                      title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
                    >
                      {task.isCompleted ? (
                        <Check className="w-5 h-5 stroke-[2.5]" />
                      ) : task.priority === 'urgent' ? (
                        <AlertCircle className="w-5 h-5" />
                      ) : (
                        <CheckCircle2 className="w-5 h-5" />
                      )}
                    </button>

                    <div className="min-w-0 flex-1">
                      <p
                        className={`text-sm sm:text-base font-medium break-words leading-snug ${
                          task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
                        }`}
                      >
                        {task.content}
                      </p>

                      <div className="flex flex-wrap items-center gap-2 mt-1">
                        {task.priority === 'urgent' && (
                          <span className="px-2 py-0.5 rounded-full bg-[#ef4444]/20 text-[#ef4444] text-[11px] font-semibold">
                            Dringend
                          </span>
                        )}
                        {task.priority === 'high' && (
                          <span className="px-2 py-0.5 rounded-full bg-[#f97316]/20 text-[#f97316] text-[11px] font-semibold">
                            Wichtig
                          </span>
                        )}
                        {task.tags?.map((tag) => (
                          <span
                            key={tag}
                            className="px-2 py-0.5 rounded-full bg-[#16171a] text-zinc-400 text-[11px] flex items-center gap-1"
                          >
                            #{tag}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>

                  {/* Action Controls */}
                  <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
                    <div className="relative flex items-center">
                      <Calendar className="w-3.5 h-3.5 text-zinc-400 absolute left-3 pointer-events-none" />
                      <input
                        type="date"
                        value={task.dueDate || ''}
                        onChange={(e) => handleDueDateChange(task, e.target.value)}
                        className="pl-8 pr-3 py-1 rounded-full bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
                      />
                    </div>

                    <button
                      onClick={() => handleConvertToDoc(task)}
                      title="Als Notiz / Projekt vertiefen"
                      className="h-8 px-3 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
                    >
                      <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
                      <span className="hidden md:inline">Vertiefen</span>
                    </button>

                    <button
                      onClick={() => handleDeletePermanent(task.id)}
                      title="Löschen"
                      className="w-8 h-8 rounded-full bg-[#2b2d33] hover:bg-[#ef4444]/20 text-zinc-400 hover:text-[#ef4444] flex items-center justify-center transition-colors"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </div>
              );
            })
          )}
        </div>
      )}
    </div>
  );
};