'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Star } from 'lucide-react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ReviewForm } from '@/components/reviews/ReviewForm';
import { StarRating } from '@/components/reviews/StarRating';
import {
  PortalLoading,
  PortalSection,
  PortalShell,
  PortalEmpty,
} from '@/components/portal/Portal';
import { api } from '@/lib/api';
import { formatDate } from '@/lib/utils';
import { useLanguage } from '@/contexts/LanguageContext';

interface PendingReviewItem {
  kind: 'job' | 'hire';
  id: string;
  title: string;
  categoryName: string;
  worker: { user: { firstName: string; lastName: string } };
}

interface SubmittedReview {
  id: string;
  overallRating: number;
  qualityRating: number;
  communicationRating: number;
  punctualityRating: number;
  comment: string | null;
  createdAt: string;
  job: { id: string; title: string } | null;
  hireInvitation: { id: string; status: string } | null;
  worker: { user: { firstName: string; lastName: string } };
}

export default function CustomerReviewsPage() {
  const { t } = useLanguage();
  const [pending, setPending] = useState<PendingReviewItem[]>([]);
  const [submitted, setSubmitted] = useState<SubmittedReview[]>([]);
  const [loading, setLoading] = useState(true);

  const load = () => {
    setLoading(true);
    Promise.all([
      api<{ data: PendingReviewItem[] }>('/reviews/pending'),
      api<{ data: SubmittedReview[] }>('/reviews/my'),
    ])
      .then(([pendingRes, submittedRes]) => {
        setPending(pendingRes.data);
        setSubmitted(submittedRes.data);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    load();
  }, []);

  return (
    <DashboardLayout role="customer" title={t('Reviews', 'Mga review')}>
      <PortalShell>
        {loading ? (
          <PortalLoading label={t('Loading reviews…', 'Naglo-load…')} />
        ) : (
          <>
            <PortalSection
              icon={Star}
              title={t('Pending reviews', 'Pending reviews')}
              description={t(
                'Rate workers you hired',
                'I-rate ang workers na na-hire mo'
              )}
            >
              {pending.length === 0 ? (
                <PortalEmpty
                  icon={Star}
                  title={t('No hires waiting for a review', 'Walang pending review')}
                  description={t(
                    'You can rate a worker after they accept your hire invitation.',
                    'Puwede kang mag-rate pagkatapos tanggapin ng worker ang hire invitation mo.'
                  )}
                />
              ) : (
                <div className="space-y-6">
                  {pending.map((item) => {
                    const workerName = `${item.worker.user.firstName} ${item.worker.user.lastName}`;
                    return (
                      <div key={`${item.kind}-${item.id}`} className="rounded-xl border border-border p-4">
                        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                          <div>
                            <p className="font-semibold text-slate-900">{workerName}</p>
                            <p className="text-sm text-muted">
                              {item.categoryName}
                              {item.kind === 'job' ? ` · ${item.title}` : ` · ${t('Direct hire', 'Direct hire')}`}
                            </p>
                          </div>
                          {item.kind === 'hire' ? (
                            <Link href="/customer/hire-invitations">
                              <Button size="sm" variant="outline">
                                {t('View hire', 'Tingnan ang hire')}
                              </Button>
                            </Link>
                          ) : (
                            <Link href={`/customer/jobs/${item.id}`}>
                              <Button size="sm" variant="outline">
                                {t('View job', 'Tingnan ang job')}
                              </Button>
                            </Link>
                          )}
                        </div>
                        <ReviewForm
                          jobId={item.kind === 'job' ? item.id : undefined}
                          hireInvitationId={item.kind === 'hire' ? item.id : undefined}
                          workerName={workerName}
                          onSubmitted={load}
                        />
                      </div>
                    );
                  })}
                </div>
              )}
            </PortalSection>

            <PortalSection
              icon={Star}
              title={t('Your reviews', 'Mga review mo')}
              description={t("Reviews you've submitted", 'Mga review na naipadala mo')}
            >
              {submitted.length === 0 ? (
                <p className="text-sm text-muted">
                  {t('Reviews you write will appear here.', 'Dito lalabas ang mga review mo.')}
                </p>
              ) : (
                <div className="space-y-3">
                  {submitted.map((review) => (
                    <Card key={review.id}>
                      <CardContent className="p-4">
                        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                          <div>
                            <p className="font-semibold text-slate-900">
                              {review.worker.user.firstName} {review.worker.user.lastName}
                            </p>
                            <p className="text-sm text-muted">
                              {review.job?.title ?? t('Direct hire', 'Direct hire')}
                            </p>
                            <p className="mt-1 text-xs text-muted">{formatDate(review.createdAt)}</p>
                          </div>
                          <StarRating rating={review.overallRating} showValue />
                        </div>
                        {review.comment ? (
                          <p className="mt-3 border-l-2 border-slate-200 pl-3 text-sm text-slate-600">
                            {review.comment}
                          </p>
                        ) : null}
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </PortalSection>
          </>
        )}
      </PortalShell>
    </DashboardLayout>
  );
}