"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ShoppingCart } from "lucide-react";
import { useState, useEffect } from "react";

export default function NewOrderPage() {
  const [service, setService] = useState("instagram-likes");
  const [link, setLink] = useState("");
  const [quantity, setQuantity] = useState(0);
  const [price, setPrice] = useState(0);

  const serviceRates = {
    "instagram-likes": 0.001,
    "youtube-views": 0.0005,
    "tiktok-followers": 0.004,
  };

  useEffect(() => {
    const rate = serviceRates[service as keyof typeof serviceRates] || 0;
    const calculatedPrice = quantity * rate;
    setPrice(calculatedPrice);
  }, [service, quantity]);

  const handleOrderSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert(`Order placed! Service: ${service}, Link: ${link}, Quantity: ${quantity}, Price: $${price.toFixed(2)}`);
    // Here you would typically send data to your backend
  };

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Dashboard", id: "/dashboard" },
    { name: "New Order", id: "/new-order" },
    { name: "My Orders", id: "/orders" }
  ];

  const footerColumns = [
    {
      title: "Company",      items: [
        { label: "About Us", href: "/#features" },
        { label: "Dashboard", href: "/dashboard" },
        { label: "New Order", href: "/new-order" },
        { label: "My Orders", href: "/orders" }
      ],
    },
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={navItems}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            brandName="SocBoost"
            button={{
              text: "Register",              href: "/register"
            }}
          />
        </div>

        <main className="container mx-auto px-4 py-8 pt-20 min-h-[calc(100vh-200px)]">
          <h1 className="text-4xl font-bold mb-8 text-foreground">Create New Order</h1>

          <div className="bg-card p-8 rounded-lg shadow-lg max-w-2xl mx-auto">
            <form onSubmit={handleOrderSubmit} className="space-y-6">
              <div>
                <label htmlFor="service" className="block text-sm font-medium text-foreground mb-2">Service</label>
                <select
                  id="service"
                  className="w-full p-3 border border-border rounded-md bg-background-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
                  value={service}
                  onChange={(e) => setService(e.target.value)}
                >
                  <option value="instagram-likes">Instagram Likes</option>
                  <option value="youtube-views">YouTube Views</option>
                  <option value="tiktok-followers">TikTok Followers</option>
                </select>
              </div>

              <div>
                <label htmlFor="link" className="block text-sm font-medium text-foreground mb-2">Link</label>
                <input
                  type="url"
                  id="link"
                  className="w-full p-3 border border-border rounded-md bg-background-accent text-foreground placeholder-foreground-light focus:ring-primary-cta focus:border-primary-cta"
                  placeholder="Enter link (e.g., Instagram post URL)"
                  value={link}
                  onChange={(e) => setLink(e.target.value)}
                  required
                />
              </div>

              <div>
                <label htmlFor="quantity" className="block text-sm font-medium text-foreground mb-2">Quantity</label>
                <input
                  type="number"
                  id="quantity"
                  className="w-full p-3 border border-border rounded-md bg-background-accent text-foreground placeholder-foreground-light focus:ring-primary-cta focus:border-primary-cta"
                  placeholder="Enter quantity (e.g., 1000)"
                  min="1"
                  value={quantity === 0 ? "" : quantity}
                  onChange={(e) => setQuantity(parseInt(e.target.value) || 0)}
                  required
                />
              </div>

              <div className="flex justify-between items-center py-4 border-t border-border-light">
                <p className="text-lg font-medium text-foreground">Total Price:</p>
                <p className="text-2xl font-bold text-primary-cta">${price.toFixed(2)}</p>
              </div>

              <button
                type="submit"
                className="w-full flex items-center justify-center space-x-2 px-5 py-3 bg-primary-cta text-white font-semibold rounded-md hover:opacity-90 transition-opacity"
              >
                <ShoppingCart className="h-5 w-5" />
                <span>Place Order</span>
              </button>
            </form>
          </div>
        </main>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={footerColumns}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            logoText="SocBoost"
            copyrightText="© 2024 SocBoost. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
