// src/app/(dashboard)/dashboard/page.tsx
'use client'

import { useSession } from 'next-auth/react'
import Link from 'next/link'
import { Button } from '@/components/ui/Button'

export default function DashboardPage() {
  const { data: session } = useSession()
  const role = session?.user?.role ?? ''

  const cards: { label: string; desc: string; href: string; cta: string; roles: string[] }[] = [
    {
      label: 'Browse Jobs',
      desc: 'Search and apply for jobs matching your skills.',
      href: '/jobs',
      cta: 'View Jobs',
      roles: ['JOB_SEEKER', 'ADMIN', 'EMPLOYER', 'SERVICE_PROVIDER'],
    },
    {
      label: 'Resume Builder',
      desc: 'Build and export your professional resume with 6 original templates.',
      href: '/resume/builder',
      cta: 'Open Builder',
      roles: ['JOB_SEEKER', 'ADMIN'],
    },
    {
      label: 'Post a Job',
      desc: 'Create a new job listing to find the right candidate.',
      href: '/jobs/create',
      cta: 'Post Job',
      roles: ['EMPLOYER', 'ADMIN'],
    },
    {
      label: 'List a Service',
      desc: 'Offer your skills and services to local clients.',
      href: '/services/create',
      cta: 'Add Service',
      roles: ['SERVICE_PROVIDER', 'ADMIN'],
    },
    {
      label: 'Browse Services',
      desc: 'Find freelancers and service providers near you.',
      href: '/services',
      cta: 'View Services',
      roles: ['JOB_SEEKER', 'ADMIN', 'EMPLOYER', 'SERVICE_PROVIDER'],
    },
    {
      label: 'Admin Panel',
      desc: 'Review and moderate job posts, services, and audit logs.',
      href: '/admin',
      cta: 'Open Admin',
      roles: ['ADMIN'],
    },
  ]

  const visible = cards.filter((c) => c.roles.includes(role))

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">
          Welcome back, {session?.user?.name} 👋
        </h1>
        <p className="page-subtitle">
          Here&apos;s what you can do on Motif today.
        </p>
      </div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {visible.map((card) => (
          <div key={card.label} className="card p-6 flex flex-col hover:shadow-card-hover transition-shadow">
            <h2 className="text-base font-bold text-neutral-900 mb-2">{card.label}</h2>
            <p className="text-sm text-neutral-500 flex-1 leading-relaxed">{card.desc}</p>
            <Link href={card.href} className="mt-5">
              <Button variant="secondary" className="w-full">{card.cta}</Button>
            </Link>
          </div>
        ))}
      </div>

      {/* Quick profile reminder */}
      <div className="mt-8 card p-6 bg-brand-50 border-brand-200">
        <div className="flex items-start gap-4">
          <div className="h-10 w-10 bg-brand-100 rounded-xl flex items-center justify-center shrink-0">
            <svg className="h-5 w-5 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-semibold text-neutral-900 text-sm">Keep your profile up to date</p>
            <p className="text-neutral-600 text-sm mt-0.5">A complete profile helps employers and clients find you.</p>
          </div>
          <Link href="/profile">
            <Button size="sm" variant="secondary">Edit Profile</Button>
          </Link>
        </div>
      </div>
    </div>
  )
}