import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
import { StockRack, StockPosition } from '@/types';

interface RackDetailsProps {
    rack: StockRack | null;
    onPositionClick: (posId: number) => void;
    onAddShelf: (rackId: number) => void;
    onDeleteShelf: (shelfId: number) => void;
}

export default function RackModalDetails({
                                             rack,
                                             onPositionClick,
                                             onAddShelf,
                                             onDeleteShelf
                                         }: RackDetailsProps) {
    if (!rack) return null;

    return (
        <div className="overflow-auto p-4">
            {/* Add shelf button */}
            <div className="flex justify-end mb-2">
                <button
                    className="btn btn-sm btn-outline flex items-center space-x-1"
                    onClick={() => onAddShelf(rack.rack_id)}
                >
                    <FontAwesomeIcon icon={faPlus} />
                    <span>Add Shelf</span>
                </button>
            </div>

            <div className="flex flex-col space-y-4">
                {rack.shelves?.map((shelf) => (
                    <div
                        key={shelf.shelf_id}
                        className="flex flex-col space-y-2 border p-3 rounded-lg"
                    >
                        <div className="flex justify-between items-center">
                            <div className="font-bold">
                                Shelf {shelf.shelf_symbol} — {shelf.shelf_name}
                            </div>
                            <button
                                className="btn btn-xs btn-error p-1"
                                onClick={() => {
                                    if (confirm(`Delete shelf ${shelf.shelf_symbol}?`)) {
                                        onDeleteShelf(shelf.shelf_id);
                                    }
                                }}
                            >
                                <FontAwesomeIcon icon={faTrash} />
                            </button>
                        </div>

                        {/* Positions container */}
                        <div className="flex space-x-4 border border-white dark:border-gray-700 h-max min-h-40 w-full">
                            {shelf.positions.length > 0 ? (
                                shelf.positions.map((position) => (
                                    <div
                                        key={position.position_symbol}
                                        className="border rounded-lg p-3 w-full cursor-pointer"
                                        onClick={() => onPositionClick(position.position_id)}
                                    >
                                        <div className="font-semibold mb-2">
                                            Pos {position.position_symbol}
                                        </div>
                                        <div className="grid grid-cols-1 gap-2">
                                            {position.sections.map((section) => (
                                                <div
                                                    key={section.section_symbol}
                                                    className="border rounded p-1 text-center bg-primary font-bold cursor-pointer"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        onPositionClick(position.position_id);
                                                    }}
                                                >
                                                    Sec {section.section_symbol}
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))
                            ) : (
                                <div className="border rounded-lg p-3 w-full flex items-center justify-center">
                                    No positions
                                </div>
                            )}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}