import { useState } from 'react';
import { DndContext, closestCorners, DragOverlay, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { useOutletContext } from 'react-router-dom';
import { useOrders } from './useOrders';
import { useAuth } from '../auth/useAuth';
import { useIsMobile } from '../../hooks/useIsMobile';
import KanbanColumn from './KanbanColumn';
import OrderCard from './OrderCard';
import OrderModal from './OrderModal';

const STATUSES = ['новая', 'замер', 'согласование', 'монтаж', 'закрыт'];

function KanbanFilters({ filters, orders, onChange }) {
  const managers = [...new Set(orders.map((o) => o.assigned_to).filter(Boolean))].sort();
  const objectTypes = {
    industrial: 'Промышленный',
    commercial: 'Коммерческий',
    infrastructure: 'Инфраструктура',
    residential: 'Частный',
    other: 'Другое',
  };

  const hasFilters = filters.manager || filters.objectType || filters.overdueOnly;

  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: '10px',
      flexWrap: 'wrap', marginBottom: '16px',
    }}>
      {/* Manager filter */}
      <select
        value={filters.manager}
        onChange={(e) => onChange({ ...filters, manager: e.target.value })}
        style={{
          padding: '7px 12px', borderRadius: '8px', fontSize: '0.85rem',
          border: filters.manager ? '1.5px solid #4361EE' : '1.5px solid #E9ECEF',
          background: '#fff', color: filters.manager ? '#4361EE' : '#8C9097',
          cursor: 'pointer', fontFamily: 'var(--font-body)', outline: 'none',
        }}
      >
        <option value="">Все менеджеры</option>
        {managers.map((m) => <option key={m} value={m}>{m}</option>)}
      </select>

      {/* Object type filter */}
      <select
        value={filters.objectType}
        onChange={(e) => onChange({ ...filters, objectType: e.target.value })}
        style={{
          padding: '7px 12px', borderRadius: '8px', fontSize: '0.85rem',
          border: filters.objectType ? '1.5px solid #4361EE' : '1.5px solid #E9ECEF',
          background: '#fff', color: filters.objectType ? '#4361EE' : '#8C9097',
          cursor: 'pointer', fontFamily: 'var(--font-body)', outline: 'none',
        }}
      >
        <option value="">Все типы</option>
        {Object.entries(objectTypes).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
      </select>

      {/* Overdue toggle */}
      <button
        onClick={() => onChange({ ...filters, overdueOnly: !filters.overdueOnly })}
        style={{
          padding: '7px 14px', borderRadius: '8px', fontSize: '0.85rem', fontWeight: 600,
          border: filters.overdueOnly ? '1.5px solid #ef4444' : '1.5px solid #E9ECEF',
          background: filters.overdueOnly ? '#fef2f2' : '#fff',
          color: filters.overdueOnly ? '#ef4444' : '#8C9097',
          cursor: 'pointer', fontFamily: 'var(--font-heading)',
        }}
      >
        ⚠ Просроченные
      </button>

      {/* Clear button */}
      {hasFilters && (
        <button
          onClick={() => onChange({ manager: '', objectType: '', overdueOnly: false })}
          style={{
            padding: '7px 12px', borderRadius: '8px', fontSize: '0.82rem',
            border: '1.5px solid #E9ECEF', background: '#fff',
            color: '#8C9097', cursor: 'pointer', fontFamily: 'var(--font-body)',
          }}
        >
          Сбросить
        </button>
      )}

      {hasFilters && (
        <span style={{ fontSize: '0.78rem', color: '#8C9097', marginLeft: '4px' }}>
          Фильтр активен
        </span>
      )}
    </div>
  );
}

const KanbanBoard = () => {
  const { orders, ordersByStatus, loading, updateStatus } = useOrders();
  const { session } = useAuth();
  const { showNewOrder, setShowNewOrder } = useOutletContext() || {};
  const isMobile = useIsMobile();
  const [activeOrder, setActiveOrder] = useState(null);
  const [selectedOrder, setSelectedOrder] = useState(null);

  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));

  const [localOverrides, setLocalOverrides] = useState({});
  const [filters, setFilters] = useState({ manager: '', objectType: '', overdueOnly: false });

  const findOrderStatus = (orderId) => {
    if (localOverrides[orderId]) return localOverrides[orderId];
    for (const status of STATUSES) {
      if (ordersByStatus[status]?.find((o) => o.id === orderId)) return status;
    }
    return null;
  };

  const handleDragStart = ({ active }) => {
    const status = findOrderStatus(active.id);
    if (status) setActiveOrder(ordersByStatus[status].find((o) => o.id === active.id) ||
      Object.values(ordersByStatus).flat().find((o) => o.id === active.id));
  };

  const handleDragEnd = async ({ active, over }) => {
    setActiveOrder(null);
    if (!over) return;

    const targetStatus = STATUSES.includes(over.id) ? over.id : findOrderStatus(over.id);
    const sourceStatus = findOrderStatus(active.id);

    if (targetStatus && sourceStatus !== targetStatus) {
      setLocalOverrides((prev) => ({ ...prev, [active.id]: targetStatus }));
      const { error } = await updateStatus(active.id, targetStatus, session?.user?.email);
      if (error) {
        console.error('Status update failed:', error);
        setLocalOverrides((prev) => {
          const next = { ...prev };
          delete next[active.id];
          return next;
        });
      } else {
        setLocalOverrides((prev) => {
          const next = { ...prev };
          delete next[active.id];
          return next;
        });
      }
    }
  };

  const effectiveOrdersByStatus = STATUSES.reduce((acc, status) => {
    acc[status] = (ordersByStatus[status] || []).filter(
      (o) => !localOverrides[o.id] || localOverrides[o.id] === status
    );
    // Add orders that were moved here optimistically
    const overrideOrders = Object.entries(localOverrides)
      .filter(([, s]) => s === status)
      .map(([id]) => Object.values(ordersByStatus).flat().find((o) => o.id === id))
      .filter(Boolean);
    acc[status] = [...acc[status], ...overrideOrders];
    return acc;
  }, {});

  const filteredOrdersByStatus = STATUSES.reduce((acc, status) => {
    acc[status] = (effectiveOrdersByStatus[status] || []).filter((o) => {
      if (filters.manager && o.assigned_to !== filters.manager) return false;
      if (filters.objectType && o.object_type !== filters.objectType) return false;
      if (filters.overdueOnly) {
        const overdue = o.scheduled_at && new Date(o.scheduled_at) < new Date() && o.status !== 'закрыт';
        if (!overdue) return false;
      }
      return true;
    });
    return acc;
  }, {});

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '60px', color: 'var(--text-muted)', fontFamily: 'var(--font-heading)' }}>
        Загрузка заказов...
      </div>
    );
  }

  return (
    <>
      <KanbanFilters filters={filters} orders={orders} onChange={setFilters} />
      <DndContext sensors={sensors} collisionDetection={closestCorners} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
        <div style={{
          display: 'flex',
          gap: '14px',
          alignItems: 'flex-start',
          overflowX: isMobile ? 'auto' : 'visible',
          WebkitOverflowScrolling: 'touch',
          paddingBottom: isMobile ? '12px' : '20px',
          minWidth: 'min-content',
        }}>
          {STATUSES.map((status) => (
            <KanbanColumn
              key={status}
              status={status}
              orders={filteredOrdersByStatus[status] || []}
              onCardClick={setSelectedOrder}
              isMobile={isMobile}
            />
          ))}
        </div>
        <DragOverlay>
          {activeOrder && <OrderCard order={activeOrder} onClick={() => {}} />}
        </DragOverlay>
      </DndContext>

      {selectedOrder && (
        <OrderModal
          order={selectedOrder}
          mode="edit"
          onClose={() => setSelectedOrder(null)}
          onSaved={() => setSelectedOrder(null)}
        />
      )}

      {showNewOrder && (
        <OrderModal
          order={null}
          mode="create"
          onClose={() => setShowNewOrder(false)}
          onSaved={() => setShowNewOrder(false)}
        />
      )}
    </>
  );
};

export default KanbanBoard;
