import { useState } from 'react'
import { format, subDays } from 'date-fns'
import { FaFileExport, FaChartBar } from 'react-icons/fa6'

export default function ReportsPage() {
  const [dateRange, setDateRange] = useState({
    from: format(subDays(new Date(), 30), 'yyyy-MM-dd'),
    to: format(new Date(), 'yyyy-MM-dd')
  })
  const [reportType, setReportType] = useState('tickets')

  const reportTypes = [
    { value: 'tickets', label: 'Ticket Summary' },
    { value: 'performance', label: 'Performance Report' },
    { value: 'customer', label: 'Customer Report' },
    { value: 'technician', label: 'Technician Report' }
  ]

  const handleGenerateReport = () => {
    // Would generate report from Appwrite data
    alert(`Generating ${reportType} report from ${dateRange.from} to ${dateRange.to}`)
  }

  return (
    <div className="main-content">
      <header className="text-center mb-2">
        <h2>Reports</h2>
      </header>

      <div className="report-filters card p-2">
        <div className="filter-row">
          <label>
            Report Type:
            <select 
              value={reportType} 
              onChange={(e) => setReportType(e.target.value)}
              className="input ml-1"
            >
              {reportTypes.map(type => (
                <option key={type.value} value={type.value}>{type.label}</option>
              ))}
            </select>
          </label>
        </div>

        <div className="filter-row mt-2">
          <label>
            From:
            <input
              type="date"
              value={dateRange.from}
              onChange={(e) => setDateRange(prev => ({ ...prev, from: e.target.value }))}
              className="input ml-1"
            />
          </label>
          <label className="ml-2">
            To:
            <input
              type="date"
              value={dateRange.to}
              onChange={(e) => setDateRange(prev => ({ ...prev, to: e.target.value }))}
              className="input ml-1"
            />
          </label>
        </div>

        <div className="text-center mt-2">
          <button className="btn btn-teal" onClick={handleGenerateReport}>
            <FaChartBar /> Generate Report
          </button>
          <button className="btn btn-dark ml-1">
            <FaFileExport /> Export PDF
          </button>
        </div>
      </div>

      <div className="text-center mt-4 text-grey">
        <p>Select report parameters and click Generate to view your report.</p>
      </div>
    </div>
  )
}
