import { useState, useMemo } from 'react';
import { Plus, LayoutGrid, Table as TableIcon } from 'lucide-react';
import { DeliveryCard } from './DeliveryCard';
import { DeliveryRow } from './DeliveryRow';
import { Button } from '../ui/Button';
import type { Delivery } from '../../types';

interface DeliveryListProps {
  deliveries: Delivery[];
  onStatusChange: (id: string) => void;
  onEdit: (delivery: Delivery) => void;
  onDelete: (id: string) => void;
  onAdd: () => void;
  date: string;
}

export const DeliveryList = ({ deliveries, onStatusChange, onEdit, onDelete, onAdd, date }: DeliveryListProps) => {
  const [viewMode, setViewMode] = useState<'kanban' | 'table'>('kanban');

  const newDeliveries = useMemo(() => deliveries.filter(d => d.status === 'new'), [deliveries]);
  const deliveredDeliveries = useMemo(() => deliveries.filter(d => d.status === 'delivered'), [deliveries]);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-[#1b1b1d]">
          Доставки на {date}
        </h2>
        <div className="flex items-center gap-2">
          <div className="flex bg-[#f0edef] rounded-lg p-1">
            <button
              onClick={() => setViewMode('kanban')}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                viewMode === 'kanban' ? 'bg-white shadow-sm text-[#1b1b1d]' : 'text-[#75777d] hover:text-[#1b1b1d]'
              }`}
            >
              <LayoutGrid size={16} />
              <span className="hidden sm:inline">Канбан</span>
            </button>
            <button
              onClick={() => setViewMode('table')}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                viewMode === 'table' ? 'bg-white shadow-sm text-[#1b1b1d]' : 'text-[#75777d] hover:text-[#1b1b1d]'
              }`}
            >
              <TableIcon size={16} />
              <span className="hidden sm:inline">Таблица</span>
            </button>
          </div>
          <Button onClick={onAdd} size="sm">
            <Plus size={16} className="mr-1" />
            <span className="hidden sm:inline">Добавить</span>
          </Button>
        </div>
      </div>

      {deliveries.length === 0 ? (
        <div className="text-center py-12 bg-[#f5f3f5] rounded-lg">
          <p className="text-[#75777d]">Нет доставок на эту дату</p>
          <Button onClick={onAdd} variant="ghost" className="mt-2">
            Создать первую доставку
          </Button>
        </div>
      ) : viewMode === 'kanban' ? (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <h3 className="font-medium text-[#1b1b1d] flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-[#F28C28]"></span>
                Новые
                <span className="text-sm text-[#75777d] font-normal">({newDeliveries.length})</span>
              </h3>
            </div>
            <div className="space-y-3">
              {newDeliveries.map(delivery => (
                <DeliveryCard
                  key={delivery.id}
                  delivery={delivery}
                  onStatusChange={onStatusChange}
                  onEdit={onEdit}
                  onDelete={onDelete}
                />
              ))}
            </div>
          </div>

          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <h3 className="font-medium text-[#1b1b1d] flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-[#16a34a]"></span>
                Доставлено
                <span className="text-sm text-[#75777d] font-normal">({deliveredDeliveries.length})</span>
              </h3>
            </div>
            <div className="space-y-3">
              {deliveredDeliveries.map(delivery => (
                <DeliveryCard
                  key={delivery.id}
                  delivery={delivery}
                  onStatusChange={onStatusChange}
                  onEdit={onEdit}
                  onDelete={onDelete}
                />
              ))}
            </div>
          </div>
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full bg-white rounded-lg shadow-sm border border-[#e4e2e4]">
            <thead className="bg-[#f5f3f5]">
              <tr className="text-left text-xs font-semibold text-[#75777d] uppercase tracking-wider">
                <th className="px-4 py-3">Статус</th>
                <th className="px-4 py-3">Дата</th>
                <th className="px-4 py-3">Загрузка</th>
                <th className="px-4 py-3">Товар</th>
                <th className="px-4 py-3">Клиент</th>
                <th className="px-4 py-3">Адрес</th>
                <th className="px-4 py-3">Телефон</th>
                <th className="px-4 py-3">Комментарий</th>
                <th className="px-4 py-3">Действия</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#e4e2e4]">
              {deliveries.map(delivery => (
                <DeliveryRow
                  key={delivery.id}
                  delivery={delivery}
                  onStatusChange={onStatusChange}
                  onEdit={onEdit}
                  onDelete={onDelete}
                />
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};