import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { authorsApi, booksApi, borrowApi } from '../api/client'

export default function Dashboard() {
  const [stats, setStats] = useState(null)

  useEffect(() => {
    Promise.all([
      authorsApi.getAll(),
      booksApi.getAll(),
      borrowApi.getAll({ status: 'Active' }),
      borrowApi.getAll({ isOverdue: true }),
    ]).then(([authors, books, active, overdue]) => {
      setStats({
        authors: authors.length,
        books: books.length,
        active: active.length,
        overdue: overdue.length,
        available: books.filter(b => b.isAvailable).length,
      })
    }).catch(() => {})
  }, [])

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">Dashboard</h1>
          <p className="page-subtitle">Welcome to the Library Management System</p>
        </div>
      </div>

      <div className="stat-grid">
        <StatCard value={stats?.authors ?? '—'} label="Authors" color="var(--amber)" />
        <StatCard value={stats?.books ?? '—'} label="Total Books" color="var(--blue)" />
        <StatCard value={stats?.available ?? '—'} label="Available Books" color="var(--green)" />
        <StatCard value={stats?.active ?? '—'} label="Active Borrows" color="var(--amber)" />
        <StatCard value={stats?.overdue ?? '—'} label="Overdue" color="var(--red)" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 8 }}>
        <QuickLink to="/books"        title="Manage Books"    desc="Add, edit, search and filter the book catalogue." />
        <QuickLink to="/authors"      title="Manage Authors"  desc="Maintain author profiles and their bibliographies." />
        <QuickLink to="/borrows"      title="Borrow Records"  desc="Track who has borrowed which books and when." />
        <QuickLink to="/overdue"      title="Overdue Report"  desc="See all currently overdue loans at a glance." />
      </div>
    </div>
  )
}

function StatCard({ value, label, color }) {
  return (
    <div className="stat-card">
      <div className="stat-value" style={{ color }}>{value}</div>
      <div className="stat-label">{label}</div>
    </div>
  )
}

function QuickLink({ to, title, desc }) {
  return (
    <Link to={to} style={{ textDecoration: 'none' }}>
      <div className="card" style={{ cursor: 'pointer', transition: 'border-color 0.15s, transform 0.15s' }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(232,160,69,0.3)'; e.currentTarget.style.transform = 'translateY(-2px)' }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = ''; e.currentTarget.style.transform = '' }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: '1.05rem', marginBottom: 6, color: 'var(--text-primary)' }}>{title}</h3>
        <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>{desc}</p>
      </div>
    </Link>
  )
}
