'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { ChevronLeft, ChevronRight, Calendar, LayoutGrid, List,
         RefreshCw, Filter, Clock, CheckCircle2, XCircle,
         FileText, AlertCircle } from 'lucide-react';

// ── Константы ─────────────────────────────────────────────────────────────────

const WEEKDAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
const MONTHS   = ['Январь','Февраль','Март','Апрель','Май','Июнь',
                  'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];

const STATUS_META = {
  draft:     { label: 'Черновик',    color: 'bg-zinc-500/15 text-zinc-400 border-zinc-500/30',   dot: 'bg-zinc-400'    },
  scheduled: { label: 'Запланирован',color: 'bg-blue-500/15 text-blue-400 border-blue-500/30',   dot: 'bg-blue-400'    },
  published: { label: 'Опубликован', color: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30', dot: 'bg-emerald-400' },
  failed:    { label: 'Ошибка',      color: 'bg-red-500/15 text-red-400 border-red-500/30',       dot: 'bg-red-400'     },
  pending:   { label: 'Запланирован',color: 'bg-blue-500/15 text-blue-400 border-blue-500/30',   dot: 'bg-blue-400'    },
};

const SOURCE_LABEL = { user_post: 'Пост', scheduled_post: 'Авто' };

// ── Утилиты ───────────────────────────────────────────────────────────────────

function startOfWeek(date) {
  const d = new Date(date);
  const day = d.getDay(); // 0=вс
  const diff = day === 0 ? -6 : 1 - day; // делаем пн первым
  d.setDate(d.getDate() + diff);
  d.setHours(0, 0, 0, 0);
  return d;
}

function addDays(date, n) {
  const d = new Date(date);
  d.setDate(d.getDate() + n);
  return d;
}

function sameDay(a, b) {
  return a.getFullYear() === b.getFullYear() &&
         a.getMonth()    === b.getMonth()    &&
         a.getDate()     === b.getDate();
}

function formatTime(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.toLocaleTimeString('ru', { hour: '2-digit', minute: '2-digit' });
}

function formatDate(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.toLocaleDateString('ru', { day: 'numeric', month: 'short' });
}

function isoDay(date) {
  return date.toISOString().slice(0, 10);
}

// ── EventCard ────────────────────────────────────────────────────────────────

function EventCard({ event, compact = false, draggable = false, onDragStart }) {
  const meta = STATUS_META[event.status] || STATUS_META.draft;

  return (
    <div
      draggable={draggable && event.editable}
      onDragStart={draggable ? (e) => onDragStart(e, event) : undefined}
      className={`
        group rounded-md border px-2 py-1 text-xs cursor-default select-none
        transition-opacity hover:opacity-90
        ${meta.color}
        ${draggable && event.editable ? 'cursor-grab active:cursor-grabbing' : ''}
        ${compact ? 'truncate' : ''}
      `}
      title={event.title || event.preview || ''}
    >
      <div className="flex items-center gap-1 min-w-0">
        <span className={`shrink-0 w-1.5 h-1.5 rounded-full ${meta.dot}`} />
        {event.scheduled_at && (
          <span className="shrink-0 opacity-70">{formatTime(event.scheduled_at)}</span>
        )}
        <span className="truncate font-medium">
          {event.title || event.preview?.slice(0, 60) || '—'}
        </span>
        {!compact && (
          <span className="shrink-0 ml-auto opacity-50 text-[10px]">
            {SOURCE_LABEL[event.source] || ''}
          </span>
        )}
      </div>
    </div>
  );
}

// ── DayCell ───────────────────────────────────────────────────────────────────

function DayCell({ date, events, isToday, isCurrentMonth, onDrop, onDragOver, onDragStart }) {
  const MAX_VISIBLE = 3;
  const visible = events.slice(0, MAX_VISIBLE);
  const hidden  = events.length - MAX_VISIBLE;

  return (
    <div
      className={`
        min-h-[90px] p-1.5 rounded-lg border transition-colors
        ${isCurrentMonth ? 'bg-surface border-border' : 'bg-transparent border-transparent opacity-40'}
        ${isToday ? 'ring-1 ring-accent/60' : ''}
      `}
      onDragOver={onDragOver}
      onDrop={(e) => onDrop(e, date)}
    >
      <div className={`text-xs font-semibold mb-1 w-6 h-6 flex items-center justify-center rounded-full
        ${isToday ? 'bg-accent text-white' : 'text-text-soft'}`}>
        {date.getDate()}
      </div>
      <div className="flex flex-col gap-0.5">
        {visible.map(ev => (
          <EventCard key={ev.id} event={ev} compact draggable onDragStart={onDragStart} />
        ))}
        {hidden > 0 && (
          <div className="text-[10px] text-text-mute pl-1">+{hidden} ещё</div>
        )}
      </div>
    </div>
  );
}

// ── MonthGrid ─────────────────────────────────────────────────────────────────

function MonthGrid({ year, month, eventsByDay, onDrop, onDragOver, onDragStart }) {
  const today    = new Date();
  const firstDay = new Date(year, month, 1);
  const lastDay  = new Date(year, month + 1, 0);

  // Заполняем сетку: пн первый день недели
  const startPad = ((firstDay.getDay() + 6) % 7); // смещение от пн
  const totalCells = Math.ceil((startPad + lastDay.getDate()) / 7) * 7;

  const cells = [];
  for (let i = 0; i < totalCells; i++) {
    const d = new Date(year, month, 1 - startPad + i);
    cells.push(d);
  }

  return (
    <div>
      <div className="grid grid-cols-7 mb-1">
        {WEEKDAYS.map(w => (
          <div key={w} className="text-center text-xs font-medium text-text-mute py-1">{w}</div>
        ))}
      </div>
      <div className="grid grid-cols-7 gap-1">
        {cells.map((d, i) => (
          <DayCell
            key={i}
            date={d}
            events={eventsByDay[isoDay(d)] || []}
            isToday={sameDay(d, today)}
            isCurrentMonth={d.getMonth() === month}
            onDrop={onDrop}
            onDragOver={onDragOver}
            onDragStart={onDragStart}
          />
        ))}
      </div>
    </div>
  );
}

// ── WeekGrid ──────────────────────────────────────────────────────────────────

function WeekGrid({ weekStart, eventsByDay, onDrop, onDragOver, onDragStart }) {
  const today = new Date();
  const days  = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));

  return (
    <div className="grid grid-cols-7 gap-2">
      {days.map((d, i) => {
        const dayEvents = eventsByDay[isoDay(d)] || [];
        return (
          <div key={i}
            className={`min-h-[200px] rounded-xl border p-2
              ${sameDay(d, today) ? 'ring-1 ring-accent/60 border-accent/30' : 'border-border'}
              bg-surface`}
            onDragOver={onDragOver}
            onDrop={(e) => onDrop(e, d)}
          >
            <div className={`text-xs font-semibold mb-2 text-center w-7 h-7 mx-auto
              flex items-center justify-center rounded-full
              ${sameDay(d, today) ? 'bg-accent text-white' : 'text-text-soft'}`}>
              {d.getDate()}
            </div>
            <div className="text-[10px] text-text-mute text-center mb-2">
              {WEEKDAYS[i]}
            </div>
            <div className="flex flex-col gap-1">
              {dayEvents.map(ev => (
                <EventCard key={ev.id} event={ev} draggable onDragStart={onDragStart} />
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ── ListView ──────────────────────────────────────────────────────────────────

function ListView({ events }) {
  if (!events.length) {
    return (
      <div className="card p-12 text-center text-text-mute">
        <Calendar className="w-8 h-8 mx-auto mb-3 opacity-30" />
        <p>Нет событий в выбранном периоде</p>
      </div>
    );
  }

  // Группируем по дням
  const groups = {};
  for (const ev of events) {
    const key = isoDay(new Date(ev.date));
    if (!groups[key]) groups[key] = [];
    groups[key].push(ev);
  }

  return (
    <div className="flex flex-col gap-4">
      {Object.entries(groups).sort().map(([day, evs]) => {
        const d = new Date(day);
        const today = new Date();
        const isToday = sameDay(d, today);
        return (
          <div key={day}>
            <div className={`text-sm font-semibold mb-2 ${isToday ? 'text-accent' : 'text-text-soft'}`}>
              {isToday ? 'Сегодня' : d.toLocaleDateString('ru', { weekday: 'long', day: 'numeric', month: 'long' })}
            </div>
            <div className="flex flex-col gap-2">
              {evs.map(ev => {
                const meta = STATUS_META[ev.status] || STATUS_META.draft;
                return (
                  <div key={ev.id} className="card p-3 flex items-start gap-3">
                    <div className={`mt-1 w-2 h-2 rounded-full shrink-0 ${meta.dot}`} />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <span className="font-medium text-sm truncate">
                          {ev.title || ev.preview?.slice(0, 80) || '—'}
                        </span>
                        <span className={`text-xs px-2 py-0.5 rounded-full border ${meta.color}`}>
                          {meta.label}
                        </span>
                        <span className="text-xs text-text-mute">
                          {SOURCE_LABEL[ev.source]}
                        </span>
                      </div>
                      <div className="flex items-center gap-3 mt-1 text-xs text-text-mute">
                        <span>{ev.channel_name}</span>
                        {ev.scheduled_at && (
                          <span className="flex items-center gap-1">
                            <Clock className="w-3 h-3" />
                            {formatTime(ev.scheduled_at)}
                          </span>
                        )}
                        {ev.error && (
                          <span className="text-red-400 flex items-center gap-1">
                            <AlertCircle className="w-3 h-3" />
                            {ev.error.slice(0, 60)}
                          </span>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ── Legend ────────────────────────────────────────────────────────────────────

function Legend() {
  const items = [
    { status: 'draft',     Icon: FileText       },
    { status: 'scheduled', Icon: Clock          },
    { status: 'published', Icon: CheckCircle2   },
    { status: 'failed',    Icon: XCircle        },
  ];
  return (
    <div className="flex items-center gap-3 flex-wrap">
      {items.map(({ status, Icon }) => {
        const m = STATUS_META[status];
        return (
          <div key={status} className="flex items-center gap-1.5 text-xs text-text-soft">
            <span className={`w-2 h-2 rounded-full ${m.dot}`} />
            {m.label}
          </div>
        );
      })}
    </div>
  );
}

// ── Главный компонент ─────────────────────────────────────────────────────────

export default function CalendarView({ channels }) {
  const today = new Date();

  const [view, setView]               = useState('month'); // month | week | list
  const [currentDate, setCurrentDate] = useState(today);
  const [channelFilter, setChannelFilter] = useState('');
  const [events, setEvents]           = useState([]);
  const [loading, setLoading]         = useState(false);
  const [error, setError]             = useState('');
  const dragRef                       = useRef(null); // перетаскиваемое событие

  // Вычисляем диапазон для запроса
  const getRange = useCallback(() => {
    if (view === 'week') {
      const ws = startOfWeek(currentDate);
      return {
        from: isoDay(ws),
        to:   isoDay(addDays(ws, 6)),
      };
    }
    // month и list — показываем текущий + соседние
    return {
      from: isoDay(new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)),
      to:   isoDay(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)),
    };
  }, [view, currentDate]);

  const fetchEvents = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const range = getRange();
      const qs = new URLSearchParams(range);
      if (channelFilter) qs.set('channel_id', channelFilter);
      const res = await fetch(`/api/calendar?${qs}`);
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Ошибка загрузки');
      setEvents(data.events || []);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }, [getRange, channelFilter]);

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

  // Группировка по дням для grid-видов
  const eventsByDay = {};
  for (const ev of events) {
    const key = isoDay(new Date(ev.date));
    if (!eventsByDay[key]) eventsByDay[key] = [];
    eventsByDay[key].push(ev);
  }

  // ── Навигация ──────────────────────────────────────────────────────────────

  function navigate(dir) {
    const d = new Date(currentDate);
    if (view === 'week') {
      d.setDate(d.getDate() + dir * 7);
    } else {
      d.setMonth(d.getMonth() + dir);
    }
    setCurrentDate(d);
  }

  function goToday() { setCurrentDate(new Date()); }

  function headerLabel() {
    if (view === 'week') {
      const ws = startOfWeek(currentDate);
      const we = addDays(ws, 6);
      return `${ws.getDate()} — ${we.getDate()} ${MONTHS[we.getMonth()]} ${we.getFullYear()}`;
    }
    return `${MONTHS[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
  }

  // ── Drag & drop ────────────────────────────────────────────────────────────

  function handleDragStart(e, event) {
    dragRef.current = event;
    e.dataTransfer.effectAllowed = 'move';
  }

  function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  }

  async function handleDrop(e, targetDate) {
    e.preventDefault();
    const ev = dragRef.current;
    dragRef.current = null;
    if (!ev) return;
    if (!ev.editable || ev.source !== 'user_post') return;

    // Берём время из оригинального scheduled_at, меняем только дату
    const orig = ev.scheduled_at ? new Date(ev.scheduled_at) : new Date();
    const newDt = new Date(targetDate);
    newDt.setHours(orig.getHours(), orig.getMinutes(), 0, 0);

    // Оптимистичное обновление
    setEvents(prev => prev.map(e2 =>
      e2.id === ev.id ? { ...e2, scheduled_at: newDt.toISOString(), date: newDt.toISOString() } : e2
    ));

    try {
      const res = await fetch('/api/calendar', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: ev.source_id, scheduled_at: newDt.toISOString() }),
      });
      if (!res.ok) {
        const d = await res.json();
        throw new Error(d.error || 'Ошибка переноса');
      }
    } catch (err) {
      alert(`Не удалось перенести: ${err.message}`);
      fetchEvents(); // откатываем
    }
  }

  // ── Рендер ────────────────────────────────────────────────────────────────

  const viewBtns = [
    { id: 'month', Icon: LayoutGrid, label: 'Месяц' },
    { id: 'week',  Icon: Calendar,   label: 'Неделя' },
    { id: 'list',  Icon: List,       label: 'Список' },
  ];

  return (
    <div className="flex flex-col gap-4">

      {/* ── Тулбар ── */}
      <div className="flex flex-wrap items-center gap-3">

        {/* Навигация */}
        <div className="flex items-center gap-1">
          <button onClick={() => navigate(-1)} className="btn-ghost p-2 rounded-lg">
            <ChevronLeft className="w-4 h-4" />
          </button>
          <button onClick={goToday} className="btn-ghost px-3 py-1.5 rounded-lg text-sm font-medium">
            Сегодня
          </button>
          <button onClick={() => navigate(1)} className="btn-ghost p-2 rounded-lg">
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>

        {/* Заголовок периода */}
        <h2 className="text-lg font-semibold flex-1 min-w-0">{headerLabel()}</h2>

        {/* Фильтр канала */}
        {channels.length > 0 && (
          <div className="flex items-center gap-1.5">
            <Filter className="w-3.5 h-3.5 text-text-mute" />
            <select
              className="input py-1.5 text-sm w-40"
              value={channelFilter}
              onChange={e => setChannelFilter(e.target.value)}
            >
              <option value="">Все каналы</option>
              {channels.map(ch => (
                <option key={ch.id} value={ch.id}>{ch.name}</option>
              ))}
            </select>
          </div>
        )}

        {/* Переключатель вида */}
        <div className="flex items-center gap-0.5 rounded-lg p-0.5 bg-surface2 border border-border">
          {viewBtns.map(({ id, Icon, label }) => (
            <button
              key={id}
              onClick={() => setView(id)}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                ${view === id ? 'bg-surface text-text shadow-sm' : 'text-text-soft hover:text-text'}`}
            >
              <Icon className="w-3.5 h-3.5" />
              <span className="hidden sm:inline">{label}</span>
            </button>
          ))}
        </div>

        {/* Обновить */}
        <button onClick={fetchEvents} className="btn-ghost p-2 rounded-lg" title="Обновить">
          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
        </button>
      </div>

      {/* Легенда */}
      <div className="flex items-center justify-between flex-wrap gap-2">
        <Legend />
        {events.length > 0 && (
          <span className="text-xs text-text-mute">{events.length} событий</span>
        )}
      </div>

      {/* Ошибка */}
      {error && (
        <div className="card p-3 text-sm text-red-400 flex items-center gap-2">
          <AlertCircle className="w-4 h-4 shrink-0" />
          {error}
        </div>
      )}

      {/* Скелетон загрузки */}
      {loading && events.length === 0 && (
        <div className="card p-8 text-center text-text-mute animate-pulse">
          Загружаю события…
        </div>
      )}

      {/* Контент */}
      {!loading || events.length > 0 ? (
        <>
          {view === 'month' && (
            <MonthGrid
              year={currentDate.getFullYear()}
              month={currentDate.getMonth()}
              eventsByDay={eventsByDay}
              onDrop={handleDrop}
              onDragOver={handleDragOver}
              onDragStart={handleDragStart}
            />
          )}
          {view === 'week' && (
            <WeekGrid
              weekStart={startOfWeek(currentDate)}
              eventsByDay={eventsByDay}
              onDrop={handleDrop}
              onDragOver={handleDragOver}
              onDragStart={handleDragStart}
            />
          )}
          {view === 'list' && <ListView events={events} />}
        </>
      ) : null}

      {/* Подсказка про drag & drop */}
      {(view === 'month' || view === 'week') && (
        <p className="text-xs text-text-mute text-center">
          Перетащи карточку пользовательского поста на другую дату, чтобы перенести его
        </p>
      )}
    </div>
  );
}