'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { GripVertical, X, Plus } from 'lucide-react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';

interface DashboardTile {
  id: string;
  component: string;
  title: string;
  visible: boolean;
}

interface DashboardCustomizerProps {
  tiles: DashboardTile[];
  onTilesChange: (tiles: DashboardTile[]) => void;
  availableTiles: Array<{ id: string; title: string; component: string }>;
}

export function DashboardCustomizer({ tiles, onTilesChange, availableTiles }: DashboardCustomizerProps) {
  const [isEditing, setIsEditing] = useState(false);

  const onDragEnd = (result: DropResult) => {
    if (!result.destination) return;

    const newTiles = Array.from(tiles);
    const [reorderedItem] = newTiles.splice(result.source.index, 1);
    newTiles.splice(result.destination.index, 0, reorderedItem);

    onTilesChange(newTiles);
  };

  const toggleTileVisibility = (tileId: string) => {
    const newTiles = tiles.map(tile =>
      tile.id === tileId ? { ...tile, visible: !tile.visible } : tile
    );
    onTilesChange(newTiles);
  };

  const addTile = (tileId: string) => {
    const tile = availableTiles.find(t => t.id === tileId);
    if (tile && !tiles.find(t => t.id === tileId)) {
      onTilesChange([...tiles, { ...tile, visible: true }]);
    }
  };

  return (
    <div className="mb-4">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-bold text-white">Customize Dashboard</h2>
        <button
          onClick={() => setIsEditing(!isEditing)}
          className="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors"
        >
          {isEditing ? 'Done' : 'Customize'}
        </button>
      </div>

      {isEditing && (
        <Card className="bg-gray-800 border-gray-700 mb-4">
          <CardHeader>
            <CardTitle className="text-white">Available Tiles</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
              {availableTiles
                .filter(t => !tiles.find(ct => ct.id === t.id))
                .map(tile => (
                  <button
                    key={tile.id}
                    onClick={() => addTile(tile.id)}
                    className="p-3 bg-gray-900 rounded hover:bg-gray-700 transition-colors text-left"
                  >
                    <div className="flex items-center gap-2">
                      <Plus className="h-4 w-4 text-orange-500" />
                      <span className="text-sm text-white">{tile.title}</span>
                    </div>
                  </button>
                ))}
            </div>
          </CardContent>
        </Card>
      )}

      {isEditing && (
        <DragDropContext onDragEnd={onDragEnd}>
          <Droppable droppableId="dashboard-tiles">
            {(provided) => (
              <div {...provided.droppableProps} ref={provided.innerRef}>
                {tiles.map((tile, index) => (
                  <Draggable key={tile.id} draggableId={tile.id} index={index}>
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        className={`mb-2 p-3 bg-gray-900 rounded flex items-center justify-between ${
                          snapshot.isDragging ? 'opacity-50' : ''
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <div {...provided.dragHandleProps}>
                            <GripVertical className="h-5 w-5 text-gray-400" />
                          </div>
                          <span className="text-white">{tile.title}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <label className="flex items-center gap-2 cursor-pointer">
                            <input
                              type="checkbox"
                              checked={tile.visible}
                              onChange={() => toggleTileVisibility(tile.id)}
                              className="w-4 h-4"
                            />
                            <span className="text-sm text-gray-300">Visible</span>
                          </label>
                        </div>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
      )}
    </div>
  );
}

