'use client';

import { useEffect, useState } from 'react';
import Dashboard from "@/components/dashboard/dashboard";
import Content from "@/components/dashboard/content";
import { fetchClient } from '@/lib/client-service';

// ✅ Corrected Vendor Type
interface Vendor {
  _id: string;
  username: string;
  storeId: string;
  pgpKey: string;
  __v: number;
}

interface User {
  vendor: Vendor;
}

interface OrderStats {
  totalOrders: number;
  pendingOrders: number;
  completedOrders: number;
  cancelledOrders: number;
}

export default function DashboardPage() {
  const [vendor, setVendor] = useState<Vendor | null>(null);
  const [orderStats, setOrderStats] = useState<OrderStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        
        // Fetch data from API using relative URLs and client-side fetch
        const [userResponse, stats] = await Promise.all([
          fetchClient<User>("auth/me"),
          fetchClient<OrderStats>("orders/stats"),
        ]);

        setVendor(userResponse.vendor);
        setOrderStats(stats);
      } catch (err) {
        console.error('Error fetching dashboard data:', err);
        setError('Failed to load dashboard data');
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <Dashboard><div>Loading dashboard...</div></Dashboard>;
  }

  if (error || !vendor || !orderStats) {
    return <Dashboard><div>Error: {error || 'Failed to load data'}</div></Dashboard>;
  }

  return (
    <Dashboard>
      <Content username={vendor.username} orderStats={orderStats} />
    </Dashboard>
  );
}