'use client';

import React, { useState, useEffect } from 'react';
import { Search, Grid, List, User, Plus, Image, Upload, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { useSearch, SearchResult } from '@/hooks/useSearch';
import { SearchResults } from '@/components/SearchResults';
import { ImageDropzone } from '@/components/ImageDropzone';
import { ItemDetailsModal } from '@/components/ItemDetailsModal';

export default function Home() {
  const [activeView, setActiveView] = useState('library');
  const [showDropzone, setShowDropzone] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedItem, setSelectedItem] = useState<SearchResult | null>(null);
  const [showItemModal, setShowItemModal] = useState(false);
  
  const {
    query,
    results,
    isLoading,
    error,
    hasSearched,
    total,
    searchTime,
    search,
    clearSearch
  } = useSearch();

  // Handle search input changes
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSearchQuery(value);
    
    if (value.trim()) {
      search(value);
    } else {
      clearSearch();
    }
  };

  // Handle search result item click
  const handleItemClick = (item: SearchResult) => {
    setSelectedItem(item);
    setShowItemModal(true);
  };

  // Handle modal close
  const handleModalClose = () => {
    setShowItemModal(false);
    setSelectedItem(null);
  };

  // Handle item actions
  const handleEditItem = (item: SearchResult) => {
    console.log('Edit item:', item);
    // TODO: Open edit modal/form
  };

  const handleDeleteItem = (item: SearchResult) => {
    console.log('Delete item:', item);
    // TODO: Implement delete functionality
    if (confirm('Are you sure you want to delete this item?')) {
      // Delete logic here
      handleModalClose();
    }
  };

  const handleAddToCollection = (item: SearchResult) => {
    console.log('Add to collection:', item);
    // TODO: Open collection selector
  };

  const handleToggleFavorite = (item: SearchResult) => {
    console.log('Toggle favorite:', item);
    // TODO: Implement favorite toggle
  };

  // Handle image upload
  const handleImageUpload = async (file: File) => {
    try {
      const formData = new FormData();
      formData.append('file', file);

      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        throw new Error('Upload failed');
      }

      const result = await response.json();
      console.log('Upload successful:', result);

      // TODO: Perform image-based search after upload
      // This would call the search API with the uploaded image
      
      // For now, just show a success message
      alert('Image uploaded successfully! Image-based search coming soon.');
      
    } catch (error) {
      console.error('Upload error:', error);
      alert('Upload failed. Please try again.');
    }
  };

  // Handle URL upload
  const handleUrlUpload = async (url: string) => {
    try {
      const formData = new FormData();
      formData.append('url', url);

      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        throw new Error('URL processing failed');
      }

      const result = await response.json();
      console.log('URL processed:', result);

      // TODO: Perform image-based search after processing
      
      // For now, just show a success message
      alert('URL processed successfully! Image-based search coming soon.');
      
    } catch (error) {
      console.error('URL processing error:', error);
      alert('URL processing failed. Please check the URL and try again.');
    }
  };

  // Mock data for library items
  const mockItems = [
    { id: 1, height: 200, width: 'normal' },
    { id: 2, height: 280, width: 'wide' },
    { id: 3, height: 160, width: 'normal' },
    { id: 4, height: 240, width: 'normal' },
    { id: 5, height: 200, width: 'normal' },
    { id: 6, height: 300, width: 'wide' },
    { id: 7, height: 180, width: 'normal' },
    { id: 8, height: 220, width: 'normal' },
    { id: 9, height: 260, width: 'wide' },
    { id: 10, height: 190, width: 'normal' },
    { id: 11, height: 240, width: 'normal' },
    { id: 12, height: 200, width: 'wide' },
    { id: 13, height: 220, width: 'normal' },
    { id: 14, height: 180, width: 'normal' },
    { id: 15, height: 260, width: 'normal' },
    { id: 16, height: 200, width: 'wide' },
    { id: 17, height: 240, width: 'normal' },
    { id: 18, height: 180, width: 'normal' },
  ];
  // Mock data for collections
  const mockCollections = [
    { id: 1, name: 'Brand Identity', itemCount: 47 },
    { id: 2, name: 'UI Inspiration', itemCount: 132 },
    { id: 3, name: 'Typography', itemCount: 28 },
    { id: 4, name: 'Color Palettes', itemCount: 64 },
    { id: 5, name: 'Illustration', itemCount: 89 },
    { id: 6, name: 'Photography', itemCount: 156 },
    { id: 7, name: 'Web Design', itemCount: 93 },
    { id: 8, name: 'Motion Graphics', itemCount: 41 },
  ];

  const LibraryView = () => (
    <>
      {/* Compact Horizontal Filters Toolbar */}
      <div className="px-8 py-3 flex items-center gap-2 border-b">
        <Button variant="outline" size="sm" className="gap-2">
          <Grid size={14} />
          Filter
        </Button>

        <Button size="sm" className="gap-2 font-medium bg-orange-500 hover:bg-orange-600 text-white">
          All Items
          <span className="text-xs opacity-70">▼</span>
        </Button>

        <Button variant="outline" size="sm" className="gap-2">
          Source
          <span className="text-xs opacity-70">▼</span>
        </Button>

        <Button variant="outline" size="sm" className="gap-2">
          Media type
          <span className="text-xs opacity-70">▼</span>
        </Button>

        <Button variant="outline" size="sm" className="gap-2">
          Date added
          <span className="text-xs opacity-70">▼</span>
        </Button>

        <Button variant="outline" size="sm" className="gap-2">
          Tags
          <span className="text-xs opacity-70">▼</span>
        </Button>

        <div className="flex-1" />

        <span className="text-sm font-medium text-muted-foreground">
          1,427 items
        </span>

        <Button variant="outline" size="icon-sm">
          <Grid size={16} />
        </Button>

        <Button variant="outline" size="icon-sm">
          <List size={16} />
        </Button>
      </div>

      {/* Main Content - Tightly Packed Masonry Grid */}
      <main className="flex-1 overflow-auto bg-background">
        <div className="columns-5 gap-0.5">
          {mockItems.map((item, index) => {
            const colorClasses = [
              'bg-orange-500',
              'bg-amber-400',
              'bg-stone-700',
              'bg-orange-600'
            ];
            const itemColorClass = colorClasses[index % colorClasses.length];
            
            return (
              <div
                key={item.id}
                className={`mb-0.5 break-inside-avoid group cursor-pointer relative overflow-hidden transition-all hover:opacity-90 ${itemColorClass}`}
                style={{ height: `${item.height}px` }}
              >
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/60 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
                  <Button 
                    size="sm"
                    className="hover:scale-105 transition-transform bg-foreground text-background hover:bg-foreground/90"
                  >
                    View Details
                  </Button>
                </div>
              </div>
            );
          })}
        </div>
      </main>
    </>
  );

  const CollectionsView = () => (
    <>
      {/* Collections Toolbar */}
      <div className="px-8 py-4 flex items-center justify-between border-b">
        <div className="flex items-center gap-3">
          <h2 className="text-xl font-bold">Your Collections</h2>
          <span className="text-sm text-muted-foreground">
            {mockCollections.length} collections
          </span>
        </div>

        <Button size="sm" className="gap-2 font-medium bg-orange-500 hover:bg-orange-600 text-white">
          <Plus size={16} />
          New Collection
        </Button>
      </div>

      {/* Collections Grid */}
      <main className="flex-1 overflow-auto bg-background">
        <div className="grid grid-cols-4 gap-0.5">
          {mockCollections.map((collection, idx) => {
            const colorClasses = [
              ['bg-orange-500', 'bg-amber-400', 'bg-orange-600', 'bg-orange-500'],
              ['bg-amber-400', 'bg-orange-500', 'bg-amber-400', 'bg-orange-600'],
              ['bg-orange-600', 'bg-orange-500', 'bg-amber-400', 'bg-orange-500'],
              ['bg-orange-500', 'bg-orange-600', 'bg-amber-400', 'bg-orange-500']
            ];
            const previewColors = colorClasses[idx % colorClasses.length];

            return (
              <div
                key={collection.id}
                className="group cursor-pointer relative"
              >
                {/* Collection Preview Grid */}
                <div className="aspect-square overflow-hidden transition-all hover:opacity-90 bg-muted">
                  <div className="grid grid-cols-2 grid-rows-2 h-full gap-0">
                    {previewColors.map((colorClass, colorIdx) => (
                      <div
                        key={colorIdx}
                        className={colorClass}
                      />
                    ))}
                  </div>

                  {/* Hover Overlay with Info */}
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/70 transition-all flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 p-4">
                    <h3 className="font-bold text-base mb-2 text-center text-foreground">
                      {collection.name}
                    </h3>
                    <div className="flex items-center gap-2 text-sm mb-4 text-muted-foreground">
                      <Image size={14} />
                      <span>{collection.itemCount} items</span>
                    </div>
                    <Button 
                      size="sm"
                      className="hover:scale-105 transition-transform bg-foreground text-background hover:bg-foreground/90"
                    >
                      Open Collection
                    </Button>
                  </div>
                </div>
              </div>
            );
          })}

          {/* Create New Collection Card */}
          <div className="aspect-square cursor-pointer transition-all hover:opacity-80 flex flex-col items-center justify-center gap-3 bg-muted">
            <div className="w-12 h-12 flex items-center justify-center bg-orange-500 text-white">
              <Plus size={24} />
            </div>
            <span className="font-medium text-sm text-muted-foreground">
              Create Collection
            </span>
          </div>
        </div>
      </main>
    </>
  );

  return (
    <div className="w-full h-screen flex flex-col bg-background text-foreground">
      {/* Header */}
      <header className="border-b">
        <div className="px-8 py-6 flex items-center justify-between">
          <div className="text-2xl font-bold tracking-tight">INSPIRATION</div>
          
          {/* Prominent Central Search with Image Toggle */}
          <div className="flex-1 max-w-2xl mx-12 flex gap-3">
            <div className="relative flex-1">
              <Search 
                className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground" 
                size={20} 
              />
              <Input
                type="text"
                placeholder="Search by idea, concept, or visual..."
                value={searchQuery}
                onChange={handleSearchChange}
                className="w-full py-4 pl-12 pr-12 text-base h-auto border-0 bg-muted"
              />
              {searchQuery && (
                <Button
                  variant="ghost"
                  size="icon-sm"
                  onClick={() => {
                    setSearchQuery('');
                    clearSearch();
                  }}
                  className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 text-muted-foreground hover:text-foreground"
                >
                  <X size={16} />
                </Button>
              )}
            </div>
            <Button 
              variant="outline"
              size="icon"
              onClick={() => setShowDropzone(!showDropzone)}
              className={`h-auto py-4 px-4 ${
                showDropzone 
                  ? 'bg-orange-500 text-white hover:bg-orange-600 border-orange-500' 
                  : 'bg-muted hover:bg-muted/80'
              }`}
              title="Search by image"
            >
              <Image size={20} />
            </Button>
          </div>

          <nav className="flex items-center gap-6">
            <Button 
              variant="ghost"
              onClick={() => setActiveView('library')}
              className={`font-medium ${
                activeView === 'library' ? 'text-foreground' : 'text-muted-foreground'
              }`}
            >
              Library
            </Button>
            <Button 
              variant="ghost"
              onClick={() => setActiveView('collections')}
              className={`font-medium ${
                activeView === 'collections' ? 'text-foreground' : 'text-muted-foreground'
              }`}
            >
              Collections
            </Button>
            <Button variant="ghost" size="icon" className="text-muted-foreground">
              <User size={22} />
            </Button>
          </nav>
        </div>

        {/* Image Search Dropzone */}
        <ImageDropzone
          isOpen={showDropzone}
          onClose={() => setShowDropzone(false)}
          onUpload={handleImageUpload}
          onUrlUpload={handleUrlUpload}
        />
      </header>

      {/* Active View */}
      {hasSearched ? (
        <SearchResults
          results={results}
          isLoading={isLoading}
          error={error}
          hasSearched={hasSearched}
          query={query}
          total={total}
          searchTime={searchTime}
          onItemClick={handleItemClick}
        />
      ) : (
        activeView === 'library' ? <LibraryView /> : <CollectionsView />
      )}

      {/* Item Details Modal */}
      <ItemDetailsModal
        item={selectedItem}
        isOpen={showItemModal}
        onClose={handleModalClose}
        onEdit={handleEditItem}
        onDelete={handleDeleteItem}
        onAddToCollection={handleAddToCollection}
        onToggleFavorite={handleToggleFavorite}
      />
    </div>
  );
}