'use client';

import { useSearchParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, CardDescription, CardHeader, CardTitle, Label } from '@the-order/ui';
import { getApiClient } from '@the-order/api-client';

export default function StatusPage(): JSX.Element {
  const searchParams = useSearchParams();
  const applicationId = searchParams.get('id');
  const apiClient = getApiClient();

  const { data: application, isLoading, error } = useQuery<Awaited<ReturnType<typeof apiClient.eresidency.getApplication>>>({
    queryKey: ['application', applicationId],
    queryFn: async () => {
      if (!applicationId) throw new Error('Application ID is required');
      return await apiClient.eresidency.getApplication(applicationId);
    },
    enabled: !!applicationId,
  });

  if (!applicationId) {
    return (
      <div className="min-h-screen bg-gray-50 py-12">
        <div className="container mx-auto px-4 max-w-2xl">
          <Card>
            <CardHeader>
              <CardTitle>Application Status</CardTitle>
              <CardDescription>Please provide an application ID to check status</CardDescription>
            </CardHeader>
          </Card>
        </div>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 py-12">
        <div className="container mx-auto px-4 max-w-2xl">
          <Card>
            <CardContent className="py-12 text-center">
              <p className="text-gray-600">Loading application status...</p>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 py-12">
        <div className="container mx-auto px-4 max-w-2xl">
          <Card>
            <CardHeader>
              <CardTitle>Error</CardTitle>
              <CardDescription>Failed to load application status</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-red-600">{error instanceof Error ? error.message : 'Unknown error'}</p>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  if (!application) {
    return (
      <div className="min-h-screen bg-gray-50 py-12">
        <div className="container mx-auto px-4 max-w-2xl">
          <Card>
            <CardHeader>
              <CardTitle>Application Not Found</CardTitle>
              <CardDescription>No application found with the provided ID</CardDescription>
            </CardHeader>
          </Card>
        </div>
      </div>
    );
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'approved':
        return 'text-green-600 bg-green-50';
      case 'rejected':
        return 'text-red-600 bg-red-50';
      case 'under_review':
        return 'text-blue-600 bg-blue-50';
      case 'kyc_pending':
        return 'text-yellow-600 bg-yellow-50';
      default:
        return 'text-gray-600 bg-gray-50';
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-2xl">
        <Card>
          <CardHeader>
            <CardTitle>Application Status</CardTitle>
            <CardDescription>Application ID: {application.id}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div>
              <Label className="text-sm font-medium text-gray-500">Status</Label>
              <div className={`mt-1 px-3 py-2 rounded-md inline-block ${getStatusColor(application.status)}`}>
                {application.status.toUpperCase().replace('_', ' ')}
              </div>
            </div>

            <div>
              <Label className="text-sm font-medium text-gray-500">Applicant</Label>
              <p className="mt-1 text-gray-900">
                {application.givenName} {application.familyName}
              </p>
              <p className="text-sm text-gray-600">{application.email}</p>
            </div>

            {application.submittedAt && (
              <div>
                <Label className="text-sm font-medium text-gray-500">Submitted At</Label>
                <p className="mt-1 text-gray-900">{new Date(application.submittedAt).toLocaleString()}</p>
              </div>
            )}

            {application.reviewedAt && (
              <div>
                <Label className="text-sm font-medium text-gray-500">Reviewed At</Label>
                <p className="mt-1 text-gray-900">{new Date(application.reviewedAt).toLocaleString()}</p>
              </div>
            )}

            {application.reviewedBy && (
              <div>
                <Label className="text-sm font-medium text-gray-500">Reviewed By</Label>
                <p className="mt-1 text-gray-900">{application.reviewedBy}</p>
              </div>
            )}

            {application.rejectionReason && (
              <div>
                <Label className="text-sm font-medium text-gray-500">Rejection Reason</Label>
                <p className="mt-1 text-red-600">{application.rejectionReason}</p>
              </div>
            )}

            {application.kycStatus && (
              <div>
                <Label className="text-sm font-medium text-gray-500">KYC Status</Label>
                <p className="mt-1 text-gray-900">{application.kycStatus}</p>
              </div>
            )}

            {application.sanctionsStatus && (
              <div>
                <Label className="text-sm font-medium text-gray-500">Sanctions Status</Label>
                <p className="mt-1 text-gray-900">{application.sanctionsStatus}</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}


