'use client';

import { useEffect, useState } from 'react';
import { Star } from 'lucide-react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { WorkerReviewsSection } from '@/components/reviews/WorkerReviewsSection';
import { WorkerPortalEmpty, WorkerPortalShell } from '@/components/worker/WorkerPortal';
import { api } from '@/lib/api';
import { useAuth } from '@/contexts/AuthContext';

export default function WorkerRatingsPage() {
  const { user, refreshUser } = useAuth();
  const profile = user?.workerProfile as
    | { id?: string; averageRating?: number; totalReviews?: number }
    | undefined;

  const [workerId, setWorkerId] = useState<string | undefined>(profile?.id);
  const [totalReviews, setTotalReviews] = useState(profile?.totalReviews ?? 0);
  const [averageRating, setAverageRating] = useState(Number(profile?.averageRating ?? 0));
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      try {
        await refreshUser();
        const res = await api<{
          data: {
            worker?: { id: string; averageRating?: number; totalReviews?: number };
            stats?: { averageRating?: number; totalReviews?: number };
          };
        }>('/users/worker/dashboard');
        if (cancelled) return;
        const id = res.data.worker?.id || profile?.id;
        setWorkerId(id);
        setAverageRating(
          Number(res.data.stats?.averageRating ?? res.data.worker?.averageRating ?? 0)
        );
        setTotalReviews(
          Number(res.data.stats?.totalReviews ?? res.data.worker?.totalReviews ?? 0)
        );
      } catch (e) {
        console.error(e);
        if (!cancelled) {
          setWorkerId(profile?.id);
          setAverageRating(Number(profile?.averageRating ?? 0));
          setTotalReviews(profile?.totalReviews ?? 0);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps -- load once on mount; refreshUser is stable enough
  }, []);

  return (
    <DashboardLayout role="worker" title="Ratings">
      <WorkerPortalShell>
        {loading ? (
          <div className="flex min-h-[30vh] items-center justify-center text-muted">
            <div className="loading-spinner" />
          </div>
        ) : !workerId ? (
          <WorkerPortalEmpty
            icon={Star}
            title="Profile not ready"
            description="Complete your worker profile to start receiving reviews from customers."
          />
        ) : totalReviews === 0 ? (
          <WorkerPortalEmpty
            icon={Star}
            title="No reviews yet"
            description="After customers hire you, they can leave ratings for quality, communication, and punctuality."
          />
        ) : (
          <WorkerReviewsSection
            workerId={workerId}
            averageRating={averageRating}
            totalReviews={totalReviews}
          />
        )}
      </WorkerPortalShell>
    </DashboardLayout>
  );
}