"use client";

import { useState, useMemo } from 'react';
import type { Product, CartItem as CartItemType } from '@/types';
import { mockProducts } from '@/lib/mock-data';
import { ProductCard } from '@/components/point-of-sale/product-card';
import { CartItem } from '@/components/point-of-sale/cart-item';
import { CartSummary } from '@/components/point-of-sale/cart-summary';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Search, X, ArchiveRestore, Filter } from 'lucide-react';
import { useToast } from "@/hooks/use-toast";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export default function PointOfSalePage() {
  const [products] = useState<Product[]>(mockProducts);
  const [cart, setCart] = useState<CartItemType[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [categoryFilter, setCategoryFilter] = useState<string>('all');
  const { toast } = useToast();

  const categories = useMemo(() => {
    const allCategories = new Set(products.map(p => p.category));
    return ['all', ...Array.from(allCategories)];
  }, [products]);

  const filteredProducts = useMemo(() => {
    return products.filter(product =>
      product.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
      (categoryFilter === 'all' || product.category === categoryFilter)
    );
  }, [products, searchTerm, categoryFilter]);

  const addToCart = (product: Product) => {
    setCart(prevCart => {
      const existingItem = prevCart.find(item => item.id === product.id);
      if (existingItem) {
        return prevCart.map(item =>
          item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prevCart, { ...product, quantity: 1 }];
    });
    toast({
      title: `${product.name} added to cart`,
      description: `Price: $${product.price.toFixed(2)}`,
      duration: 2000,
    });
  };

  const updateCartQuantity = (productId: string, quantity: number) => {
    setCart(prevCart => {
      if (quantity <= 0) {
        return prevCart.filter(item => item.id !== productId);
      }
      return prevCart.map(item =>
        item.id === productId ? { ...item, quantity } : item
      );
    });
  };

  const removeFromCart = (productId: string) => {
    setCart(prevCart => prevCart.filter(item => item.id !== productId));
     toast({
      title: `Item removed from cart`,
      variant: "destructive",
      duration: 2000,
    });
  };

  const handleCheckout = () => {
    // Simulate checkout
    toast({
      title: "Checkout Successful!",
      description: `Total: $${cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2)} (before discounts/taxes)`,
      duration: 3000,
    });
    setCart([]); // Clear cart after checkout
  };

  const clearCart = () => {
    setCart([]);
    toast({
      title: "Cart Cleared",
      variant: "default",
      duration: 2000,
    });
  };

  return (
    <div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-theme(spacing.24))] max-h-[calc(100vh-theme(spacing.24))]">
      {/* Products Section */}
      <div className="lg:w-3/5 flex flex-col">
        <Card className="shadow-xl flex-grow flex flex-col">
          <CardHeader>
            <CardTitle className="text-2xl">Products</CardTitle>
            <div className="flex flex-col sm:flex-row gap-2 mt-4">
              <div className="relative flex-grow">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="Search products..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-8 w-full"
                />
                 {searchTerm && (
                  <Button variant="ghost" size="icon" className="absolute right-1.5 top-0.5 h-7 w-7" onClick={() => setSearchTerm('')}>
                    <X className="h-4 w-4" />
                  </Button>
                )}
              </div>
              <Select value={categoryFilter} onValueChange={setCategoryFilter}>
                <SelectTrigger className="w-full sm:w-[180px]">
                  <Filter className="h-4 w-4 mr-2 text-muted-foreground"/>
                  <SelectValue placeholder="Filter by category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map(category => (
                    <SelectItem key={category} value={category}>
                      {category === 'all' ? 'All Categories' : category}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </CardHeader>
          <CardContent className="flex-grow overflow-hidden">
            <ScrollArea className="h-full pr-3">
              {filteredProducts.length > 0 ? (
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4">
                  {filteredProducts.map(product => (
                    <ProductCard key={product.id} product={product} onAddToCart={addToCart} />
                  ))}
                </div>
              ) : (
                <div className="text-center text-muted-foreground py-10">No products found.</div>
              )}
            </ScrollArea>
          </CardContent>
        </Card>
      </div>

      {/* Cart Section */}
      <div className="lg:w-2/5 flex flex-col">
        <Card className="shadow-xl flex-grow flex flex-col">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-2xl">Current Sale</CardTitle>
            {cart.length > 0 && (
              <Button variant="outline" size="sm" onClick={clearCart} className="text-destructive hover:text-destructive hover:border-destructive">
                <ArchiveRestore className="h-4 w-4 mr-2" /> Clear Cart
              </Button>
            )}
          </CardHeader>
          <CardContent className="flex-grow overflow-hidden flex flex-col justify-between">
            <ScrollArea className="h-[calc(100%-150px)] pr-1 mb-4"> {/* Adjust height based on summary */}
              {cart.length === 0 ? (
                <div className="text-center text-muted-foreground py-10">Your cart is empty.</div>
              ) : (
                cart.map(item => (
                  <CartItem
                    key={item.id}
                    item={item}
                    onUpdateQuantity={updateCartQuantity}
                    onRemoveItem={removeFromCart}
                  />
                ))
              )}
            </ScrollArea>
            <CartSummary cartItems={cart} onCheckout={handleCheckout} />
          </CardContent>
        </Card>
      </div>
    </div>
  );
}