import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'

function Supplier() {

  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const [payments, setPayments] = useState([])
  const [total, setTotal] = useState(0)
  const [message, setMessage] = useState('')

  const headers = {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }

  const handleFilter = async (e) => {
    e.preventDefault()

    try {
      const res = await axios.get(
        'http://localhost:5001/api/supplier/getreport',
        {
          headers,
          params: { startDate, endDate }
        }
      )

      setPayments(res.data.payments)
      setTotal(res.data.total)
      setMessage('')

    } catch (error) {
      console.log(error)
      setMessage('Something went wrong')
    }
  }

  return (
    <div className="page-shell">
    <div className="page-container">

      <div className="mb-6">
        <Link to="/dashboard" className="btn-back">
          Back to dashboard
        </Link>
      </div>

      <h1 className="page-title">Payment Reports</h1>

      {message && <p className="alert-error">{message}</p>}

      <form onSubmit={handleFilter} className="form-card">

        <div>
          <label className="label-text">Start Date</label>
          <input
            type='date'
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}
            className="input-field"
            required
          />
        </div>

        <div>
          <label className="label-text">End Date</label>
          <input
            type='date'
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}
            className="input-field"
            required
          />
        </div>

        <button type='submit' className="btn-primary">
          Filter
        </button>

      </form>

      <div className="summary-box">
        <p className="text-lg font-semibold text-slate-800">Total Paid: {total.toFixed(2)}</p>
        <p className="text-sm text-slate-500 mt-1">Payments in range: {payments.length}</p>
      </div>

      <div className="mt-6 space-y-3">

        {payments.length === 0 ? (
          <p className="text-sm text-slate-500">No payments found for this date range.</p>
        ) : (
          payments.map((payment) => (
            <div key={payment._id} className="list-card">

              <p className="text-sm text-slate-700"><span className="font-medium">Student:</span> {payment.student_FK?.fullName || 'N/A'}</p>
              <p className="text-sm text-slate-700 mt-1"><span className="font-medium">Student ID:</span> {payment.student_FK?.studentId || 'N/A'}</p>
              <p className="text-sm text-slate-700 mt-1"><span className="font-medium">Date:</span> {payment.paymentDate ? new Date(payment.paymentDate).toLocaleDateString() : ''}</p>
              <p className="text-sm text-slate-700 mt-1"><span className="font-medium">Amount:</span> {payment.amount}</p>

            </div>
          ))
        )}

      </div>

    </div>
    </div>
  )
}

export default Supplier
