import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { useToast } from "@/hooks/use-toast";
import { apiRequest } from "@/lib/queryClient";
import { useMutation } from "@tanstack/react-query";

export default function Landing() {
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [showRequestModal, setShowRequestModal] = useState(false);
  const [requestForm, setRequestForm] = useState({
    name: "",
    category: "people",
    description: ""
  });
  const { toast } = useToast();

  const requestMutation = useMutation({
    mutationFn: async (data: typeof requestForm) => {
      await apiRequest("POST", "/api/media-outlet-requests", data);
    },
    onSuccess: () => {
      toast({
        title: "Success",
        description: "Your media outlet request has been submitted for review.",
      });
      setShowRequestModal(false);
      setRequestForm({ name: "", category: "people", description: "" });
    },
    onError: () => {
      toast({
        title: "Error",
        description: "Failed to submit request. Please try again.",
        variant: "destructive"
      });
    }
  });

  const handleLogin = () => {
    window.location.href = "/api/login";
  };

  const handleRequestSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    requestMutation.mutate(requestForm);
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-card border-b border-border sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
                S
              </div>
              <span className="text-2xl font-bold tracking-tight">SAPIENS</span>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="relative">
                <Input 
                  type="text" 
                  placeholder="Search media outlets, topics..." 
                  className="w-64"
                  data-testid="input-search"
                />
                <i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
              </div>
              
              <Button 
                variant="outline" 
                onClick={handleLogin}
                data-testid="button-login"
              >
                Login
              </Button>
              
              <Button 
                onClick={() => setShowRequestModal(true)}
                data-testid="button-request-outlet"
              >
                Request Media Outlet
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <div className="gradient-bg rounded-2xl p-8 mb-8 text-white mx-6 mt-8">
        <div className="max-w-3xl">
          <h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
          <p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
          <div className="flex space-x-4">
            <Button 
              className="bg-white text-primary hover:bg-opacity-90"
              onClick={handleLogin}
              data-testid="button-explore"
            >
              Explore Media Outlets
            </Button>
            <Button 
              variant="outline" 
              className="border-white text-white hover:bg-white hover:text-primary"
              onClick={handleLogin}
              data-testid="button-auctions"
            >
              View Active Auctions
            </Button>
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="max-w-7xl mx-auto px-6 py-12">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold mb-4">Comprehensive Media Platform</h2>
          <p className="text-xl text-muted-foreground">Discover insights across three key categories</p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <Card className="card-hover">
            <CardContent className="p-6">
              <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                <i className="fas fa-users text-primary text-xl"></i>
              </div>
              <h3 className="text-xl font-semibold mb-3">People</h3>
              <p className="text-muted-foreground mb-4">Follow insights from influential leaders across technology, finance, and politics.</p>
              <p className="text-sm text-primary font-semibold">24 Influential Figures</p>
            </CardContent>
          </Card>

          <Card className="card-hover">
            <CardContent className="p-6">
              <div className="w-12 h-12 bg-chart-2/20 rounded-lg flex items-center justify-center mb-4">
                <i className="fas fa-hashtag text-chart-2 text-xl"></i>
              </div>
              <h3 className="text-xl font-semibold mb-3">Topics</h3>
              <p className="text-muted-foreground mb-4">Stay updated on trending subjects from crypto to AI, regulation to innovation.</p>
              <p className="text-sm text-chart-2 font-semibold">20 Key Topics</p>
            </CardContent>
          </Card>

          <Card className="card-hover">
            <CardContent className="p-6">
              <div className="w-12 h-12 bg-chart-1/20 rounded-lg flex items-center justify-center mb-4">
                <i className="fas fa-building text-chart-1 text-xl"></i>
              </div>
              <h3 className="text-xl font-semibold mb-3">Companies</h3>
              <p className="text-muted-foreground mb-4">Track major corporations shaping the future of technology and finance.</p>
              <p className="text-sm text-chart-1 font-semibold">27 Leading Companies</p>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Request Modal */}
      <Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
        <DialogContent data-testid="modal-request">
          <DialogHeader>
            <DialogTitle>Request New Media Outlet</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleRequestSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-2">Name</label>
              <Input
                value={requestForm.name}
                onChange={(e) => setRequestForm(prev => ({ ...prev, name: e.target.value }))}
                placeholder="Enter outlet name"
                required
                data-testid="input-outlet-name"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium mb-2">Category</label>
              <select
                value={requestForm.category}
                onChange={(e) => setRequestForm(prev => ({ ...prev, category: e.target.value }))}
                className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
                data-testid="select-category"
              >
                <option value="people">People</option>
                <option value="topics">Topics</option>
                <option value="companies">Companies</option>
              </select>
            </div>
            
            <div>
              <label className="block text-sm font-medium mb-2">Description</label>
              <textarea
                value={requestForm.description}
                onChange={(e) => setRequestForm(prev => ({ ...prev, description: e.target.value }))}
                placeholder="Describe why this outlet should be added"
                className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
                rows={3}
                data-testid="textarea-description"
              />
            </div>
            
            <div className="flex space-x-2">
              <Button 
                type="submit" 
                disabled={requestMutation.isPending}
                data-testid="button-submit-request"
              >
                {requestMutation.isPending ? "Submitting..." : "Submit Request"}
              </Button>
              <Button 
                type="button" 
                variant="outline" 
                onClick={() => setShowRequestModal(false)}
                data-testid="button-cancel-request"
              >
                Cancel
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}