import React from 'react';
import type { Page, User, Application, Service } from '../types';
import { DashboardIcon } from '../components/Icons';

interface UserDashboardPageProps {
  currentUser: User;
  applications: Application[];
  services: Service[];
  navigateTo: (page: Page) => void;
}

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

const UserDashboardPage: React.FC<UserDashboardPageProps> = ({ currentUser, applications, services, navigateTo }) => {
  return (
    <div className="py-12 bg-gray-100 min-h-[calc(100vh-160px)]">
      <div className="container mx-auto px-4">
        <h1 className="text-3xl font-bold text-gray-800 mb-2">স্বাগতম, {currentUser.fullName}</h1>
        <p className="text-lg text-gray-600 mb-8">এই ড্যাশবোর্ড থেকে আপনি আপনার সকল আবেদনের অবস্থা দেখতে এবং নতুন আবেদন করতে পারবেন।</p>
        
        <div className="bg-white p-6 rounded-lg shadow-md">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
            <h2 className="text-xl font-semibold text-gray-700 flex items-center mb-4 sm:mb-0">
                <DashboardIcon className="w-6 h-6 mr-2 text-green-600"/>
                আপনার আবেদনসমূহ
            </h2>
             <button onClick={() => navigateTo('application')} className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg transition-colors">
                  নতুন আবেদন করুন
            </button>
          </div>
          <div className="overflow-x-auto">
            {applications.length > 0 ? (
              <table className="min-w-full">
                 <thead className="bg-gray-100">
                    <tr>
                        <th className="px-4 py-3 text-left text-sm font-semibold text-gray-600 uppercase">আবেদন আইডি</th>
                        <th className="px-4 py-3 text-left text-sm font-semibold text-gray-600 uppercase">সেবার নাম</th>
                        <th className="px-4 py-3 text-left text-sm font-semibold text-gray-600 uppercase">জমা দেওয়ার তারিখ</th>
                        <th className="px-4 py-3 text-left text-sm font-semibold text-gray-600 uppercase">অবস্থা</th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {applications.map(app => (
                    <tr key={app.id} className="hover:bg-gray-50">
                        <td className="px-4 py-4 whitespace-nowrap font-mono text-gray-700">{app.id}</td>
                        <td className="px-4 py-4 whitespace-nowrap font-medium text-gray-800">{services.find(s => s.id === app.serviceId)?.title || 'অজানা সেবা'}</td>
                        <td className="px-4 py-4 whitespace-nowrap text-gray-600">{app.submissionDate}</td>
                        <td className="px-4 py-4 whitespace-nowrap">
                            <span className={`px-3 py-1 text-xs font-semibold rounded-full ${
                                app.status === 'Pending' ? 'bg-yellow-200 text-yellow-800' :
                                app.status === 'Completed' ? 'bg-green-200 text-green-800' : 'bg-blue-200 text-blue-800'
                            }`}>
                                {translateStatus(app.status)}
                            </span>
                        </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <div className="text-center py-16">
                <p className="text-gray-500 text-lg">আপনি এখন পর্যন্ত কোনো আবেদন করেননি।</p>
                <button onClick={() => navigateTo('application')} className="mt-6 bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition-transform transform hover:scale-105">
                  প্রথম আবেদন করুন
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default UserDashboardPage;