"use client"

import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { ArrowLeft, Send, RefreshCw } from "lucide-react";
import axios from "axios";
import { toast } from "sonner";

export default function NewChatForm() {
  const router = useRouter();
  const [buyerId, setBuyerId] = useState("");
  const [initialMessage, setInitialMessage] = useState("");
  const [loading, setLoading] = useState(false);
  const [vendorStores, setVendorStores] = useState<{ _id: string, name: string }[]>([]);
  const [selectedStore, setSelectedStore] = useState<string>("");
  
  // Fetch vendor stores
  useEffect(() => {
    const fetchVendorStores = async () => {
      try {
        const vendorId = sessionStorage.getItem("vendorId");
        
        if (!vendorId) {
          toast.error("You need to be logged in");
          router.push("/login");
          return;
        }
        
        const response = await axios.get(`/api/stores/vendor/${vendorId}`);
        setVendorStores(response.data);
        
        if (response.data.length > 0) {
          setSelectedStore(response.data[0]._id);
        }
      } catch (error) {
        console.error("Error fetching stores:", error);
        toast.error("Failed to load stores");
      }
    };
    
    fetchVendorStores();
  }, [router]);
  
  const handleBackClick = () => {
    router.push("/dashboard/chats");
  };
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!buyerId || !selectedStore) {
      toast.error("Please fill all required fields");
      return;
    }
    
    setLoading(true);
    try {
      const response = await axios.post("/api/chats/create", {
        buyerId,
        storeId: selectedStore,
        initialMessage
      });
      
      if (response.data.chatId) {
        toast.success("Chat created successfully!");
        router.push(`/dashboard/chats/${response.data.chatId}`);
      } else if (response.data.error === "Chat already exists") {
        toast.info("Chat already exists, redirecting...");
        router.push(`/dashboard/chats/${response.data.chatId}`);
      }
    } catch (error: any) {
      console.error("Error creating chat:", error);
      
      if (error.response?.status === 409) {
        // Chat already exists
        toast.info("Chat already exists, redirecting...");
        router.push(`/dashboard/chats/${error.response.data.chatId}`);
      } else {
        toast.error("Failed to create chat");
      }
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle className="flex items-center space-x-2">
          <Button variant="ghost" size="icon" onClick={handleBackClick}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <span>Start a New Conversation</span>
        </CardTitle>
        <CardDescription>
          Start a new conversation with a customer by their Telegram ID
        </CardDescription>
      </CardHeader>
      
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="buyerId">Customer Telegram ID</Label>
            <Input
              id="buyerId"
              value={buyerId}
              onChange={(e) => setBuyerId(e.target.value)}
              placeholder="e.g. 123456789"
              required
            />
            <p className="text-sm text-muted-foreground">
              This is the customer's Telegram ID. You can ask them to use the /myid command in your Telegram bot.
            </p>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="store">Store</Label>
            <select
              id="store"
              value={selectedStore}
              onChange={(e) => setSelectedStore(e.target.value)}
              className="w-full rounded-md border border-input bg-background px-3 py-2"
              required
            >
              <option value="" disabled>Select a store</option>
              {vendorStores.map((store) => (
                <option key={store._id} value={store._id}>
                  {store.name}
                </option>
              ))}
            </select>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="initialMessage">Initial Message (Optional)</Label>
            <Textarea
              id="initialMessage"
              value={initialMessage}
              onChange={(e) => setInitialMessage(e.target.value)}
              placeholder="Hello! How can I help you today?"
              rows={4}
            />
          </div>
          
          <div className="flex justify-end space-x-2">
            <Button
              type="button"
              variant="outline"
              onClick={handleBackClick}
              disabled={loading}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !buyerId || !selectedStore}>
              {loading ? (
                <>
                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                  Creating...
                </>
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" />
                  Start Conversation
                </>
              )}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}