'use client';

/**
 * Home Page
 *
 * Story 3.1: History Feed UI integration
 *
 * The home screen IS the history feed. Shows:
 * - Header with "My Journal" title
 * - History feed with lazy loading
 * - FAB (Floating Action Button) to start new vent
 * - HistoryDetailSheet for viewing past entries
 *
 * User Flow:
 * - Returning users see their journal of completed posts
 * - First-time users see empty state with CTA
 * - FAB navigates to chat for new venting session
 * - Tapping history card opens detail sheet
 */

import { HistoryFeed, HistoryDetailSheet } from '@/components/features/journal';
import { Plus, Settings } from 'lucide-react';
import Link from 'next/link';

export default function HomePage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-10 bg-white border-b border-slate-200 px-4 py-4 flex items-center justify-between">
        <h1 className="text-2xl font-serif font-bold text-slate-800">
          My Journal
        </h1>
        <Link
          href="/settings"
          className="p-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-colors"
          aria-label="Settings"
        >
          <Settings className="w-5 h-5" aria-hidden="true" />
        </Link>
      </header>

      {/* Main Content - History Feed */}
      <main className="pb-24">
        <HistoryFeed />
      </main>

      {/* Floating Action Button - New Vent */}
      <Link
        href="/chat?new=true"
        className="fixed bottom-6 right-6 min-h-[56px] w-14 bg-slate-800 text-white rounded-full shadow-lg hover:bg-slate-700 transition-colors flex items-center justify-center"
        aria-label="Start new vent"
      >
        <Plus className="w-6 h-6" aria-hidden="true" />
      </Link>

      {/* History Detail Sheet */}
      <HistoryDetailSheet />
    </div>
  );
}
