Wdipl-react/pages/ClientSupport.tsx

import {
  AlertCircle,
  ArrowRight,
  Book,
  CheckCircle,
  Clock,
  Download,
  ExternalLink,
  FileText,
  Globe,
  Headphones,
  HelpCircle,
  Mail,
  MessageSquare,
  Phone,
  Search,
  Send,
  Shield,
  User,
  Zap,
} from "lucide-react";
import React, { useState } from "react";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { Input } from "../components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../components/ui/select";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../components/ui/tabs";
import { Textarea } from "../components/ui/textarea";

export const ClientSupport = () => {
  const [ticketForm, setTicketForm] = useState({
    subject: "",
    priority: "",
    category: "",
    description: "",
    projectId: "",
  });

  const [isSubmitting, setIsSubmitting] = useState(false);

  const supportChannels = [
    {
      icon: User,
      title: "Direct Contact",
      description:
        "Reach out to your assigned Project Manager or Account Manager",
      action: "Contact Your PM",
      highlight: true,
    },
    {
      icon: MessageSquare,
      title: "Support Ticket System",
      description: "Submit technical issues, bug reports, or service requests",
      action: "Create Ticket",
      monitored: "24/5 monitoring",
    },
    {
      icon: Mail,
      title: "Support Email",
      description: "support@wdi.com",
      action: "Send Email",
      response: "< 4 hours",
    },
    {
      icon: Phone,
      title: "Support Phone",
      description: "+1 (555) 123-HELP",
      action: "Call Now",
      availability: "Mon-Fri, 9 AM - 6 PM EST",
    },
  ];

  const severityLevels = [
    {
      level: "Critical",
      icon: AlertCircle,
      color: "text-red-400",
      bgColor: "bg-red-500/20",
      description: "System down, business-critical functionality unavailable",
      sla: "< 1 hour response",
    },
    {
      level: "High",
      icon: Zap,
      color: "text-orange-400",
      bgColor: "bg-orange-500/20",
      description: "Major functionality impaired, significant business impact",
      sla: "< 4 hours response",
    },
    {
      level: "Medium",
      icon: Clock,
      color: "text-yellow-400",
      bgColor: "bg-yellow-500/20",
      description: "Minor functionality issues, workaround available",
      sla: "< 24 hours response",
    },
    {
      level: "Low",
      icon: CheckCircle,
      color: "text-green-400",
      bgColor: "bg-green-500/20",
      description: "Feature requests, documentation, general questions",
      sla: "< 48 hours response",
    },
  ];

  const selfHelpResources = [
    {
      icon: Book,
      title: "Knowledge Base",
      description: "Self-help articles and troubleshooting guides",
      items: "200+ articles",
      action: "Browse Articles",
    },
    {
      icon: FileText,
      title: "Documentation Portal",
      description: "Project-specific documentation and API references",
      items: "Project docs",
      action: "Access Portal",
      protected: true,
    },
    {
      icon: HelpCircle,
      title: "FAQ Section",
      description: "Frequently asked questions and common solutions",
      items: "50+ FAQs",
      action: "View FAQs",
    },
    {
      icon: Download,
      title: "Downloads Center",
      description: "Software updates, patches, and resources",
      items: "Latest releases",
      action: "Download Center",
    },
  ];

  const recentTickets = [
    {
      id: "WDI-2024-001",
      subject: "API rate limiting issue on production",
      status: "In Progress",
      priority: "High",
      created: "2 hours ago",
      assignee: "Technical Team",
    },
    {
      id: "WDI-2024-002",
      subject: "User authentication module enhancement",
      status: "Resolved",
      priority: "Medium",
      created: "1 day ago",
      assignee: "Development Team",
    },
    {
      id: "WDI-2024-003",
      subject: "Database performance optimization",
      status: "Under Review",
      priority: "Medium",
      created: "3 days ago",
      assignee: "DevOps Team",
    },
  ];

  const supportStats = [
    { number: "< 1hr", label: "Average Response Time" },
    { number: "98%", label: "First Contact Resolution" },
    { number: "24/5", label: "Support Coverage" },
    { number: "99.9%", label: "Client Satisfaction" },
  ];

  const handleTicketSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    // Simulate ticket submission
    await new Promise((resolve) => setTimeout(resolve, 2000));

    const ticketId = `WDI-2024-${Math.floor(Math.random() * 1000)
      .toString()
      .padStart(3, "0")}`;
    alert(
      `Support ticket ${ticketId} has been created successfully. You'll receive updates via email.`
    );

    // Reset form
    setTicketForm({
      subject: "",
      priority: "",
      category: "",
      description: "",
      projectId: "",
    });
    setIsSubmitting(false);
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "Resolved":
        return "text-green-400 bg-green-500/20";
      case "In Progress":
        return "text-blue-400 bg-blue-500/20";
      case "Under Review":
        return "text-yellow-400 bg-yellow-500/20";
      default:
        return "text-gray-400 bg-gray-500/20";
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "Critical":
        return "text-red-400";
      case "High":
        return "text-orange-400";
      case "Medium":
        return "text-yellow-400";
      case "Low":
        return "text-green-400";
      default:
        return "text-gray-400";
    }
  };

  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}

      {/* Hero Section */}
      <section className="pt-24 pb-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <div className="flex items-center justify-center gap-2 mb-6">
              <Headphones className="w-6 h-6 text-[#E5195E]" />
              <Badge
                variant="outline"
                className="border-[#E5195E]/20 text-[#E5195E]"
              >
                Client Support
              </Badge>
            </div>
            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
              Client Support: Dedicated Assistance for Our Valued Partners
            </h1>
            <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
              At WDI, our commitment to your success extends far beyond project
              delivery. Our dedicated Client Support team is here to provide
              prompt assistance, answer your questions, and ensure the ongoing
              performance and smooth operation of your solutions.
            </p>
          </div>
        </div>
      </section>

      {/* Support Stats */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            {supportStats.map((stat, index) => (
              <div key={index}>
                <div className="text-4xl font-bold bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent mb-2">
                  {stat.number}
                </div>
                <div className="text-muted-foreground">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Main Content */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <Tabs defaultValue="support-channels" className="max-w-6xl mx-auto">
            <TabsList className="grid w-full grid-cols-4 bg-card/50 border border-white/10">
              <TabsTrigger
                value="support-channels"
                className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
              >
                Support Channels
              </TabsTrigger>
              <TabsTrigger
                value="create-ticket"
                className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
              >
                Create Ticket
              </TabsTrigger>
              <TabsTrigger
                value="my-tickets"
                className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
              >
                My Tickets
              </TabsTrigger>
              <TabsTrigger
                value="resources"
                className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
              >
                Resources
              </TabsTrigger>
            </TabsList>

            {/* Support Channels Tab */}
            <TabsContent value="support-channels" className="mt-8">
              <div className="space-y-8">
                <div className="text-center">
                  <h2 className="text-2xl font-bold text-white mb-4">
                    How to Get Support
                  </h2>
                  <p className="text-muted-foreground">
                    Multiple ways to reach our support team based on your needs
                  </p>
                </div>

                <div className="grid md:grid-cols-2 gap-6">
                  {supportChannels.map((channel, index) => {
                    const Icon = channel.icon;
                    return (
                      <Card
                        key={index}
                        className={`border-white/10 ${
                          channel.highlight
                            ? "bg-[#E5195E]/10 border-[#E5195E]/30"
                            : "bg-card/50"
                        } hover:border-[#E5195E]/30 transition-all duration-300`}
                      >
                        <CardContent className="p-6">
                          <div className="flex items-start gap-4">
                            <div
                              className={`w-12 h-12 rounded-xl ${
                                channel.highlight
                                  ? "bg-[#E5195E]"
                                  : "bg-[#E5195E]/20"
                              } flex items-center justify-center`}
                            >
                              <Icon
                                className={`w-6 h-6 ${
                                  channel.highlight
                                    ? "text-white"
                                    : "text-[#E5195E]"
                                }`}
                              />
                            </div>
                            <div className="flex-1">
                              <h3 className="text-lg font-semibold text-white mb-2">
                                {channel.title}
                              </h3>
                              <p className="text-muted-foreground mb-3">
                                {channel.description}
                              </p>

                              {channel.monitored && (
                                <div className="flex items-center gap-2 mb-3">
                                  <Clock className="w-4 h-4 text-green-400" />
                                  <span className="text-sm text-green-400">
                                    {channel.monitored}
                                  </span>
                                </div>
                              )}

                              {channel.response && (
                                <div className="flex items-center gap-2 mb-3">
                                  <CheckCircle className="w-4 h-4 text-blue-400" />
                                  <span className="text-sm text-blue-400">
                                    Response time: {channel.response}
                                  </span>
                                </div>
                              )}

                              {channel.availability && (
                                <div className="flex items-center gap-2 mb-3">
                                  <Globe className="w-4 h-4 text-yellow-400" />
                                  <span className="text-sm text-yellow-400">
                                    {channel.availability}
                                  </span>
                                </div>
                              )}

                              <Button
                                className={`${
                                  channel.highlight
                                    ? "bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                                    : "bg-white/10 hover:bg-white/20 text-white"
                                }`}
                              >
                                {channel.action}
                                <ArrowRight className="ml-2 w-4 h-4" />
                              </Button>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    );
                  })}
                </div>

                {/* Severity Levels */}
                <div className="mt-12">
                  <h3 className="text-xl font-semibold text-white mb-6 text-center">
                    Support Priority Levels
                  </h3>
                  <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {severityLevels.map((level, index) => {
                      const Icon = level.icon;
                      return (
                        <Card
                          key={index}
                          className="bg-card/50 border-white/10"
                        >
                          <CardContent className="p-4 text-center">
                            <div
                              className={`w-12 h-12 rounded-xl ${level.bgColor} flex items-center justify-center mx-auto mb-3`}
                            >
                              <Icon className={`w-6 h-6 ${level.color}`} />
                            </div>
                            <h4 className={`font-semibold mb-2 ${level.color}`}>
                              {level.level}
                            </h4>
                            <p className="text-muted-foreground text-sm mb-2">
                              {level.description}
                            </p>
                            <div className="text-xs text-white/70">
                              {level.sla}
                            </div>
                          </CardContent>
                        </Card>
                      );
                    })}
                  </div>
                </div>
              </div>
            </TabsContent>

            {/* Create Ticket Tab */}
            <TabsContent value="create-ticket" className="mt-8">
              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-8">
                  <h2 className="text-2xl font-bold text-white mb-6">
                    Submit a Support Ticket
                  </h2>

                  <form onSubmit={handleTicketSubmit} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-6">
                      <div>
                        <label className="block text-sm font-medium text-white mb-2">
                          Subject *
                        </label>
                        <Input
                          required
                          value={ticketForm.subject}
                          onChange={(e) =>
                            setTicketForm((prev) => ({
                              ...prev,
                              subject: e.target.value,
                            }))
                          }
                          placeholder="Brief description of the issue"
                          className="bg-background/50 border-white/10"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-white mb-2">
                          Priority *
                        </label>
                        <Select
                          value={ticketForm.priority}
                          onValueChange={(value) =>
                            setTicketForm((prev) => ({
                              ...prev,
                              priority: value,
                            }))
                          }
                        >
                          <SelectTrigger className="bg-background/50 border-white/10">
                            <SelectValue placeholder="Select priority level" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="critical">
                              Critical - System Down
                            </SelectItem>
                            <SelectItem value="high">
                              High - Major Functionality Impaired
                            </SelectItem>
                            <SelectItem value="medium">
                              Medium - Minor Issues
                            </SelectItem>
                            <SelectItem value="low">
                              Low - Questions/Requests
                            </SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-white mb-2">
                          Category *
                        </label>
                        <Select
                          value={ticketForm.category}
                          onValueChange={(value) =>
                            setTicketForm((prev) => ({
                              ...prev,
                              category: value,
                            }))
                          }
                        >
                          <SelectTrigger className="bg-background/50 border-white/10">
                            <SelectValue placeholder="Select category" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="bug">Bug Report</SelectItem>
                            <SelectItem value="feature">
                              Feature Request
                            </SelectItem>
                            <SelectItem value="performance">
                              Performance Issue
                            </SelectItem>
                            <SelectItem value="security">
                              Security Concern
                            </SelectItem>
                            <SelectItem value="integration">
                              Integration Support
                            </SelectItem>
                            <SelectItem value="maintenance">
                              Maintenance Request
                            </SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-white mb-2">
                          Project ID
                        </label>
                        <Input
                          value={ticketForm.projectId}
                          onChange={(e) =>
                            setTicketForm((prev) => ({
                              ...prev,
                              projectId: e.target.value,
                            }))
                          }
                          placeholder="e.g., WDI-PROJ-001"
                          className="bg-background/50 border-white/10"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-white mb-2">
                        Description *
                      </label>
                      <Textarea
                        required
                        value={ticketForm.description}
                        onChange={(e) =>
                          setTicketForm((prev) => ({
                            ...prev,
                            description: e.target.value,
                          }))
                        }
                        placeholder="Please provide detailed information about the issue, including steps to reproduce, expected vs actual behavior, and any error messages..."
                        rows={6}
                        className="bg-background/50 border-white/10"
                      />
                    </div>

                    <Button
                      type="submit"
                      disabled={isSubmitting}
                      className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                    >
                      {isSubmitting ? (
                        "Creating Ticket..."
                      ) : (
                        <>
                          Submit Support Ticket
                          <Send className="ml-2 w-4 h-4" />
                        </>
                      )}
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </TabsContent>

            {/* My Tickets Tab */}
            <TabsContent value="my-tickets" className="mt-8">
              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-8">
                  <div className="flex items-center justify-between mb-6">
                    <h2 className="text-2xl font-bold text-white">
                      My Support Tickets
                    </h2>
                    <Button className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
                      View All Tickets
                      <ExternalLink className="ml-2 w-4 h-4" />
                    </Button>
                  </div>

                  <div className="space-y-4">
                    {recentTickets.map((ticket, index) => (
                      <Card
                        key={index}
                        className="bg-background/30 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
                      >
                        <CardContent className="p-6">
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center gap-3 mb-2">
                                <h3 className="text-white font-medium">
                                  {ticket.subject}
                                </h3>
                                <Badge
                                  className={`text-xs ${getStatusColor(
                                    ticket.status
                                  )}`}
                                >
                                  {ticket.status}
                                </Badge>
                              </div>
                              <div className="flex items-center gap-4 text-sm text-muted-foreground">
                                <span>ID: {ticket.id}</span>
                                <span
                                  className={getPriorityColor(ticket.priority)}
                                >
                                  Priority: {ticket.priority}
                                </span>
                                <span>Created: {ticket.created}</span>
                                <span>Assigned to: {ticket.assignee}</span>
                              </div>
                            </div>
                            <Button
                              variant="outline"
                              size="sm"
                              className="border-white/20 text-white hover:bg-white/10"
                            >
                              View Details
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            {/* Resources Tab */}
            <TabsContent value="resources" className="mt-8">
              <div className="space-y-8">
                <div className="text-center">
                  <h2 className="text-2xl font-bold text-white mb-4">
                    Self-Help Resources
                  </h2>
                  <p className="text-muted-foreground">
                    Find answers and resources to help resolve common issues
                  </p>
                </div>

                <div className="grid md:grid-cols-2 gap-6">
                  {selfHelpResources.map((resource, index) => {
                    const Icon = resource.icon;
                    return (
                      <Card
                        key={index}
                        className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
                      >
                        <CardContent className="p-6">
                          <div className="flex items-start gap-4">
                            <div className="w-12 h-12 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
                              <Icon className="w-6 h-6 text-[#E5195E]" />
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-2">
                                <h3 className="text-lg font-semibold text-white">
                                  {resource.title}
                                </h3>
                                {resource.protected && (
                                  <Shield
                                    className="w-4 h-4 text-yellow-400"
                                    aria-label="Protected Content"
                                  />
                                )}
                              </div>
                              <p className="text-muted-foreground mb-3">
                                {resource.description}
                              </p>
                              <div className="flex items-center justify-between">
                                <span className="text-sm text-[#E5195E]">
                                  {resource.items}
                                </span>
                                <Button
                                  variant="outline"
                                  size="sm"
                                  className="border-white/20 text-white hover:bg-white/10"
                                >
                                  {resource.action}
                                  <ArrowRight className="ml-2 w-3 h-3" />
                                </Button>
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    );
                  })}
                </div>

                {/* Quick Search */}
                <Card className="bg-card/50 border-white/10">
                  <CardContent className="p-6">
                    <h3 className="text-lg font-semibold text-white mb-4">
                      Quick Search
                    </h3>
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
                      <Input
                        placeholder="Search documentation, FAQs, and knowledge base..."
                        className="pl-12 bg-background/50 border-white/10"
                      />
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl font-bold text-white mb-6">
              Need Immediate Assistance?
            </h2>
            <p className="text-lg text-muted-foreground mb-8">
              Our support team is standing by to help you resolve any issues and
              ensure your systems run smoothly.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
              >
                Access Support Portal
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white/20 text-white hover:bg-white/10"
              >
                Contact Your Project Manager
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* <Footer /> */}
    </div>
  );
};