import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { useAuth } from '@/hooks/use-auth'
import { Link } from 'react-router'

export function DashboardPage() {
  const { user } = useAuth()

  if (!user) return null

  return (
    <div className="space-y-6">
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {/* User Profile Card */}
        <Card>
          <CardHeader>
            <CardTitle>Profile Information</CardTitle>
            <CardDescription>Your account details</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="flex items-center space-x-2">
              {user.picture && (
                <img
                  src={user.picture}
                  alt="Profile"
                  className="w-8 h-8 rounded-full"
                />
              )}
              <div>
                <p className="font-medium">{user.name}</p>
                <p className="text-sm text-muted-foreground">{user.email}</p>
              </div>
            </div>
            <div className="pt-2">
              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                user.role === 'admin' 
                  ? 'bg-purple-100 text-purple-800' 
                  : 'bg-green-100 text-green-800'
              }`}>
                {user.role}
              </span>
              {user.is_active && (
                <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  Active
                </span>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Authentication Methods Card */}
        <Card>
          <CardHeader>
            <CardTitle>Authentication Methods</CardTitle>
            <CardDescription>How you can sign in</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {user.providers.map((provider) => (
                <div key={provider} className="flex items-center justify-between">
                  <span className="text-sm font-medium capitalize">{provider}</span>
                  <span className="text-xs text-green-600">Connected</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Quick Actions Card */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
            <CardDescription>Common tasks and shortcuts</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <Link to="/settings">
              <Button variant="outline" className="w-full justify-start">
                Update Settings
              </Button>
            </Link>
            <Link to="/activity">
              <Button variant="outline" className="w-full justify-start">
                View Activity
              </Button>
            </Link>
            {user.role === 'admin' && (
              <Link to="/admin/users">
                <Button variant="outline" className="w-full justify-start">
                  Manage Users
                </Button>
              </Link>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Admin Section */}
      {user.role === 'admin' && (
        <Card>
          <CardHeader>
            <CardTitle>Admin Panel</CardTitle>
            <CardDescription>Administrative functions and system overview</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground mb-4">
              You have administrator privileges. You can manage users and system settings.
            </p>
            <div className="flex gap-2">
              <Link to="/admin/users">
                <Button size="sm">Manage Users</Button>
              </Link>
              <Link to="/settings">
                <Button size="sm" variant="outline">System Settings</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}