import pageData from "~/data/personal-inventory-app.json"; export function PersonalInventory() { const { data, updateData } = useData(pageData); const [newItem, setNewItem] = React.useState({ name: '', category: '', location: '', notes: '', value: '', usefulness: 5, travelItem: false }); const [filter, setFilter] = React.useState('all'); const [searchTerm, setSearchTerm] = React.useState(''); const [editingId, setEditingId] = React.useState(null); const [showAddForm, setShowAddForm] = React.useState(false); const [showLeaderboards, setShowLeaderboards] = React.useState(false); const [editItem, setEditItem] = React.useState(null); const items = data.items || []; const categories = [...new Set(items.map(item => item.category).filter(Boolean))]; const locations = [...new Set(items.map(item => item.location).filter(Boolean))]; const addItem = () => { if (!newItem.name.trim()) return; const item = { id: Date.now(), ...newItem, dateAdded: new Date().toLocaleDateString(), lastUsed: null, usageCount: 0 }; updateData({ ...data, items: [...items, item] }); setNewItem({ name: '', category: '', location: '', notes: '', value: '', usefulness: 5, travelItem: false }); setShowAddForm(false); }; const updateItem = (id, updates) => { const updatedItems = items.map(item => item.id === id ? { ...item, ...updates } : item ); updateData({ ...data, items: updatedItems }); }; const openEditModal = (item) => { setEditItem({ ...item }); }; const saveEditItem = () => { if (editItem) { updateItem(editItem.id, editItem); setEditItem(null); } }; const deleteItem = (id) => { const updatedItems = items.filter(item => item.id !== id); updateData({ ...data, items: updatedItems }); }; const markAsUsed = (id) => { const item = items.find(item => item.id === id); updateItem(id, { lastUsed: new Date().toLocaleDateString(), usageCount: (item.usageCount || 0) + 1 }); }; const filteredItems = items.filter(item => { const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) || item.category.toLowerCase().includes(searchTerm.toLowerCase()) || item.location.toLowerCase().includes(searchTerm.toLowerCase()); if (filter === 'travel') return matchesSearch && item.travelItem; if (filter === 'unused') return matchesSearch && (!item.lastUsed || item.usageCount === 0); if (filter === 'frequently-used') return matchesSearch && item.usageCount >= 5; return matchesSearch; }); const totalValue = items.reduce((sum, item) => sum + (parseFloat(item.value) || 0), 0); const travelItems = items.filter(item => item.travelItem).length; const avgUsefulness = items.length > 0 ? (items.reduce((sum, item) => sum + item.usefulness, 0) / items.length).toFixed(1) : 0; const categoryData = categories.map(cat => ({ name: cat, count: items.filter(item => item.category === cat).length })); const usefulnessDistribution = [ { range: '1-3', count: items.filter(item => item.usefulness <= 3).length, color: 'oklch(0.627 0.265 303.9)' }, { range: '4-6', count: items.filter(item => item.usefulness >= 4 && item.usefulness <= 6).length, color: 'oklch(0.769 0.188 70.08)' }, { range: '7-10', count: items.filter(item => item.usefulness >= 7).length, color: 'oklch(0.646 0.222 41.116)' } ]; return (

Personal Inventory

{/* Stats Cards */}

{items.length}

Total Items

${totalValue.toFixed(2)}

Total Value

{travelItems}

Travel Items

{avgUsefulness}/10

Avg Usefulness

{/* Additional Info Section */} Inventory Summary (Top 3)

Most Valuable Items

{item.name} ${item.value}

Most Useful Items

{item.name} {item.usefulness}/10

Most Used Items

{item.name} {item.usageCount || 0}x

{/* Charts Section */}

Items by Category } /> Usefulness Distribution } /> Travel vs Regular Items `${name}: ${value}`} /> } /> Usage Frequency

({ name: item.name.slice(0, 10), count: item.usageCount || 0 }))}> } />

{/* Add Item Button */}

{/* Add Item Form */} {showAddForm && ( Add New Item

Item Name setNewItem({...newItem, name: e.target.value})} placeholder="Enter item name" />

Category setNewItem({...newItem, category: e.target.value})} placeholder="e.g. Electronics, Clothing, Books" />

Location setNewItem({...newItem, location: e.target.value})} placeholder="e.g. Bedroom, Office, Travel Bag" />

Value ($) setNewItem({...newItem, value: e.target.value})} placeholder="0.00" />

Notes

setNewItem({...newItem, notes: e.target.value})}
                placeholder="Additional notes about this item"
              />
            </div>
            <div>
              <Label>Usefulness (1-10)</Label>
              <Slider
                value={[newItem.usefulness]}
                onValueChange={(value) => setNewItem({...newItem, usefulness: value[0]})}
                max={10}
                min={1}
                step={1}
                className="w-full mt-2"
              />
              <div className="text-center text-sm text-muted-foreground mt-1">Current: {newItem.usefulness}</div>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox 
                id="travel-item"
                checked={newItem.travelItem}
                onCheckedChange={(checked) => setNewItem({...newItem, travelItem: checked})}
              />
              <Label htmlFor="travel-item">Travel Item</Label>
            </div>
            <div className="flex gap-2">
              <Button onClick={addItem} className="flex-1">Add Item</Button>
            </div>
          </CardContent>
        </Card>
      )}
      
      {/* Filters and Search */}
      <div className="flex flex-col md:flex-row gap-4">
        <div className="flex-1">
          <Input 
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder="Search items, categories, or locations..."
          />
        </div>
        <Select value={filter} onValueChange={setFilter}>
          <SelectTrigger className="w-48">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Items</SelectItem>
            <SelectItem value="travel">Travel Items</SelectItem>
            <SelectItem value="unused">Unused Items</SelectItem>
            <SelectItem value="frequently-used">Frequently Used</SelectItem>
          </SelectContent>
        </Select>
      </div>
      
      {/* Items List */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[800px] overflow-y-auto">
        {filteredItems.map(item => (
          <Card key={item.id} className="relative">
            <CardHeader className="pb-2">
              <div className="flex justify-between items-start">
                <CardTitle className="text-lg">{item.name}</CardTitle>
                <div className="flex gap-1">
                  <Button 
                    variant="ghost" 
                    size="sm"
                    onClick={() => openEditModal(item)}
                    className="hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-700 dark:hover:text-blue-300 transition-all duration-200"
                  >
                    Edit
                  </Button>
                  <Button 
                    variant="ghost" 
                    size="sm"
                    onClick={() => deleteItem(item.id)}
                    className="hover:bg-red-100 dark:hover:bg-red-900 hover:text-red-700 dark:hover:text-red-300 transition-all duration-200"
                  >
                    Delete
                  </Button>
                </div>
              </div>
              <div className="flex gap-2">
                {item.category && (
                  <Badge 
                    variant="outline" 
                    className={`
                      ${item.category.toLowerCase() === 'electronics' ? 'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300' : ''}
                      ${item.category.toLowerCase() === 'travel' ? 'bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300' : ''}
                      ${item.category.toLowerCase() === 'kitchen' ? 'bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300' : ''}
                      ${!['electronics', 'travel', 'kitchen'].includes(item.category.toLowerCase()) ? 'bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800 text-purple-700 dark:text-purple-300' : ''}
                    `}
                  >
                    {item.category}
                  </Badge>
                )}
                {item.travelItem && <Badge variant="secondary" className="bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300">Travel</Badge>}
              </div>
            </CardHeader>
            <CardContent className="space-y-2">
              <div className="text-sm text-muted-foreground">
                <div>Location: {item.location || 'Not specified'}</div>
                <div>Value: ${item.value || '0.00'}</div>
                <div>Usefulness: {item.usefulness}/10</div>
                <div>Usage Count: {item.usageCount || 0}</div>
                {item.lastUsed && <div>Last Used: {item.lastUsed}</div>}
              </div>
              {item.notes && (
                <div className="text-sm p-2 bg-muted rounded">
                  {item.notes}
                </div>
              )}
              <Button 
                onClick={() => markAsUsed(item.id)}
                variant="outline"
                size="sm"
                className="w-full hover:bg-green-100 dark:hover:bg-green-900 hover:text-green-700 dark:hover:text-green-300 transition-all duration-200"
              >
                Mark as Used
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
      
      {filteredItems.length === 0 && (
        <Card>
          <CardContent className="p-8 text-center text-muted-foreground">
            No items found. {searchTerm ? 'Try a different search term.' : 'Add your first item to get started!'}
          </CardContent>
        </Card>
      )}

{/* Full Leaderboards Dialog */}
      <Dialog open={showLeaderboards} onOpenChange={setShowLeaderboards}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Full Leaderboards</DialogTitle>
          </DialogHeader>
          <div className="space-y-6">
            <div>
              <h3 className="font-semibold mb-4">Most Valuable Items</h3>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableCell className="font-medium">Rank</TableCell>
                    <TableCell className="font-medium">Item</TableCell>
                    <TableCell className="font-medium text-right">Value</TableCell>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {items
                    .sort((a, b) => (parseFloat(b.value) || 0) - (parseFloat(a.value) || 0))
                    .map((item, index) => (
                      <TableRow key={item.id}>
                        <TableCell className="font-medium">#{index + 1}</TableCell>
                        <TableCell>{item.name}</TableCell>
                        <TableCell className="text-right">${item.value}</TableCell>
                      </TableRow>
                    ))}
                </TableBody>
              </Table>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Most Useful Items</h3>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableCell className="font-medium">Rank</TableCell>
                    <TableCell className="font-medium">Item</TableCell>
                    <TableCell className="font-medium text-right">Usefulness</TableCell>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {items
                    .sort((a, b) => b.usefulness - a.usefulness)
                    .map((item, index) => (
                      <TableRow key={item.id}>
                        <TableCell className="font-medium">#{index + 1}</TableCell>
                        <TableCell>{item.name}</TableCell>
                        <TableCell className="text-right">{item.usefulness}/10</TableCell>
                      </TableRow>
                    ))}
                </TableBody>
              </Table>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Most Used Items</h3>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableCell className="font-medium">Rank</TableCell>
                    <TableCell className="font-medium">Item</TableCell>
                    <TableCell className="font-medium text-right">Usage</TableCell>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {items
                    .sort((a, b) => (b.usageCount || 0) - (a.usageCount || 0))
                    .map((item, index) => (
                      <TableRow key={item.id}>
                        <TableCell className="font-medium">#{index + 1}</TableCell>
                        <TableCell>{item.name}</TableCell>
                        <TableCell className="text-right">{item.usageCount || 0}x</TableCell>
                      </TableRow>
                    ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Edit Item Dialog */}
      <Dialog open={editItem !== null} onOpenChange={() => setEditItem(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Edit Item</DialogTitle>
          </DialogHeader>
          {editItem && (
            <div className="space-y-4">
              <div>
                <Label htmlFor="edit-name">Item Name</Label>
                <Input 
                  id="edit-name"
                  value={editItem.name}
                  onChange={(e) => setEditItem({...editItem, name: e.target.value})}
                  placeholder="Item name"
                />
              </div>
              <div>
                <Label htmlFor="edit-category">Category</Label>
                <Input 
                  id="edit-category"
                  value={editItem.category}
                  onChange={(e) => setEditItem({...editItem, category: e.target.value})}
                  placeholder="Category"
                />
              </div>
              <div>
                <Label htmlFor="edit-location">Location</Label>
                <Input 
                  id="edit-location"
                  value={editItem.location}
                  onChange={(e) => setEditItem({...editItem, location: e.target.value})}
                  placeholder="Location"
                />
              </div>
              <div>
                <Label htmlFor="edit-value">Value ($)</Label>
                <Input 
                  id="edit-value"
                  type="number"
                  value={editItem.value}
                  onChange={(e) => setEditItem({...editItem, value: e.target.value})}
                  placeholder="Value"
                />
              </div>
              <div>
                <Label htmlFor="edit-usefulness">Usefulness: {editItem.usefulness}</Label>
                <Slider
                  value={[editItem.usefulness]}
                  onValueChange={(value) => setEditItem({...editItem, usefulness: value[0]})}
                  max={10}
                  min={1}
                  step={1}
                  className="mt-2"
                />
              </div>
              <div>
                <Label htmlFor="edit-usage-count">Usage Count</Label>
                <Input 
                  id="edit-usage-count"
                  type="number"
                  min="0"
                  value={editItem.usageCount || 0}
                  onChange={(e) => setEditItem({...editItem, usageCount: parseInt(e.target.value) || 0})}
                  placeholder="Usage count"
                />
              </div>
              <div>
                <Label htmlFor="edit-notes">Notes</Label>
                <Textarea 
                  id="edit-notes"
                  value={editItem.notes}
                  onChange={(e) => setEditItem({...editItem, notes: e.target.value})}
                  placeholder="Notes"
                />
              </div>
              <div className="flex items-center space-x-2">
                <Checkbox 
                  id="edit-travel"
                  checked={editItem.travelItem}
                  onCheckedChange={(checked) => setEditItem({...editItem, travelItem: checked})}
                />
                <Label htmlFor="edit-travel">Travel Item</Label>
              </div>
              <div className="flex gap-2 pt-4">
                <Button onClick={saveEditItem} className="flex-1">Save Changes</Button>
                <Button variant="outline" onClick={() => setEditItem(null)}>Cancel</Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}