"use client"

import { useAuth } from '@/hooks/useAuth'
import { Card } from '@/components/ui/card'
import { Building2, Phone } from 'lucide-react'
import { Sidebar } from './sidebar'
import { useSidebar } from '@/hooks/useSidebar'

export function DashboardHome() {
  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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Информация об организации */}
            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3 mb-4">
                <Building2 className="h-8 w-8 text-purple-400" />
                <h3 className="text-xl font-semibold text-white">Организация</h3>
              </div>
              <div className="space-y-2">
                <p className="text-white font-medium">
                  {getOrganizationName()}
                </p>
                {user?.organization?.inn && (
                  <p className="text-white/60 text-sm">
                    ИНН: {user.organization.inn}
                  </p>
                )}
              </div>
            </Card>

            {/* Контактная информация */}
            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3 mb-4">
                <Phone className="h-8 w-8 text-green-400" />
                <h3 className="text-xl font-semibold text-white">Контакты</h3>
              </div>
              <div className="space-y-2">
                <p className="text-white font-medium">
                  +{user?.phone}
                </p>
                <p className="text-white/60 text-sm">
                  Основной номер
                </p>
              </div>
            </Card>

            {/* Статистика или дополнительная информация */}
            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3 mb-4">
                <div className="h-8 w-8 bg-blue-500 rounded-full flex items-center justify-center">
                  <span className="text-white text-sm font-bold">SF</span>
                </div>
                <h3 className="text-xl font-semibold text-white">SferaV</h3>
              </div>
              <div className="space-y-2">
                <p className="text-white font-medium">
                  Система управления бизнесом
                </p>
                <p className="text-white/60 text-sm">
                  Версия 1.0
                </p>
              </div>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}