'use client';

import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
import api from '@/lib/api';
import { useAuthStore } from '@/lib/store';
import type { Application } from '@/types';

const statusColors: Record<string, string> = {
  running: 'bg-green-100 text-green-700',
  pending: 'bg-yellow-100 text-yellow-700',
  building: 'bg-blue-100 text-blue-700',
  deploying: 'bg-blue-100 text-blue-700',
  failed: 'bg-red-100 text-red-700',
  build_failed: 'bg-red-100 text-red-700',
  stopped: 'bg-gray-100 text-gray-700',
};

export default function DashboardPage() {
  const user = useAuthStore((s) => s.user);

  const { data: apps = [], isLoading } = useQuery<Application[]>({
    queryKey: ['applications'],
    queryFn: () => api.get('/applications').then((r) => r.data),
  });

  const runningApps = apps.filter(
    (a) => a.deployments?.some((d) => d.status === 'running'),
  );

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">
          Welcome back, {user?.firstName}! 👋
        </h1>
        <p className="mt-1 text-gray-500">
          Here&apos;s an overview of your applications.
        </p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="card">
          <p className="text-sm font-medium text-gray-500">Total Apps</p>
          <p className="mt-2 text-3xl font-bold text-gray-900">{apps.length}</p>
        </div>
        <div className="card">
          <p className="text-sm font-medium text-gray-500">Running</p>
          <p className="mt-2 text-3xl font-bold text-green-600">{runningApps.length}</p>
        </div>
        <div className="card">
          <p className="text-sm font-medium text-gray-500">Deployments (7d)</p>
          <p className="mt-2 text-3xl font-bold text-primary-600">
            {apps.reduce((sum, a) => sum + (a.deployments?.length || 0), 0)}
          </p>
        </div>
      </div>

      {/* Recent Applications */}
      <div>
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-semibold text-gray-900">Recent Applications</h2>
          <Link href="/dashboard/deploy" className="btn-primary text-sm">
            + New Application
          </Link>
        </div>

        {isLoading ? (
          <div className="card text-center py-12 text-gray-500">Loading...</div>
        ) : apps.length === 0 ? (
          <div className="card text-center py-12">
            <p className="text-gray-500 text-lg">No applications yet</p>
            <p className="text-gray-400 mt-2">
              Deploy your first application to get started.
            </p>
            <Link href="/dashboard/deploy" className="btn-primary mt-4 inline-block">
              Deploy your first app
            </Link>
          </div>
        ) : (
          <div className="grid gap-4">
            {apps.slice(0, 5).map((app) => {
              const latestDeploy = app.deployments?.[0];
              const status = latestDeploy?.status || 'pending';
              return (
                <Link
                  key={app.id}
                  href={`/dashboard/apps/${app.id}`}
                  className="card hover:border-primary-300 transition-colors flex items-center justify-between"
                >
                  <div className="flex items-center space-x-4">
                    <div className="w-10 h-10 rounded-lg bg-primary-100 flex items-center justify-center text-lg">
                      {app.runtime === 'nodejs' ? '🟩' : '🟧'}
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">{app.name}</h3>
                      <p className="text-sm text-gray-500">
                        {app.runtime} · {app.replicas} replica{app.replicas > 1 ? 's' : ''}
                        {app.databaseType !== 'none' && ` · ${app.databaseType}`}
                      </p>
                    </div>
                  </div>
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${
                      statusColors[status] || 'bg-gray-100 text-gray-600'
                    }`}
                  >
                    {status}
                  </span>
                </Link>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}