"use client"
import React from 'react';
import { motion } from 'framer-motion';
import { Check, X } from 'lucide-react';

interface Task {
  activityName: string;
  scheduledStart: string;
  scheduledEnd: string;
  blockType: string;
}

export default function TaskCompletionModal({ isOpen, onClose, tasks }: { isOpen: boolean, onClose: () => void, tasks: Task[] }) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4">
      <motion.div 
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 50 }}
        className="bg-slate-900 border border-slate-700 p-6 rounded-2xl w-full max-w-lg shadow-xl text-white"
      >
        <h2 className="text-2xl font-bold mb-4">අද දවස කොහොමද? 📋</h2>
        <p className="text-slate-400 mb-6">How was your day? Let&apos;s check off your schedule.</p>
        
        <div className="space-y-4 max-h-96 overflow-y-auto pr-2">
          {tasks.length === 0 ? (
            <div className="text-center text-slate-500 py-8">No tasks scheduled for today.</div>
          ) : (
            tasks.map((task, idx) => (
              <div key={idx} className="bg-slate-800 p-4 rounded-xl flex items-center justify-between border border-slate-700">
                <div>
                  <div className="font-semibold text-lg">{task.activityName}</div>
                  <div className="text-sm text-slate-400">{task.scheduledStart} - {task.scheduledEnd} • {task.blockType}</div>
                </div>
                <div className="flex space-x-2">
                  <button className="p-2 bg-green-500/20 text-green-400 rounded-lg hover:bg-green-500/30 transition-colors" title="සම්පූර්ණයි (Completed)">
                    <Check size={20} />
                  </button>
                  <button className="p-2 bg-red-500/20 text-red-400 rounded-lg hover:bg-red-500/30 transition-colors" title="අසම්පූර්ණයි (Not completed)">
                    <X size={20} />
                  </button>
                </div>
              </div>
            ))
          )}
        </div>
        
        <div className="mt-6 flex justify-end space-x-3">
          <button onClick={onClose} className="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg font-medium transition-colors text-slate-300 border border-slate-700">
            Cancel
          </button>
          <button onClick={onClose} className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors shadow-lg shadow-blue-500/20">
            Save & Close
          </button>
        </div>
      </motion.div>
    </div>
  );
}