import { Tabs, Card } from "antd";
import { MessageCircle, Star, ShieldQuestion } from "lucide-react";
import SupportTab from "./SupportTab";
import FeedbackTab from "./FeedbackTab";
import { useAuth } from "../../hooks/useAuth";

export default function Support() {
  const { user } = useAuth();
  const isAdmin = user?.role === "ADMIN";

  const items = [
    ...(!isAdmin
      ? [
          {
            key: "support",
            label: (
              <span className="flex items-center gap-2">
                <MessageCircle className="h-4 w-4" />
                Support Tickets
              </span>
            ),
            children: <SupportTab />,
          },
        ]
      : []),
    {
      key: "feedback",
      label: (
        <span className="flex items-center gap-2">
          <Star className="h-4 w-4" />
          Feedback
        </span>
      ),
      children: <FeedbackTab />,
    },
  ];

  return (
    <div className="flex flex-col gap-4 px-4 py-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
            <ShieldQuestion className="text-blue-600" /> Support & Feedback
          </h2>
          <p className="text-slate-500 text-sm mt-1">
            Manage user support tickets and review platform feedback.
          </p>
        </div>
      </div>

      <Card className="shadow-sm border border-slate-200 rounded-xl">
        <Tabs
          defaultActiveKey={isAdmin ? "feedback" : "support"}
          items={items}
          className="custom-tabs"
        />
      </Card>
    </div>
  );
}