import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import Link from 'next/link'

export default async function DashboardPage() {
  const supabase = await createClient()

  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    redirect('/login')
  }

  // Get profile with plan details
  const { data: profile } = await supabase
    .from('profiles')
    .select(`
      *,
      plans (
        name,
        display_name_it,
        features
      )
    `)
    .eq('id', user.id)
    .single()

  const features = profile?.plans?.features as {
    posts_per_month?: number
    ai_models?: string[]
    social_accounts?: number
  } | null

  return (
    <div className="space-y-10 opacity-0 animate-fade-up">
      {/* Header */}
      <div>
        <span className="editorial-tag">Dashboard</span>
        <h1 className="mt-4 text-4xl font-display font-semibold">
          Bentornato in Leopost
        </h1>
        <p className="mt-2 text-ink-light text-lg">
          Gestisci i tuoi contenuti social da qui.
        </p>
      </div>

      {/* Cards Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Plan Card */}
        <div className="card-editorial">
          <div className="flex items-start justify-between mb-4">
            <h2 className="font-display text-xl font-semibold">Il tuo piano</h2>
            <span className="editorial-tag">
              {profile?.plans?.display_name_it || 'Gratuito'}
            </span>
          </div>
          <ul className="space-y-3 text-ink-light">
            <li className="flex justify-between">
              <span>Post al mese</span>
              <span className="font-medium text-ink">{features?.posts_per_month || 10}</span>
            </li>
            <li className="flex justify-between">
              <span>Account social</span>
              <span className="font-medium text-ink">{features?.social_accounts || 1}</span>
            </li>
            <li className="flex justify-between">
              <span>Modelli AI</span>
              <span className="font-medium text-ink">{features?.ai_models?.length || 1}</span>
            </li>
          </ul>
          <div className="mt-6 pt-4 border-t border-editorial">
            <Link
              href="/subscription/"
              className="text-sm text-accent hover:underline font-medium"
            >
              Cambia piano →
            </Link>
          </div>
        </div>

        {/* Onboarding Card */}
        <div className="card-editorial">
          <h2 className="font-display text-xl font-semibold mb-4">Prossimi passi</h2>
          <ul className="space-y-4">
            <li className="flex items-start gap-3">
              <span className="w-6 h-6 flex items-center justify-center bg-success text-white text-xs font-medium">
                ✓
              </span>
              <div>
                <p className="font-medium text-ink">Account creato</p>
                <p className="text-sm text-ink-light">Completo</p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="w-6 h-6 flex items-center justify-center bg-cream-dark text-ink-muted text-xs font-medium">
                2
              </span>
              <div>
                <p className="font-medium text-ink-muted">Collega social</p>
                <p className="text-sm text-ink-muted">Prossimamente</p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="w-6 h-6 flex items-center justify-center bg-cream-dark text-ink-muted text-xs font-medium">
                3
              </span>
              <div>
                <p className="font-medium text-ink-muted">Configura brand</p>
                <p className="text-sm text-ink-muted">Prossimamente</p>
              </div>
            </li>
          </ul>
        </div>

        {/* Activity Card */}
        <div className="card-editorial">
          <h2 className="font-display text-xl font-semibold mb-4">Attività</h2>
          <div className="py-8 text-center">
            <div className="w-16 h-16 mx-auto mb-4 bg-cream-dark flex items-center justify-center">
              <svg className="w-8 h-8 text-ink-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
            <p className="text-ink-muted text-sm">
              Nessuna attività ancora.
            </p>
            <p className="text-ink-muted text-sm mt-1">
              Collega un account social per iniziare!
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}