import { StatsCard } from '@/components/dashboard/stats-card'
import { ProjectCard } from '@/components/dashboard/project-card'
import { SupportTicketItem } from '@/components/dashboard/support-ticket-item'
import { UpgradeCard } from '@/components/dashboard/upgrade-card'
import { mockProjects, mockSupportTickets, mockDashboardStats, mockCurrentUser } from '@/lib/mock-data'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { Rocket, Bot, Ticket, Calendar, Plus } from 'lucide-react'

export default function DashboardPage() {
  const userProjects = mockProjects
  const userTickets = mockSupportTickets.slice(0, 3)
  const stats = mockDashboardStats

  return (
    <div className="flex-1 w-full max-w-7xl mx-auto p-4 lg:p-8 flex flex-col gap-8">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 pb-2">
        <div className="flex flex-col gap-1">
          <h1 className="text-3xl lg:text-4xl font-black tracking-tight text-foreground">
            Welcome back, {mockCurrentUser.name.split(' ')[0]}
          </h1>
          <p className="text-muted-foreground text-base font-medium">
            Here&apos;s what&apos;s happening with your digital products today.
          </p>
        </div>
        <Button className="glow-button bg-primary hover:bg-primary-glow text-white">
          <Plus className="w-5 h-5 mr-2" />
          Request New Service
        </Button>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatsCard
          value={stats.totalProjects}
          label="Active Projects"
          icon={Rocket}
          trend="+1 this month"
        />
        <StatsCard
          value={stats.activeProjects}
          label="Active Automations"
          icon={Bot}
          trend="All Systems Go"
          trendColor="bg-slate-500/10 text-slate-400 border-slate-500/10"
        />
        <StatsCard
          value={stats.pendingTickets}
          label="Pending Tickets"
          icon={Ticket}
          trend="Action Required"
          trendColor="bg-orange-500/10 text-orange-400 border-orange-500/10"
          iconColor="bg-orange-500/10 text-orange-400"
        />
        <StatsCard
          value="5 Days"
          label="Next Launch"
          icon={Calendar}
          iconColor="bg-emerald-500/10 text-emerald-400"
        />
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
        {/* Left Column - Projects */}
        <div className="xl:col-span-2 flex flex-col gap-6">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold text-foreground">Your Projects</h2>
            <Button variant="link" asChild className="text-primary">
              <Link href="/dashboard/projects">View All →</Link>
            </Button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {userProjects.map((project) => (
              <ProjectCard key={project.id} project={project} />
            ))}
          </div>
        </div>

        {/* Right Column - Support & Upgrade */}
        <div className="flex flex-col gap-6">
          {/* Upgrade Card */}
          <UpgradeCard />

          {/* Support Tickets */}
          <div className="bg-card border border-border rounded-2xl p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-bold text-foreground">Support Tickets</h2>
              <Button variant="link" asChild className="text-primary">
                <Link href="/dashboard/support">View All →</Link>
              </Button>
            </div>

            <div className="flex flex-col gap-2">
              {userTickets.map((ticket) => (
                <SupportTicketItem key={ticket.id} ticket={ticket} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}