"use client";

import React, { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Plus } from "lucide-react";

export function SuppliesNavigationDemo() {
  const [activeMainTab, setActiveMainTab] = useState("fulfillment");
  const [activeFulfillmentTab, setActiveFulfillmentTab] = useState("goods");
  const [activeMarketplaceTab, setActiveMarketplaceTab] =
    useState("wildberries");

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-white mb-4">
          Навигация поставок
        </h2>
        <p className="text-white/70 mb-6">
          Компоненты навигации, используемые в разделе "Мои поставки"
        </p>
      </div>

      <div className="space-y-2">
        {/* Основная навигация поставок */}
        <Card className="p-6 bg-white/5 border-white/10">
          <h3 className="text-lg font-semibold text-white mb-4">
            Основная навигация
          </h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <TabsList className="grid grid-cols-2 bg-white/10 backdrop-blur border-white/20 w-fit">
                <TabsTrigger
                  value="fulfillment"
                  className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
                  onClick={() => setActiveMainTab("fulfillment")}
                >
                  Поставки на ФФ
                </TabsTrigger>
                <TabsTrigger
                  value="marketplace"
                  className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-500 data-[state=active]:to-pink-500 data-[state=active]:text-white text-white/60 px-8"
                  onClick={() => setActiveMainTab("marketplace")}
                >
                  Поставки на Маркетплейсы
                </TabsTrigger>
              </TabsList>

              <Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg">
                <Plus className="h-4 w-4 mr-2" />
                Создать поставку
              </Button>
            </div>
          </div>
        </Card>

        {/* Подвкладки для ФФ */}
        <Card className="p-6 bg-white/5 border-white/10">
          <h3 className="text-lg font-semibold text-white mb-4">
            Навигация ФФ поставок
          </h3>
          <TabsList className="grid grid-cols-3 bg-white/5 backdrop-blur border-white/10 mb-4 w-fit">
            <TabsTrigger
              value="goods"
              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
              onClick={() => setActiveFulfillmentTab("goods")}
            >
              Товар
            </TabsTrigger>
            <TabsTrigger
              value="supplies"
              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
              onClick={() => setActiveFulfillmentTab("supplies")}
            >
              Расходники
            </TabsTrigger>
            <TabsTrigger
              value="returns"
              className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
              onClick={() => setActiveFulfillmentTab("returns")}
            >
              Возвраты с ПВЗ
            </TabsTrigger>
          </TabsList>
          <div className="text-white/60 text-sm">
            Активная вкладка:{" "}
            <span className="text-white font-medium">
              {activeFulfillmentTab}
            </span>
          </div>
        </Card>
      </div>

      {/* Подвкладки для Маркетплейсов */}
      <Card className="p-6 bg-white/5 border-white/10">
        <h3 className="text-lg font-semibold text-white mb-4">
          Навигация Маркетплейс поставок
        </h3>
        <TabsList className="grid grid-cols-2 bg-white/5 backdrop-blur border-white/10 mb-4 w-fit">
          <TabsTrigger
            value="wildberries"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
            onClick={() => setActiveMarketplaceTab("wildberries")}
          >
            Поставки на Wildberries
          </TabsTrigger>
          <TabsTrigger
            value="ozon"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-white/60 px-6"
            onClick={() => setActiveMarketplaceTab("ozon")}
          >
            Поставки на Ozon
          </TabsTrigger>
        </TabsList>
        <div className="text-white/60 text-sm">
          Активная вкладка:{" "}
          <span className="text-white font-medium">{activeMarketplaceTab}</span>
        </div>
      </Card>

      {/* Примеры использования */}
      <Card className="p-6 bg-white/5 border-white/10">
        <h3 className="text-lg font-semibold text-white mb-4">
          Примеры использования
        </h3>
        <div className="space-y-4">
          <div>
            <h4 className="text-white font-medium mb-2">
              Стили кнопок навигации:
            </h4>
            <div className="space-y-2 text-white/70 text-sm">
              <p>
                •{" "}
                <code className="bg-white/10 px-2 py-1 rounded">
                  bg-white/10 backdrop-blur border-white/20
                </code>{" "}
                - основной фон TabsList
              </p>
              <p>
                •{" "}
                <code className="bg-white/10 px-2 py-1 rounded">
                  data-[state=active]:bg-gradient-to-r from-purple-500
                  to-pink-500
                </code>{" "}
                - активное состояние основных вкладок
              </p>
              <p>
                •{" "}
                <code className="bg-white/10 px-2 py-1 rounded">
                  data-[state=active]:bg-white/20
                </code>{" "}
                - активное состояние подвкладок
              </p>
              <p>
                •{" "}
                <code className="bg-white/10 px-2 py-1 rounded">
                  text-white/60
                </code>{" "}
                - неактивный текст
              </p>
              <p>
                •{" "}
                <code className="bg-white/10 px-2 py-1 rounded">
                  data-[state=active]:text-white
                </code>{" "}
                - активный текст
              </p>
            </div>
          </div>

          <div>
            <h4 className="text-white font-medium mb-2">
              Структура компонентов:
            </h4>
            <div className="space-y-2 text-white/70 text-sm">
              <p>• Главные вкладки используют градиентный фон при активации</p>
              <p>• Подвкладки используют полупрозрачный белый фон</p>
              <p>• Кнопка создания поставки имеет градиент purple-to-pink</p>
              <p>• Все элементы используют backdrop-blur эффект</p>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}