"use client";
import React from 'react';
import { useAttendance } from '../hooks/useAttendance';
import { useTeachers } from '../hooks/useTeachers';
import { exportToCsv } from '../utils/csvExport';

export default function DailySummary() {
  const { todayRecords } = useAttendance();
  const { teachers } = useTeachers();

  const summary = teachers.map(t => {
    const recs = todayRecords.filter(r => r.teacherId === t.id);
    let total = 0;
    for (let i = 0; i < recs.length; i += 2) {
      if (recs[i+1]) {
        total += (recs[i+1].timestamp - recs[i].timestamp) / (1000*60*60);
      }
    }
    return { name: t.name, total: total.toFixed(2) };
  });

  return (
    <div>
      <h2 className="text-xl mb-2">Daily Summary</h2>
      <button
        onClick={() => exportToCsv('daily-summary.csv', summary)}
        className="mb-2 px-4 py-2 border rounded"
      >
        Export CSV
      </button>
      <ul>
        {summary.map(s => (
          <li key={s.name}>{s.name}: {s.total} hrs</li>
        ))}
      </ul>
    </div>
  );
}