"use client";

import React, { useState, useMemo } from 'react';
import type { DataItem, ItemTypeValue } from '@/types';
import { ITEM_TYPES } from '@/types';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Trash2, Pencil, Check, XSquare, DatabaseZap, Search } from 'lucide-react';
import { ScrollArea } from '@/components/ui/scroll-area';

interface CollectedDataTableProps {
  items: DataItem[];
  onDeleteItem: (id: string) => void;
  onUpdateItem: (id: string, updatedData: Partial<DataItem>) => void;
}

export function CollectedDataTable({ items, onDeleteItem, onUpdateItem }: CollectedDataTableProps) {
  const [searchTerm, setSearchTerm] = useState('');
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editFormData, setEditFormData] = useState<Partial<DataItem>>({});

  const filteredItems = useMemo(() => {
    if (!searchTerm) {
      return items;
    }
    return items.filter(item =>
      item.location?.toString().toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  const handleEditClick = (item: DataItem) => {
    setEditingId(item.id);
    setEditFormData({ ...item });
  };

  const handleCancelEdit = () => {
    setEditingId(null);
    setEditFormData({});
  };

  const handleSaveEdit = () => {
    if (editingId) {
      // Basic validation for type
      if (!editFormData.type) {
          alert("Type cannot be empty."); // Or use a toast
          return;
      }
      onUpdateItem(editingId, editFormData);
    }
    handleCancelEdit();
  };

  const handleEditFormChange = (field: keyof Omit<DataItem, 'id' | 'sisel' | 'dept'>, value: any) => {
    setEditFormData(prev => ({ ...prev, [field]: value }));
  };


  if (items.length === 0 && !searchTerm) {
    return (
      <div className="flex flex-col items-center justify-center text-center p-6 border-2 border-dashed rounded-lg">
        <DatabaseZap className="h-12 w-12 text-muted-foreground mb-3" />
        <p className="text-muted-foreground font-medium">No data items added yet.</p>
        <p className="text-sm text-muted-foreground">Use the forms to add data.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
        <Input
          type="text"
          placeholder="Search by location..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="pl-10 bg-background"
        />
      </div>

      {filteredItems.length === 0 && searchTerm && (
        <div className="text-center p-6">
          <p className="text-muted-foreground font-medium">No items match your search for "{searchTerm}".</p>
        </div>
      )}

      {filteredItems.length > 0 && (
        <ScrollArea className="h-[400px] rounded-md border bg-card">
          <Table>
            <TableHeader className="sticky top-0 bg-muted/50 backdrop-blur-sm">
              <TableRow>
                <TableHead className="w-[120px]">Location</TableHead>
                <TableHead className="w-[100px]">Aisle</TableHead>
                <TableHead>Orig. Desc.</TableHead>
                <TableHead className="w-[150px]">Type</TableHead>
                <TableHead className="text-right w-[150px]">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredItems.map((item) => (
                <TableRow key={item.id} className={editingId === item.id ? 'bg-accent/50' : ''}>
                  {editingId === item.id ? (
                    <>
                      <TableCell>
                        <Input
                          value={editFormData.location?.toString() || ''}
                          onChange={(e) => handleEditFormChange('location', e.target.value)}
                          className="h-8 text-sm"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          value={editFormData.aisle || ''}
                          onChange={(e) => handleEditFormChange('aisle', e.target.value)}
                          className="h-8 text-sm"
                        />
                      </TableCell>
                      <TableCell>
                        <Input
                          value={editFormData.description || ''}
                          onChange={(e) => handleEditFormChange('description', e.target.value)}
                          className="h-8 text-sm"
                        />
                      </TableCell>
                      <TableCell>
                        <Select
                          value={editFormData.type || ''}
                          onValueChange={(value) => handleEditFormChange('type', value as ItemTypeValue)}
                        >
                          <SelectTrigger className="h-8 text-sm">
                            <SelectValue placeholder="Select type" />
                          </SelectTrigger>
                          <SelectContent>
                            {ITEM_TYPES.map(typeOpt => (
                              <SelectItem key={typeOpt.value} value={typeOpt.value}>
                                {typeOpt.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </TableCell>
                      <TableCell className="text-right space-x-1">
                        <Button variant="ghost" size="icon" onClick={handleSaveEdit} aria-label="Save changes">
                          <Check className="h-4 w-4 text-green-600" />
                        </Button>
                        <Button variant="ghost" size="icon" onClick={handleCancelEdit} aria-label="Cancel edit">
                          <XSquare className="h-4 w-4 text-red-600" />
                        </Button>
                      </TableCell>
                    </>
                  ) : (
                    <>
                      <TableCell className="font-medium">{item.location || '-'}</TableCell>
                      <TableCell>{item.aisle || '-'}</TableCell>
                      <TableCell className="truncate max-w-xs">{item.description || '-'}</TableCell>
                      <TableCell>{item.type || '-'}</TableCell>
                      <TableCell className="text-right space-x-1">
                        <Button variant="ghost" size="icon" onClick={() => handleEditClick(item)} aria-label="Edit item">
                          <Pencil className="h-4 w-4 text-blue-600" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => onDeleteItem(item.id)}
                          aria-label="Delete item"
                        >
                          <Trash2 className="h-4 w-4 text-destructive" />
                        </Button>
                      </TableCell>
                    </>
                  )}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </ScrollArea>
      )}
    </div>
  );
}