import { Plus } from 'lucide-react'
import Link from 'next/link'
import { AppShell } from '@/components/app-shell'
import { MeetingCard } from '@/components/meeting-card'
import { mockMeetings, groupByDate, dateLabel } from '@/lib/mock-data'

export default function HomePage() {
  const groups = groupByDate(mockMeetings)
  const days = Object.keys(groups).sort().reverse()

  return (
    <AppShell>
      <div className="mx-auto max-w-4xl px-5 py-8 md:px-10 md:py-10">
        <header className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-[26px] font-semibold tracking-tight">会议记录</h1>
            <p className="mt-1 text-[14px] text-muted-foreground">
              共 {mockMeetings.length} 次会议 · 总时长{' '}
              {Math.round(mockMeetings.reduce((s, m) => s + m.duration, 0) / 60)} 分钟
            </p>
          </div>
          <Link
            href="/upload"
            className="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 text-[14px] font-medium text-primary-foreground transition-colors hover:bg-primary-light"
          >
            <Plus className="h-4 w-4" />
            新建会议
          </Link>
        </header>

        <div className="space-y-8">
          {days.map((day) => (
            <section key={day}>
              <div className="mb-3 flex items-center gap-3">
                <h2 className="text-[13px] font-medium text-muted-foreground">
                  {dateLabel(day)}
                </h2>
                <div className="h-px flex-1 bg-border" />
              </div>
              <div className="space-y-3">
                {groups[day].map((m) => (
                  <MeetingCard key={m.id} meeting={m} />
                ))}
              </div>
            </section>
          ))}
        </div>
      </div>
    </AppShell>
  )
}