import React, { useState } from 'react';
import type { Application, Service } from '../types';
import { CheckIcon } from '../components/Icons';

interface TrackApplicationPageProps {
  applications: Application[];
  services: Service[];
}

const translateStatus = (status: 'Pending' | 'Processing' | 'Completed') => {
  const map = {
    Pending: 'অপেক্ষমান',
    Processing: 'প্রক্রিয়াধীন',
    Completed: 'সম্পন্ন',
  };
  return map[status];
};

const TrackApplicationPage: React.FC<TrackApplicationPageProps> = ({ applications, services }) => {
  const [appIdInput, setAppIdInput] = useState('');
  const [mobileInput, setMobileInput] = useState('');
  const [searchedApplication, setSearchedApplication] = useState<Application | null | 'not_found'>();
  const [error, setError] = useState('');

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    
    if(!appIdInput || !mobileInput) {
        setError('অনুগ্রহ করে আবেদন আইডি এবং মোবাইল নম্বর প্রদান করুন।');
        return;
    }

    const foundApplication = applications.find(
      app => app.id.toLowerCase() === appIdInput.toLowerCase() && app.mobile === mobileInput
    );

    if (foundApplication) {
      setSearchedApplication(foundApplication);
    } else {
      setSearchedApplication('not_found');
      setError('আপনার প্রদত্ত তথ্যের সাথে মিলে এমন কোনো আবেদন খুঁজে পাওয়া যায়নি।');
    }
  };
  
  const handleNewSearch = () => {
      setSearchedApplication(undefined);
      setAppIdInput('');
      setMobileInput('');
      setError('');
  }

  const getStatusStep = (status: 'Pending' | 'Processing' | 'Completed') => {
    if (status === 'Completed') return 3;
    if (status === 'Processing') return 2;
    return 1;
  };
  
  const currentStep = searchedApplication && searchedApplication !== 'not_found' ? getStatusStep(searchedApplication.status) : 0;

  return (
    <div className="py-16 bg-gray-50 min-h-[calc(100vh-160px)]">
      <div className="container mx-auto px-4">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-10">
            <h1 className="text-3xl md:text-4xl font-extrabold text-gray-800">আপনার আবেদনের অবস্থা জানুন</h1>
            <p className="mt-3 text-gray-600">আপনার আবেদনের সর্বশেষ অবস্থা জানতে আবেদন আইডি ও নিবন্ধিত মোবাইল নম্বর প্রদান করুন।</p>
          </div>

          {!searchedApplication || searchedApplication === 'not_found' ? (
            <div className="bg-white p-8 sm:p-10 rounded-2xl shadow-lg">
              <form onSubmit={handleSearch} className="space-y-6">
                <div>
                  <label htmlFor="appId" className="block text-md font-medium text-gray-700 mb-1">আবেদন আইডি</label>
                  <input type="text" id="appId" value={appIdInput} onChange={(e) => setAppIdInput(e.target.value)} required placeholder="#S123456" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500" />
                </div>
                <div>
                  <label htmlFor="mobile" className="block text-md font-medium text-gray-700 mb-1">মোবাইল নম্বর</label>
                  <input type="tel" id="mobile" value={mobileInput} onChange={(e) => setMobileInput(e.target.value)} required placeholder="01XXXXXXXXX" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500" />
                </div>
                {error && <p className="text-sm text-red-600 text-center">{error}</p>}
                <div className="text-center pt-2">
                  <button type="submit" className="w-full md:w-auto text-lg bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-12 rounded-full transition-colors duration-300">
                    অনুসন্ধান
                  </button>
                </div>
              </form>
            </div>
          ) : (
            <div className="bg-white p-8 sm:p-10 rounded-2xl shadow-lg">
                <h2 className="text-2xl font-bold text-gray-800 mb-6 border-b pb-4">আবেদনের বিবরণ</h2>

                {/* Status Timeline */}
                <div className="my-8">
                    <ol className="flex items-center w-full">
                        <li className={`flex w-full items-center ${currentStep >= 1 ? 'text-green-600' : 'text-gray-500'}`}>
                            <div className="flex items-center">
                                <span className={`flex items-center justify-center w-10 h-10 rounded-full shrink-0 ${currentStep >= 1 ? 'bg-green-100' : 'bg-gray-100'}`}>
                                    {currentStep >= 1 ? <CheckIcon className="w-5 h-5"/> : '১'}
                                </span>
                                <span className="ml-2 font-medium">জমা হয়েছে</span>
                            </div>
                            <div className={`flex-1 h-1 ${currentStep > 1 ? 'bg-green-600' : 'bg-gray-200'}`}></div>
                        </li>
                         <li className={`flex w-full items-center ${currentStep >= 2 ? 'text-green-600' : 'text-gray-500'}`}>
                             <div className={`flex-1 h-1 ${currentStep > 1 ? 'bg-green-600' : 'bg-gray-200'}`}></div>
                            <div className="flex items-center">
                                <span className={`flex items-center justify-center w-10 h-10 rounded-full shrink-0 ${currentStep >= 2 ? 'bg-green-100' : 'bg-gray-100'}`}>
                                     {currentStep >= 2 ? <CheckIcon className="w-5 h-5"/> : '২'}
                                </span>
                                <span className="ml-2 font-medium">প্রক্রিয়াধীন</span>
                            </div>
                             <div className={`flex-1 h-1 ${currentStep > 2 ? 'bg-green-600' : 'bg-gray-200'}`}></div>
                        </li>
                         <li className={`flex items-center ${currentStep >= 3 ? 'text-green-600' : 'text-gray-500'}`}>
                             <div className={`flex-1 h-1 ${currentStep > 2 ? 'bg-green-600' : 'bg-gray-200'}`}></div>
                            <div className="flex items-center">
                                <span className={`flex items-center justify-center w-10 h-10 rounded-full shrink-0 ${currentStep >= 3 ? 'bg-green-100' : 'bg-gray-100'}`}>
                                    {currentStep >= 3 ? <CheckIcon className="w-5 h-5"/> : '৩'}
                                </span>
                                <span className="ml-2 font-medium">সম্পন্ন</span>
                            </div>
                        </li>
                    </ol>
                </div>
                
                <div className="space-y-3 text-lg">
                    <div className="flex justify-between"><span className="font-semibold text-gray-600">আবেদন আইডি:</span> <span className="text-gray-800 font-mono">{searchedApplication.id}</span></div>
                    <div className="flex justify-between"><span className="font-semibold text-gray-600">সেবার নাম:</span> <span className="text-gray-800 font-medium">{services.find(s => s.id === searchedApplication.serviceId)?.title}</span></div>
                    <div className="flex justify-between"><span className="font-semibold text-gray-600">আবেদনকারীর নাম:</span> <span className="text-gray-800">{searchedApplication.fullName}</span></div>
                    <div className="flex justify-between"><span className="font-semibold text-gray-600">জমা দেওয়ার তারিখ:</span> <span className="text-gray-800">{searchedApplication.submissionDate}</span></div>
                    <div className="flex justify-between items-center">
                        <span className="font-semibold text-gray-600">বর্তমান অবস্থা:</span>
                        <span className={`px-3 py-1 text-sm font-semibold rounded-full ${
                            searchedApplication.status === 'Pending' ? 'bg-yellow-200 text-yellow-800' :
                            searchedApplication.status === 'Completed' ? 'bg-green-200 text-green-800' : 'bg-blue-200 text-blue-800'
                        }`}>
                            {translateStatus(searchedApplication.status)}
                        </span>
                    </div>
                </div>

                <div className="text-center mt-10">
                     <button onClick={handleNewSearch} className="text-lg bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-8 rounded-full transition-colors duration-300">
                        পুনরায় অনুসন্ধান করুন
                    </button>
                </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default TrackApplicationPage;