import React, { useState, useEffect } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import { usePPMDetails, usePPMMutations } from '../hooks/usePPM';
import { FaArrowLeft, FaSave, FaEdit, FaTools } from 'react-icons/fa';
import type { CreatePPMData } from '../services/ppmService';

const PPMDetail: React.FC = () => {
  const { ppmName } = useParams<{ ppmName: string }>();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const duplicateFromPPM = searchParams.get('duplicate');
  
  const isNewPPM = ppmName === 'new';
  const isDuplicating = isNewPPM && !!duplicateFromPPM;
  
  const { ppm, loading, error, refetch } = usePPMDetails(
    isDuplicating ? duplicateFromPPM : (isNewPPM ? null : ppmName || null)
  );
  const { createPPM, updatePPM, loading: saving } = usePPMMutations();
  
  const [isEditing, setIsEditing] = useState(isNewPPM);
  const [formData, setFormData] = useState<CreatePPMData>({
    company: '',
    asset_name: '',
    custom_asset_type: '',
    maintenance_team: '',
    custom_frequency: '',
    custom_total_amount: 0,
    custom_no_of_pms: 0,
    custom_price_per_pm: 0,
  });

  useEffect(() => {
    if (ppm) {
      setFormData({
        company: ppm.company || '',
        asset_name: ppm.asset_name || '',
        custom_asset_type: ppm.custom_asset_type || '',
        maintenance_team: ppm.maintenance_team || '',
        custom_frequency: ppm.custom_frequency || '',
        custom_total_amount: ppm.custom_total_amount || 0,
        custom_no_of_pms: ppm.custom_no_of_pms || 0,
        custom_price_per_pm: ppm.custom_price_per_pm || 0,
      });
    }
  }, [ppm, isDuplicating]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: name.includes('amount') || name.includes('pms') || name.includes('price') 
        ? parseFloat(value) || 0 
        : value
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!formData.asset_name) {
      alert('Please enter Asset Name');
      return;
    }
    
    try {
      if (isNewPPM || isDuplicating) {
        const result = await createPPM(formData);
        const successMessage = isDuplicating 
          ? 'PPM schedule duplicated successfully!' 
          : 'PPM schedule created successfully!';
        alert(successMessage);
        if (result.asset_maintenance?.name) {
          navigate(`/ppm/${result.asset_maintenance.name}`);
        } else {
          refetch();
          navigate('/ppm');
        }
      } else if (ppmName) {
        await updatePPM(ppmName, formData);
        alert('PPM schedule updated successfully!');
        setIsEditing(false);
        refetch();
      }
    } catch (err) {
      console.error('PPM save error:', err);
      alert('Failed to save: ' + (err instanceof Error ? err.message : 'Unknown error'));
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading PPM schedule...</p>
        </div>
      </div>
    );
  }

  if (error && !isNewPPM && !isDuplicating) {
    return (
      <div className="p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
          <p className="text-red-600 dark:text-red-400">Error: {error}</p>
          <button 
            onClick={() => navigate('/ppm')}
            className="mt-2 text-red-700 dark:text-red-400 underline hover:text-red-800 dark:hover:text-red-300"
          >
            Back to PPM schedules
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
      {/* Header */}
      <div className="mb-6 flex justify-between items-center">
        <div className="flex items-center gap-4">
          <button
            onClick={() => navigate('/ppm')}
            className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-2"
          >
            <FaArrowLeft />
            <span className="text-gray-900 dark:text-white">
              {isDuplicating ? 'Duplicate PPM Schedule' : (isNewPPM ? 'New PPM Schedule' : 'PPM Schedule Details')}
            </span>
          </button>
        </div>
        <div className="flex items-center gap-3">
          {!isNewPPM && !isEditing && (
            <button
              onClick={() => setIsEditing(true)}
              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
            >
              <FaEdit />
              Edit
            </button>
          )}
        </div>
      </div>

      <form onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Form */}
          <div className="lg:col-span-2 space-y-6">
            {/* Basic Information */}
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Basic Information</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Company *
                  </label>
                  {isEditing ? (
                    <input
                      type="text"
                      name="company"
                      value={formData.company}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      required
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white">{ppm?.company || '-'}</p>
                    </div>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Asset Name *
                  </label>
                  {isEditing ? (
                    <input
                      type="text"
                      name="asset_name"
                      value={formData.asset_name}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      required
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white">{ppm?.asset_name || '-'}</p>
                    </div>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Asset Type
                  </label>
                  {isEditing ? (
                    <input
                      type="text"
                      name="custom_asset_type"
                      value={formData.custom_asset_type}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white">{ppm?.custom_asset_type || '-'}</p>
                    </div>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Maintenance Team
                  </label>
                  {isEditing ? (
                    <input
                      type="text"
                      name="maintenance_team"
                      value={formData.maintenance_team}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white">{ppm?.maintenance_team || '-'}</p>
                    </div>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Frequency
                  </label>
                  {isEditing ? (
                    <input
                      type="text"
                      name="custom_frequency"
                      value={formData.custom_frequency}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="e.g., Monthly, Quarterly, Yearly"
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white">{ppm?.custom_frequency || '-'}</p>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Financial Information */}
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Financial Information</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Number of PMs
                  </label>
                  {isEditing ? (
                    <input
                      type="number"
                      name="custom_no_of_pms"
                      value={formData.custom_no_of_pms}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      min="0"
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white">{ppm?.custom_no_of_pms || '-'}</p>
                    </div>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Price per PM
                  </label>
                  {isEditing ? (
                    <input
                      type="number"
                      name="custom_price_per_pm"
                      value={formData.custom_price_per_pm}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      min="0"
                      step="0.01"
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white">
                        {ppm?.custom_price_per_pm ? `$${ppm.custom_price_per_pm.toLocaleString()}` : '-'}
                      </p>
                    </div>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Total Amount
                  </label>
                  {isEditing ? (
                    <input
                      type="number"
                      name="custom_total_amount"
                      value={formData.custom_total_amount}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      min="0"
                      step="0.01"
                    />
                  ) : (
                    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <p className="text-gray-900 dark:text-white font-semibold">
                        {ppm?.custom_total_amount ? `$${ppm.custom_total_amount.toLocaleString()}` : '-'}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* Sidebar Info */}
          <div className="lg:col-span-1">
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-4">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Schedule Information</h3>
              
              {!isNewPPM && ppm && (
                <>
                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">PPM ID</p>
                    <p className="text-sm font-medium text-gray-900 dark:text-white">{ppm.name}</p>
                  </div>

                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Created</p>
                    <p className="text-xs text-gray-900 dark:text-white">
                      {ppm.creation ? new Date(ppm.creation).toLocaleString() : '-'}
                    </p>
                  </div>
                </>
              )}

              {isNewPPM && (
                <div className="text-center py-8">
                  <FaTools className="text-4xl text-gray-400 dark:text-gray-500 mx-auto mb-2" />
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Schedule information will appear after creation
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        {isEditing && (
          <div className="mt-6 flex justify-end gap-3">
            <button
              type="button"
              onClick={() => {
                if (isNewPPM) {
                  navigate('/ppm');
                } else {
                  setIsEditing(false);
                  if (ppm) {
                    setFormData({
                      company: ppm.company || '',
                      asset_name: ppm.asset_name || '',
                      custom_asset_type: ppm.custom_asset_type || '',
                      maintenance_team: ppm.maintenance_team || '',
                      custom_frequency: ppm.custom_frequency || '',
                      custom_total_amount: ppm.custom_total_amount || 0,
                      custom_no_of_pms: ppm.custom_no_of_pms || 0,
                      custom_price_per_pm: ppm.custom_price_per_pm || 0,
                    });
                  }
                }
              }}
              className="px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={saving}
              className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center gap-2 disabled:opacity-50"
            >
              <FaSave />
              {saving ? 'Saving...' : (isNewPPM ? 'Create' : 'Save Changes')}
            </button>
          </div>
        )}
      </form>
    </div>
  );
};

export default PPMDetail;