'use client';

import { useAuth } from '@/hooks/useAuth';
import { useFetch } from '@/hooks/useFetch';
import type { UserDto } from '@/lib/types';
import { Users, Server, ShieldCheck, Mail, Calendar } from 'lucide-react';

export default function DashboardPage() {
  const { user } = useAuth();
  
  // Actually leverage the generated backend API for real metrics!
  const { data: usersList, isLoading: loadingUsers } = useFetch<UserDto[]>('/api/v1/users');

  return (
    <div className="p-8 max-w-6xl mx-auto space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight text-foreground">
          Welcome Back, {user?.firstName || 'User'}. Your Project is <span className="text-primary">Healthy</span>.
        </h1>
        <p className="text-muted-foreground mt-2">
          Current Project: <span className="font-medium text-foreground"><%= projectName %> Starter</span>
        </p>
      </div>

      {/* Real Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Total Users (Real backend data) */}
        <div className="bg-card border border-border/60 rounded-xl p-5 shadow-sm">
          <div className="flex items-center gap-2 mb-4">
            <Users className="w-4 h-4 text-muted-foreground" />
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Total Users</p>
          </div>
          {loadingUsers ? (
            <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
          ) : (
            <p className="text-3xl font-bold text-primary">{usersList?.length || 0}</p>
          )}
        </div>

        {/* Backend Connectivity Status */}
        <div className="bg-card border border-border/60 rounded-xl p-5 shadow-sm">
          <div className="flex items-center gap-2 mb-4">
            <Server className="w-4 h-4 text-muted-foreground" />
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Backend API</p>
          </div>
          <div className="flex items-center gap-2 mt-1">
             <span className="w-2.5 h-2.5 bg-primary rounded-full animate-pulse"></span>
             <p className="text-xl font-bold text-foreground">Connected</p>
          </div>
        </div>

        {/* JWT Auth Status */}
        <div className="bg-card border border-border/60 rounded-xl p-5 shadow-sm relative overflow-hidden">
          <div className="absolute -right-4 -top-4 bg-primary/10 w-24 h-24 rounded-full blur-2xl"></div>
          <div className="flex items-center gap-2 mb-4">
            <ShieldCheck className="w-4 h-4 text-muted-foreground" />
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Auth Status</p>
          </div>
          <div className="flex flex-col gap-1">
            <p className="text-sm font-medium text-foreground">Token Valid</p>
            <p className="text-sm font-medium text-muted-foreground border-t border-border/60 pt-1">
              Roles: {user?.roles?.map(r => r.replace('ROLE_', '')).join(', ') || 'USER'}
            </p>
          </div>
        </div>
      </div>

      {/* Your Profile Section (Real data) */}
      <div className="bg-card border border-border/60 rounded-xl overflow-hidden shadow-sm">
        <div className="p-6 border-b border-border/60">
           <h2 className="text-lg font-semibold text-foreground">Your Profile</h2>
        </div>
        <div className="p-6">
          {user ? (
            <div className="space-y-4">
               <div className="flex items-center gap-4">
                  <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary text-2xl font-bold">
                    {user.firstName?.[0] || 'U'}
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-foreground">{user.firstName} {user.lastName}</h3>
                    <p className="text-muted-foreground text-sm flex items-center gap-2">
                      <Mail className="w-4 h-4" /> {user.email}
                    </p>
                  </div>
               </div>
               
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8 bg-muted/30 p-4 rounded-lg border border-border/50">
                  <div>
                    <p className="text-xs font-semibold uppercase text-muted-foreground mb-1">Account ID</p>
                    <p className="text-foreground font-medium">{user.id}</p>
                  </div>
                  <div>
                    <p className="text-xs font-semibold uppercase text-muted-foreground mb-1">Account Created</p>
                    <p className="text-foreground font-medium flex items-center gap-2">
                       <Calendar className="w-4 h-4" />
                       {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : 'N/A'}
                    </p>
                  </div>
               </div>
            </div>
          ) : (
            <p className="text-muted-foreground">Loading profile...</p>
          )}
        </div>
      </div>
      
    </div>
  );
}