"use client";

import { useState } from "react";
import { HiOutlineDocumentText } from "react-icons/hi";
import { Application } from "../types";
import { STATUS_COLORS } from "../constants";
import WebPDFDownloadButton from "@/src/components/common/WebPDFDownloadButton";
import { getHIPApplicationById, getFTHBApplicationById, getTenantMaintenanceForm } from "@/src/services/web/services";
import { transformHIPDataForPDF, transformFTHBDataForPDF, transformTMRDataForPDF } from "@/src/utils/pdfDataTransformer";

interface ApplicationCardProps {
  app: Application;
  isDraft: boolean;
  onEdit: () => void;
  onView: () => void;
}

const ApplicationCard = ({ app, isDraft, onEdit, onView }: ApplicationCardProps) => {
  const [formData, setFormData] = useState<any>(null);
  const [loadingPDF, setLoadingPDF] = useState(false);

  const getStatusColor = (status: string) => {
    return STATUS_COLORS[status] || 'border-gray-400 text-gray-600 bg-gray-50';
  };

  const statusColor = getStatusColor(app.status?.status_name || 'Pending');

  const getFormType = (): "home-improvement" | "first-time-buyer" | "tenant-maintenance" | null => {
    switch (app.application_type) {
      case 'Home Improvement Program':
        return 'home-improvement';
      case 'First-Time Home Buyer Assistance':
        return 'first-time-buyer';
      case 'Tenant Maintenance Requests':
        return 'tenant-maintenance';
      default:
        return null;
    }
  };

  const fetchFormData = async () => {
    if (formData || loadingPDF) return;
    
    setLoadingPDF(true);
    try {
      let response;
      let transformedData;
      
      switch (app.application_type) {
        case 'Home Improvement Program':
          response = await getHIPApplicationById(app.id);
          transformedData = transformHIPDataForPDF(response.data.data);
          break;
        case 'First-Time Home Buyer Assistance':
          response = await getFTHBApplicationById(app.id);
          transformedData = transformFTHBDataForPDF(response.data.data);
          break;
        case 'Tenant Maintenance Requests':
          response = await getTenantMaintenanceForm(app.id);
          transformedData = transformTMRDataForPDF(response.data.data);
          break;
        default:
          throw new Error('Unknown application type');
      }
      
      setFormData(transformedData);
    } catch (error) {
      console.error('Error fetching form data:', error);
    } finally {
      setLoadingPDF(false);
    }
  };

  const formType = getFormType();

  return (
    <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
      <div className="flex flex-col lg:flex-row lg:justify-between gap-4">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 flex items-center justify-center rounded-xl bg-gradient-to-br from-teal-50 to-teal-100 text-teal-600 flex-shrink-0">
            <HiOutlineDocumentText className="w-6 h-6" />
          </div>
          
          <div className="space-y-2 min-w-0 flex-1">
            <div className="flex flex-wrap gap-x-6 gap-y-1">
              <p className="text-sm">
                <span className="text-gray-500 font-medium">Applicant:</span>{' '}
                <span className="font-semibold text-gray-900">{app.applicant_name}</span>
              </p>
              <p className="text-sm">
                <span className="text-gray-500 font-medium">Application No:</span>{' '}
                <span className="font-mono text-gray-700">{app.application_no}</span>
              </p>
            </div>
            <p className="text-sm">
              <span className="text-gray-500 font-medium">Type:</span>{' '}
              <span className="text-gray-900">{app.application_type}</span>
            </p>
          </div>
        </div>

        <div className="flex items-center gap-3 flex-shrink-0">
          {isDraft ? (
            <button
              type="button"
              onClick={onEdit}
              className="px-4 py-2 rounded-lg border-2 border-teal-600 text-teal-600 text-sm font-medium hover:bg-teal-50 transition-colors"
            >
              Continue Editing
            </button>
          ) : (
            <>
              <button
                type="button"
                onClick={onView}
                className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors"
              >
                View Details
              </button>
              {formType && (
                <div onMouseEnter={fetchFormData}>
                  {formData ? (
                    <WebPDFDownloadButton formData={formData} formType={formType} className="text-sm" />
                  ) : (
                    <button
                      onClick={fetchFormData}
                      disabled={loadingPDF}
                      className="px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700 transition-colors disabled:opacity-50 text-sm"
                    >
                      {loadingPDF ? 'Loading...' : 'Download PDF'}
                    </button>
                  )}
                </div>
              )}
            </>
          )}
          <span className={`px-4 py-2 rounded-lg text-sm font-medium ${isDraft ? 'border-2 border-yellow-400 text-yellow-700 bg-yellow-50' : statusColor}`}>
            {isDraft ? 'Draft' : app.status?.status_name || 'Pending'}
          </span>
        </div>
      </div>
      
      {app.timelines?.[0]?.remark && (
        <div className="mt-4 p-3 bg-gradient-to-r from-teal-50 to-cyan-50 border-l-4 border-teal-400 rounded-r-lg">
          <p className="text-sm text-teal-800 font-medium">
            Latest Update: {app.timelines[0].remark}
          </p>
        </div>
      )}
    </div>
  );
};

export default ApplicationCard;