import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Download } from 'lucide-react';
import { toast } from 'sonner';
import * as XLSX from 'xlsx';

const DownloadTemplateButton: React.FC = () => {
  const [isGenerating, setIsGenerating] = useState(false);

  const handleDownload = async () => {
    try {
      setIsGenerating(true);
      
      // Create workbook and worksheet
      const wb = XLSX.utils.book_new();
      
      // Create header row
      const headers = [
        'Employee ID', 
        'Employee Name',
        'Date',
        'In Time',
        'Out Time'
      ];

      // Sample data with example rows
      const data = [
        headers,
        [107, 'Milind Vaman Patil', '01-Mar-2025', '', ''],
        [107, 'Milind Vaman Patil', '04-Mar-2025', '11:07 AM', '07:16 PM'],
        [107, 'Milind Vaman Patil', '05-Mar-2025', '11:06 AM', '08:06 PM'],
        [176, 'Sharad Prahlad Bhadalkar', '03-Mar-2025', '10:17 AM', '07:23 PM'],
        [176, 'Sharad Prahlad Bhadalkar', '04-Mar-2025', '10:16 AM', '07:21 PM'],
      ];
      
      // Create worksheet and add data
      const ws = XLSX.utils.aoa_to_sheet(data);
      
      // Set column widths
      const wscols = [
        { wch: 15 },  // Employee ID
        { wch: 30 },  // Employee Name
        { wch: 15 },  // Date
        { wch: 15 },  // In Time
        { wch: 15 },  // Out Time
      ];
      ws['!cols'] = wscols;
      
      // Add to workbook
      XLSX.utils.book_append_sheet(wb, ws, 'Attendance Template');
      
      // Generate spreadsheet and download
      XLSX.writeFile(wb, 'attendance_template.xlsx');
      
      toast.success('Template downloaded successfully');
    } catch (error) {
      console.error('Error generating template:', error);
      toast.error('Failed to generate template. Please try again.');
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <Button 
      variant="outline"
      onClick={handleDownload}
      disabled={isGenerating}
      className="flex items-center gap-2"
    >
      <Download className="h-4 w-4" />
      Download Template
    </Button>
  );
};

export default DownloadTemplateButton;