import Link from 'next/link'
import { PlusCircle, ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { DashboardHeader } from '@/components/dashboard/dashboard-header'
import { DashboardStats } from '@/components/dashboard/dashboard-stats'
import { mockProperties, mockOwners } from '@/lib/mock-data'

function formatPrice(value: number): string {
  return new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL',
    maximumFractionDigits: 0,
  }).format(value)
}

export default function DashboardPage() {
  const recentProperties = mockProperties.slice(0, 5)
  const recentOwners = mockOwners.slice(0, 5)

  return (
    <>
      <DashboardHeader
        title="Dashboard"
        description="Visão geral do seu negócio imobiliário"
      >
        <Link href="/dashboard/imoveis/novo">
          <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
            <PlusCircle className="size-4 mr-2" />
            Novo Imóvel
          </Button>
        </Link>
      </DashboardHeader>

      <main className="p-4 lg:p-8 space-y-8">
        {/* Stats */}
        <DashboardStats />

        {/* Recent Activity Grid */}
        <div className="grid lg:grid-cols-2 gap-6">
          {/* Recent Properties */}
          <div className="bg-card rounded-xl border border-border/50">
            <div className="p-6 border-b border-border flex items-center justify-between">
              <div>
                <h2 className="font-semibold text-foreground">Imóveis Recentes</h2>
                <p className="text-sm text-muted-foreground">
                  Últimos imóveis cadastrados
                </p>
              </div>
              <Link href="/dashboard/imoveis">
                <Button variant="ghost" size="sm" className="text-primary">
                  Ver todos
                  <ArrowRight className="size-4 ml-1" />
                </Button>
              </Link>
            </div>
            <div className="divide-y divide-border">
              {recentProperties.map((property) => (
                <div
                  key={property.id}
                  className="p-4 flex items-center gap-4 hover:bg-muted/50 transition-colors"
                >
                  <div className="size-14 rounded-lg overflow-hidden flex-shrink-0">
                    <img
                      src={property.images[0]}
                      alt={property.title}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-foreground truncate">
                      {property.title}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      {property.neighborhood}, {property.city}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="font-semibold text-primary">
                      {formatPrice(property.price)}
                    </p>
                    <p className="text-xs text-muted-foreground">
                      {property.area}m² • {property.bedrooms} quartos
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Recent Owners */}
          <div className="bg-card rounded-xl border border-border/50">
            <div className="p-6 border-b border-border flex items-center justify-between">
              <div>
                <h2 className="font-semibold text-foreground">Proprietários Recentes</h2>
                <p className="text-sm text-muted-foreground">
                  Últimos proprietários cadastrados
                </p>
              </div>
              <Link href="/dashboard/proprietarios">
                <Button variant="ghost" size="sm" className="text-primary">
                  Ver todos
                  <ArrowRight className="size-4 ml-1" />
                </Button>
              </Link>
            </div>
            <div className="divide-y divide-border">
              {recentOwners.map((owner) => (
                <div
                  key={owner.id}
                  className="p-4 flex items-center gap-4 hover:bg-muted/50 transition-colors"
                >
                  <div className="size-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <span className="text-primary font-semibold">
                      {owner.name.split(' ').map((n) => n[0]).slice(0, 2).join('')}
                    </span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-foreground">{owner.name}</p>
                    <p className="text-sm text-muted-foreground truncate">
                      {owner.email}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-medium text-foreground">
                      {owner.properties.length} {owner.properties.length === 1 ? 'imóvel' : 'imóveis'}
                    </p>
                    <p className="text-xs text-muted-foreground">
                      {owner.phone}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
    </>
  )
}