import { useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
import { getDailyReport, getMonthlyReport, getWeeklyReport } from '../services/reportsService'

function ReportCard({ title, subtitle, tone, children }) {
  const toneMap = {
    purple: 'from-purple-500/20 to-fuchsia-500/10 border-fuchsia-400/30',
    emerald: 'from-emerald-500/20 to-teal-500/10 border-emerald-400/30',
    amber: 'from-amber-500/20 to-orange-500/10 border-amber-400/30',
  }

  return (
    <div className={`rounded-2xl border bg-gradient-to-br ${toneMap[tone] || toneMap.purple} p-4`}>
      <div className="text-sm font-semibold">{title}</div>
      <div className="text-xs text-slate-400 mt-1">{subtitle}</div>
      <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">{children}</div>
    </div>
  )
}

function Metric({ label, value }) {
  return (
    <div className="rounded-xl border border-white/10 bg-black/20 p-3">
      <div className="text-xs text-slate-400">{label}</div>
      <div className="text-lg font-semibold mt-1">{value ?? 0}</div>
    </div>
  )
}

export default function ReportsPage() {
  const [daily, setDaily] = useState(null)
  const [weekly, setWeekly] = useState(null)
  const [monthly, setMonthly] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const run = async () => {
      try {
        setLoading(true)
        const [d, w, m] = await Promise.all([getDailyReport(), getWeeklyReport(), getMonthlyReport()])
        setDaily(d)
        setWeekly(w)
        setMonthly(m)
      } catch (err) {
        toast.error(err?.message || 'Failed to load reports')
      } finally {
        setLoading(false)
      }
    }
    run()
  }, [])

  return (
    <div>
      <div className="flex items-start justify-between gap-4 mb-4">
        <div>
          <h2 className="text-2xl font-semibold">Reports</h2>
          <p className="text-sm text-slate-400 mt-1">Daily, weekly and monthly stock summaries.</p>
        </div>
      </div>

      {loading ? (
        <div className="rounded-2xl border border-white/10 bg-white/5 p-6">Loading reports...</div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <ReportCard
            title="Daily Report"
            subtitle={`Date: ${daily?.date || '—'}`}
            tone="purple"
          >
            <Metric label="Available Stock" value={daily?.availableStock} />
            <Metric label="Stock In Transactions" value={daily?.stockInTransactions} />
            <Metric label="Stock Out Transactions" value={daily?.stockOutTransactions} />
            <Metric label="Total Products" value={daily?.totalProducts} />
            <Metric label="Total Warehouses" value={daily?.totalWarehouses} />
            <Metric label="Total Transactions" value={daily?.totalTransactions} />
          </ReportCard>

          <ReportCard
            title="Weekly Report"
            subtitle={`From ${weekly?.startDate || '—'} to ${weekly?.endDate || '—'}`}
            tone="emerald"
          >
            <Metric label="Available Stock" value={weekly?.availableStock} />
            <Metric label="Stock In Transactions" value={weekly?.stockInTransactions} />
            <Metric label="Stock Out Transactions" value={weekly?.stockOutTransactions} />
            <Metric label="Total Products" value={weekly?.totalProducts} />
            <Metric label="Total Warehouses" value={weekly?.totalWarehouses} />
            <Metric label="Total Transactions" value={weekly?.totalTransactions} />
          </ReportCard>

          <ReportCard
            title="Monthly Report"
            subtitle={`From ${monthly?.startDate || '—'} to ${monthly?.endDate || '—'}`}
            tone="amber"
          >
            <Metric label="Available Stock" value={monthly?.availableStock} />
            <Metric label="Stock In Transactions" value={monthly?.stockInTransactions} />
            <Metric label="Stock Out Transactions" value={monthly?.stockOutTransactions} />
            <Metric label="Total Products" value={monthly?.totalProducts} />
            <Metric label="Total Warehouses" value={monthly?.totalWarehouses} />
            <Metric label="Total Transactions" value={monthly?.totalTransactions} />
          </ReportCard>
        </div>
      )}
    </div>
  )
}

