import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/contexts/AuthContext";
import { aethexToast } from "@/lib/aethex-toast";
import { supabase } from "@/lib/supabase";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import LoadingScreen from "@/components/LoadingScreen";
import ProjectStatusWidget from "@/components/ProjectStatusWidget";
import {
  FileText,
  DollarSign,
  TrendingUp,
  Users,
  Calendar,
  CheckCircle,
  AlertCircle,
  BarChart3,
  Clock,
  ArrowRight,
  MessageSquare,
  Phone,
  Briefcase,
  ArrowDown,
  MapPin,
} from "lucide-react";

const API_BASE = import.meta.env.VITE_API_BASE || "";

export default function ClientHub() {
  const navigate = useNavigate();
  const { user, loading: authLoading } = useAuth();
  const [activeTab, setActiveTab] = useState("overview");
  const [contracts, setContracts] = useState<any[]>([]);
  const [invoices, setInvoices] = useState<any[]>([]);
  const [teamMembers, setTeamMembers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!authLoading && user) {
      loadDashboardData();
    }
  }, [user, authLoading]);

  const loadDashboardData = async () => {
    try {
      setLoading(true);
      const {
        data: { session },
      } = await supabase.auth.getSession();
      const token = session?.access_token;
      if (!token) throw new Error("No auth token");

      // Load contracts for milestone tracking
      const contractRes = await fetch(
        `${API_BASE}/api/corp/contracts?limit=10`,
        {
          headers: { Authorization: `Bearer ${token}` },
        },
      );
      if (contractRes.ok) {
        const data = await contractRes.json();
        setContracts(Array.isArray(data) ? data : data.contracts || []);
      }

      // Load invoices
      const invoiceRes = await fetch(`${API_BASE}/api/corp/invoices?limit=20`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (invoiceRes.ok) {
        const data = await invoiceRes.json();
        setInvoices(Array.isArray(data) ? data : data.invoices || []);
      }

      // Load team members (Account Manager, Solutions Architect)
      const teamRes = await fetch(`${API_BASE}/api/corp/team`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (teamRes.ok) {
        const data = await teamRes.json();
        setTeamMembers(Array.isArray(data) ? data : data.team || []);
      }
    } catch (error: any) {
      console.error("Failed to load CORP dashboard data", error);
      aethexToast({
        message: "Failed to load some dashboard data",
        type: "error",
      });
    } finally {
      setLoading(false);
    }
  };

  if (authLoading || loading) {
    return <LoadingScreen message="Loading CORP Dashboard..." />;
  }

  if (!user) {
    return (
      <Layout>
        <div className="min-h-screen bg-gradient-to-b from-black via-blue-950/30 to-black flex items-center justify-center px-4">
          <div className="max-w-md text-center space-y-6">
            <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-300 to-cyan-300 bg-clip-text text-transparent">
              CORP Client Portal
            </h1>
            <p className="text-gray-400">
              Enterprise solutions for your business
            </p>
            <Button
              onClick={() => navigate("/login")}
              className="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-lg py-6"
            >
              Sign In
            </Button>
          </div>
        </div>
      </Layout>
    );
  }

  const activeContract = contracts.find((c) => c.status === "active");
  const completedMilestones =
    activeContract?.milestones?.filter((m: any) => m.status === "completed")
      .length || 0;
  const totalMilestones = activeContract?.milestones?.length || 0;
  const outstandingInvoices = invoices.filter(
    (i: any) => i.status === "pending" || i.status === "overdue",
  ).length;
  const totalInvoiceValue = invoices.reduce(
    (acc, inv) => acc + (inv.amount || 0),
    0,
  );
  const accountManager = teamMembers.find((t) => t.role === "account_manager");
  const solutionsArchitect = teamMembers.find(
    (t) => t.role === "solutions_architect",
  );

  return (
    <Layout>
      <div className="min-h-screen bg-gradient-to-b from-black via-blue-950/20 to-black py-8">
        <div className="container mx-auto px-4 max-w-7xl space-y-8">
          {/* Header */}
          <div className="space-y-4 animate-slide-down">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
              <div className="space-y-2">
                <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-300 via-cyan-300 to-blue-300 bg-clip-text text-transparent">
                  CORP Client Portal
                </h1>
                <p className="text-gray-400 text-lg">
                  Enterprise solutions, project status, and billing management
                </p>
              </div>
            </div>

            {/* Quick Stats */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-xs text-gray-400 uppercase tracking-wider">
                        Active Projects
                      </p>
                      <p className="text-2xl font-bold text-white mt-1">
                        {contracts.filter((c) => c.status === "active").length}
                      </p>
                    </div>
                    <Briefcase className="h-6 w-6 text-blue-500 opacity-50" />
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-xs text-gray-400 uppercase tracking-wider">
                        Total Invoices
                      </p>
                      <p className="text-2xl font-bold text-white mt-1">
                        ${(totalInvoiceValue / 1000).toFixed(0)}k
                      </p>
                    </div>
                    <DollarSign className="h-6 w-6 text-cyan-500 opacity-50" />
                  </div>
                </CardContent>
              </Card>

              <Card
                className={`bg-gradient-to-br ${outstandingInvoices > 0 ? "from-orange-950/40 to-orange-900/20 border-orange-500/20" : "from-green-950/40 to-green-900/20 border-green-500/20"}`}
              >
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-xs text-gray-400 uppercase tracking-wider">
                        Outstanding
                      </p>
                      <p className="text-2xl font-bold text-white mt-1">
                        {outstandingInvoices}
                      </p>
                    </div>
                    <FileText
                      className="h-6 w-6"
                      style={{
                        color: outstandingInvoices > 0 ? "#f97316" : "#22c55e",
                        opacity: 0.5,
                      }}
                    />
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-xs text-gray-400 uppercase tracking-wider">
                        Team Members
                      </p>
                      <p className="text-2xl font-bold text-white mt-1">
                        {teamMembers.length}
                      </p>
                    </div>
                    <Users className="h-6 w-6 text-purple-500 opacity-50" />
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

          {/* Tabs */}
          <Tabs
            value={activeTab}
            onValueChange={setActiveTab}
            className="w-full"
          >
            <TabsList className="grid w-full grid-cols-4 bg-blue-950/30 border border-blue-500/20 p-1">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="project">Project Status</TabsTrigger>
              <TabsTrigger value="invoices">Invoices & Billing</TabsTrigger>
              <TabsTrigger value="team">My AeThex Team</TabsTrigger>
            </TabsList>

            {/* Overview Tab */}
            <TabsContent value="overview" className="space-y-6 animate-fade-in">
              {/* QuantumLeap Dashboard */}
              <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
                <CardHeader>
                  <CardTitle>My QuantumLeap Dashboard</CardTitle>
                  <CardDescription>
                    Live AI analytics and insights for your project
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="aspect-video bg-black/50 rounded-lg border border-blue-500/20 flex items-center justify-center">
                    <iframe
                      src="https://quantumleap.aethex.dev/embed"
                      className="w-full h-full rounded-lg border-0"
                      title="QuantumLeap Analytics"
                      sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                    />
                  </div>
                  <p className="text-sm text-gray-400 mt-4">
                    Embedded QuantumLeap analytics dashboard. Real-time data
                    about your project performance.
                  </p>
                </CardContent>
              </Card>

              {/* Active Contract Overview */}
              {activeContract ? (
                <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
                  <CardHeader>
                    <CardTitle>Project: {activeContract.title}</CardTitle>
                    <CardDescription>Main engagement overview</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-3 gap-4">
                      <div className="space-y-1">
                        <p className="text-xs text-gray-400 uppercase">
                          Total Value
                        </p>
                        <p className="text-2xl font-bold text-white">
                          ${(activeContract.total_value / 1000).toFixed(0)}k
                        </p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-xs text-gray-400 uppercase">
                          Status
                        </p>
                        <Badge className="bg-blue-600/50 text-blue-100">
                          {activeContract.status}
                        </Badge>
                      </div>
                      <div className="space-y-1">
                        <p className="text-xs text-gray-400 uppercase">
                          Completion
                        </p>
                        <p className="text-2xl font-bold text-cyan-400">
                          {Math.round(
                            (completedMilestones / totalMilestones) * 100,
                          )}
                          %
                        </p>
                      </div>
                    </div>

                    {/* Progress Bar */}
                    <div className="space-y-2">
                      <div className="flex justify-between text-xs text-gray-400">
                        <span>Milestone Progress</span>
                        <span>
                          {completedMilestones} of {totalMilestones}
                        </span>
                      </div>
                      <div className="w-full bg-black/50 rounded-full h-3">
                        <div
                          className="bg-gradient-to-r from-cyan-500 to-blue-500 h-3 rounded-full"
                          style={{
                            width: `${(completedMilestones / totalMilestones) * 100}%`,
                          }}
                        />
                      </div>
                    </div>

                    <div className="flex gap-2">
                      <Button
                        onClick={() => setActiveTab("project")}
                        variant="outline"
                        className="border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10"
                      >
                        View Full Timeline
                        <ArrowRight className="h-4 w-4 ml-2" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ) : (
                <Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
                  <CardContent className="p-8 text-center space-y-4">
                    <Briefcase className="h-12 w-12 mx-auto text-blue-500 opacity-50" />
                    <p className="text-gray-400">
                      No active projects at this time
                    </p>
                  </CardContent>
                </Card>
              )}

              {/* Upcoming Invoices */}
              <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
                <CardHeader>
                  <CardTitle>Recent Invoices</CardTitle>
                  <CardDescription>
                    Your latest billing activity
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  {invoices.length === 0 ? (
                    <div className="text-center py-8">
                      <FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
                      <p className="text-gray-400">No invoices yet</p>
                    </div>
                  ) : (
                    <div className="space-y-3">
                      {invoices.slice(0, 5).map((invoice: any) => (
                        <div
                          key={invoice.id}
                          className="flex items-center justify-between p-3 bg-black/30 rounded-lg border border-purple-500/10"
                        >
                          <div className="flex-1">
                            <p className="font-semibold text-white text-sm">
                              {invoice.invoice_number}
                            </p>
                            <p className="text-xs text-gray-400">
                              {new Date(
                                invoice.created_at,
                              ).toLocaleDateString()}
                            </p>
                          </div>
                          <div className="text-right">
                            <p className="font-semibold text-white">
                              ${invoice.amount?.toLocaleString()}
                            </p>
                            <Badge
                              variant="outline"
                              className={
                                invoice.status === "paid"
                                  ? "bg-green-500/20 border-green-500/30 text-green-300"
                                  : invoice.status === "overdue"
                                    ? "bg-red-500/20 border-red-500/30 text-red-300"
                                    : ""
                              }
                            >
                              {invoice.status}
                            </Badge>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

            {/* Project Status Tab - Gantt Style */}
            <TabsContent value="project" className="space-y-4 animate-fade-in">
              <ProjectStatusWidget
                project={
                  activeContract
                    ? {
                        id: activeContract.id,
                        title: activeContract.title,
                        description: activeContract.description,
                        status: activeContract.status || "active",
                        start_date: activeContract.start_date,
                        end_date: activeContract.end_date,
                        total_value: activeContract.total_value,
                        milestones: activeContract.milestones || [],
                      }
                    : null
                }
                accentColor="cyan"
              />
            </TabsContent>

            {/* Invoices & Billing Tab */}
            <TabsContent value="invoices" className="space-y-4 animate-fade-in">
              <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
                <CardHeader>
                  <CardTitle>Invoices & Billing</CardTitle>
                  <CardDescription>
                    Secure portal to manage all invoices and payments
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* Billing Summary */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="p-4 bg-black/30 rounded-lg border border-cyan-500/20 space-y-1">
                      <p className="text-xs text-gray-400 uppercase">
                        Total Invoices
                      </p>
                      <p className="text-3xl font-bold text-white">
                        ${(totalInvoiceValue / 1000).toFixed(0)}k
                      </p>
                    </div>
                    <div className="p-4 bg-black/30 rounded-lg border border-green-500/20 space-y-1">
                      <p className="text-xs text-gray-400 uppercase">Paid</p>
                      <p className="text-3xl font-bold text-green-400">
                        $
                        {(
                          invoices
                            .filter((i) => i.status === "paid")
                            .reduce((acc, i) => acc + (i.amount || 0), 0) / 1000
                        ).toFixed(0)}
                        k
                      </p>
                    </div>
                    <div className="p-4 bg-black/30 rounded-lg border border-orange-500/20 space-y-1">
                      <p className="text-xs text-gray-400 uppercase">
                        Outstanding
                      </p>
                      <p className="text-3xl font-bold text-orange-400">
                        $
                        {(
                          invoices
                            .filter((i) => i.status !== "paid")
                            .reduce((acc, i) => acc + (i.amount || 0), 0) / 1000
                        ).toFixed(0)}
                        k
                      </p>
                    </div>
                  </div>

                  {/* Invoices List */}
                  {invoices.length === 0 ? (
                    <div className="text-center py-12">
                      <FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
                      <p className="text-gray-400">No invoices to display</p>
                    </div>
                  ) : (
                    <div className="space-y-3">
                      {invoices.map((invoice: any) => (
                        <div
                          key={invoice.id}
                          className="p-4 bg-black/30 rounded-lg border border-cyan-500/10 hover:border-cyan-500/30 transition space-y-3"
                        >
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <h4 className="font-semibold text-white">
                                {invoice.invoice_number}
                              </h4>
                              <p className="text-sm text-gray-400">
                                {invoice.description}
                              </p>
                            </div>
                            <div className="text-right">
                              <p className="text-lg font-semibold text-white">
                                ${invoice.amount?.toLocaleString()}
                              </p>
                              <Badge
                                className={
                                  invoice.status === "paid"
                                    ? "bg-green-500/20 border-green-500/30 text-green-300"
                                    : invoice.status === "overdue"
                                      ? "bg-red-500/20 border-red-500/30 text-red-300"
                                      : "bg-yellow-500/20 border-yellow-500/30 text-yellow-300"
                                }
                              >
                                {invoice.status}
                              </Badge>
                            </div>
                          </div>
                          <div className="grid grid-cols-2 gap-4 text-sm text-gray-400">
                            <div>
                              <span>Issued:</span>
                              <p className="text-white font-semibold">
                                {new Date(
                                  invoice.issued_date,
                                ).toLocaleDateString()}
                              </p>
                            </div>
                            <div>
                              <span>Due:</span>
                              <p className="text-white font-semibold">
                                {new Date(
                                  invoice.due_date,
                                ).toLocaleDateString()}
                              </p>
                            </div>
                          </div>
                          {invoice.status !== "paid" && (
                            <Button
                              size="sm"
                              variant="outline"
                              className="w-full border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10"
                            >
                              Pay Now
                              <ArrowRight className="h-4 w-4 ml-2" />
                            </Button>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

            {/* My AeThex Team Tab */}
            <TabsContent value="team" className="space-y-4 animate-fade-in">
              <Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
                <CardHeader>
                  <CardTitle>Your Dedicated AeThex Team</CardTitle>
                  <CardDescription>
                    White-glove service with personalized support
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {/* Account Manager */}
                    {accountManager ? (
                      <div className="p-6 bg-black/30 rounded-lg border border-blue-500/20 space-y-4">
                        <div className="flex items-start gap-4">
                          <img
                            src={
                              accountManager.avatar_url ||
                              "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"
                            }
                            alt={accountManager.full_name}
                            className="w-16 h-16 rounded-full border-2 border-blue-500/40 object-cover"
                          />
                          <div className="flex-1">
                            <Badge className="bg-blue-600/50 text-blue-100 mb-2">
                              Account Manager
                            </Badge>
                            <h3 className="text-lg font-semibold text-white">
                              {accountManager.full_name}
                            </h3>
                            <p className="text-sm text-gray-400 mb-2">
                              {accountManager.title}
                            </p>
                            <p className="text-sm text-gray-300 mb-4">
                              {accountManager.bio}
                            </p>
                            <div className="flex gap-2">
                              <Button
                                size="sm"
                                variant="outline"
                                className="border-blue-500/30 text-blue-300 hover:bg-blue-500/10"
                              >
                                <MessageSquare className="h-4 w-4 mr-2" />
                                Message
                              </Button>
                              <Button
                                size="sm"
                                variant="outline"
                                className="border-blue-500/30 text-blue-300 hover:bg-blue-500/10"
                              >
                                <Phone className="h-4 w-4 mr-2" />
                                Call
                              </Button>
                              <Button
                                size="sm"
                                className="bg-blue-600 hover:bg-blue-700"
                              >
                                <Calendar className="h-4 w-4 mr-2" />
                                Book Meeting
                              </Button>
                            </div>
                          </div>
                        </div>
                        {accountManager.contact_info && (
                          <div className="pt-4 border-t border-blue-500/20 space-y-2 text-sm">
                            <p className="text-gray-400">
                              <span className="font-semibold">Email:</span>{" "}
                              {accountManager.contact_info.email}
                            </p>
                            {accountManager.contact_info.phone && (
                              <p className="text-gray-400">
                                <span className="font-semibold">Phone:</span>{" "}
                                {accountManager.contact_info.phone}
                              </p>
                            )}
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="p-6 bg-black/30 rounded-lg border border-blue-500/20 text-center py-12">
                        <Users className="h-12 w-12 mx-auto text-blue-500 opacity-50 mb-4" />
                        <p className="text-gray-400">Account Manager TBA</p>
                      </div>
                    )}

                    {/* Solutions Architect */}
                    {solutionsArchitect ? (
                      <div className="p-6 bg-black/30 rounded-lg border border-purple-500/20 space-y-4">
                        <div className="flex items-start gap-4">
                          <img
                            src={
                              solutionsArchitect.avatar_url ||
                              "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
                            }
                            alt={solutionsArchitect.full_name}
                            className="w-16 h-16 rounded-full border-2 border-purple-500/40 object-cover"
                          />
                          <div className="flex-1">
                            <Badge className="bg-purple-600/50 text-purple-100 mb-2">
                              Solutions Architect
                            </Badge>
                            <h3 className="text-lg font-semibold text-white">
                              {solutionsArchitect.full_name}
                            </h3>
                            <p className="text-sm text-gray-400 mb-2">
                              {solutionsArchitect.title}
                            </p>
                            <p className="text-sm text-gray-300 mb-4">
                              {solutionsArchitect.bio}
                            </p>
                            <div className="flex gap-2">
                              <Button
                                size="sm"
                                variant="outline"
                                className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10"
                              >
                                <MessageSquare className="h-4 w-4 mr-2" />
                                Message
                              </Button>
                              <Button
                                size="sm"
                                variant="outline"
                                className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10"
                              >
                                <Phone className="h-4 w-4 mr-2" />
                                Call
                              </Button>
                              <Button
                                size="sm"
                                className="bg-purple-600 hover:bg-purple-700"
                              >
                                <Calendar className="h-4 w-4 mr-2" />
                                Book Meeting
                              </Button>
                            </div>
                          </div>
                        </div>
                        {solutionsArchitect.contact_info && (
                          <div className="pt-4 border-t border-purple-500/20 space-y-2 text-sm">
                            <p className="text-gray-400">
                              <span className="font-semibold">Email:</span>{" "}
                              {solutionsArchitect.contact_info.email}
                            </p>
                            {solutionsArchitect.contact_info.phone && (
                              <p className="text-gray-400">
                                <span className="font-semibold">Phone:</span>{" "}
                                {solutionsArchitect.contact_info.phone}
                              </p>
                            )}
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="p-6 bg-black/30 rounded-lg border border-purple-500/20 text-center py-12">
                        <Users className="h-12 w-12 mx-auto text-purple-500 opacity-50 mb-4" />
                        <p className="text-gray-400">Solutions Architect TBA</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Quick Support Card */}
              <Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
                <CardHeader>
                  <CardTitle>Need Support?</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button className="w-full bg-cyan-600 hover:bg-cyan-700">
                    <MessageSquare className="h-4 w-4 mr-2" />
                    Open Support Ticket
                  </Button>
                  <Button
                    variant="outline"
                    className="w-full border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10"
                  >
                    <Phone className="h-4 w-4 mr-2" />
                    Schedule Support Call
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </Layout>
  );
}