import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import Link from 'next/link'
import { LogOut, User, ArrowLeft, Cloud, Globe, Wrench } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { PasskeyManager } from '@/components/passkey-manager'

async function signOut() {
  'use server'
  const supabase = await createClient()
  await supabase.auth.signOut()
  redirect('/')
}

export default async function DashboardPage() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()

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

  const userName = user.user_metadata?.full_name || user.email?.split('@')[0] || 'User'

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <span className="text-xl font-bold">
              Cloud<span className="text-primary">rite</span>
            </span>
          </Link>
          
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <User className="w-4 h-4" />
              <span>{userName}</span>
            </div>
            <form action={signOut}>
              <Button type="submit" variant="outline" size="sm" className="gap-2">
                <LogOut className="w-4 h-4" />
                Sign out
              </Button>
            </form>
          </div>
        </div>
      </header>

      {/* Main content */}
      <main className="container mx-auto px-4 py-12">
        {/* Welcome section */}
        <div className="mb-12">
          <Link 
            href="/" 
            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-4"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to home
          </Link>
          <h1 className="text-4xl font-bold mb-2">
            Welcome back, <span className="text-primary">{userName}</span>
          </h1>
          <p className="text-muted-foreground text-lg">
            Your Cloudrite dashboard is coming soon. We&apos;re working on exciting features for you.
          </p>
        </div>

        {/* Service cards */}
        <div className="grid md:grid-cols-3 gap-6 mb-12">
          <div className="bg-card border border-border rounded-2xl p-6 hover:border-primary/50 transition-colors">
            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
              <Globe className="w-6 h-6 text-primary" />
            </div>
            <h3 className="text-xl font-bold mb-2">Web Development</h3>
            <p className="text-muted-foreground text-sm mb-4">
              Manage your websites, view analytics, and request updates.
            </p>
            <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">Coming Soon</span>
          </div>

          <div className="bg-card border border-border rounded-2xl p-6 hover:border-primary/50 transition-colors">
            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
              <Cloud className="w-6 h-6 text-primary" />
            </div>
            <h3 className="text-xl font-bold mb-2">Cloud Hosting</h3>
            <p className="text-muted-foreground text-sm mb-4">
              Monitor your hosting, check uptime, and manage your servers.
            </p>
            <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">Coming Soon</span>
          </div>

          <div className="bg-card border border-border rounded-2xl p-6 hover:border-primary/50 transition-colors">
            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
              <Wrench className="w-6 h-6 text-primary" />
            </div>
            <h3 className="text-xl font-bold mb-2">I.T Support</h3>
            <p className="text-muted-foreground text-sm mb-4">
              Submit support tickets and track the status of your requests.
            </p>
            <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">Coming Soon</span>
          </div>
        </div>

        {/* Account Settings */}
        <div className="grid lg:grid-cols-2 gap-6">
          {/* Account info */}
          <div className="bg-card border border-border rounded-2xl p-6">
            <h2 className="text-xl font-bold mb-4">Account Information</h2>
            <div className="space-y-3">
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">Email</span>
                <span className="font-medium">{user.email}</span>
              </div>
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">Account created</span>
                <span className="font-medium">
                  {new Date(user.created_at).toLocaleDateString('en-NZ', {
                    day: 'numeric',
                    month: 'long',
                    year: 'numeric'
                  })}
                </span>
              </div>
              <div className="flex justify-between py-2">
                <span className="text-muted-foreground">Auth provider</span>
                <span className="font-medium capitalize">
                  {user.app_metadata?.provider || 'Email'}
                </span>
              </div>
            </div>
          </div>

          {/* Passkey Management */}
          <div className="bg-card border border-border rounded-2xl p-6">
            <PasskeyManager />
          </div>
        </div>
      </main>
    </div>
  )
}