"use client";

import { useAuth } from "@/hooks/useAuth";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useSidebar } from "@/hooks/useSidebar";
import { Card } from "@/components/ui/card";
import { Calculator } from "lucide-react";

export function LogistEconomicsPage() {
  const { user } = useAuth();
  const { getSidebarMargin } = useSidebar();

  const getOrganizationName = () => {
    if (user?.organization?.name) {
      return user.organization.name;
    }
    if (user?.organization?.fullName) {
      return user.organization.fullName;
    }
    return "Вашей организации";
  };

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main
        className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}
      >
        <div className="p-8">
          {/* Заголовок страницы */}
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-white mb-2">
              Экономика логистики
            </h1>
            <p className="text-white/60">
              Финансовые показатели {getOrganizationName()}
            </p>
          </div>

          {/* Карточка-заглушка */}
          <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
            <div className="flex items-center space-x-3 mb-4">
              <Calculator className="h-8 w-8 text-orange-400" />
              <h3 className="text-xl font-semibold text-white">
                Экономические показатели
              </h3>
            </div>
            <div className="space-y-2">
              <p className="text-white font-medium">
                Раздел находится в разработке
              </p>
              <p className="text-white/60 text-sm">Будет добавлен позже</p>
            </div>
          </Card>
        </div>
      </main>
    </div>
  );
}