import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { forumPosts } from '@/lib/data';
import { Button } from '@/components/ui/button';
import { Facebook, Instagram, Youtube, Rss } from 'lucide-react';
import Link from 'next/link';

export default function ForumPage() {
  return (
    <div className="container mx-auto">
      <div className="flex flex-col md:flex-row justify-between items-start mb-8 gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Community Forum</h1>
          <p className="text-muted-foreground">
            Discuss, share, and connect with fellow riders.
          </p>
        </div>
        <div className="flex items-center gap-2">
            <Button variant="outline" asChild>
                <Link href="#">
                    <Rss className="mr-2 h-4 w-4"/> Follow
                </Link>
            </Button>
            <Button variant="ghost" size="icon" asChild>
                <Link href="#" aria-label="Facebook">
                    <Facebook className="h-5 w-5 text-muted-foreground" />
                </Link>
            </Button>
            <Button variant="ghost" size="icon" asChild>
                <Link href="#" aria-label="Instagram">
                    <Instagram className="h-5 w-5 text-muted-foreground" />
                </Link>
            </Button>
            <Button variant="ghost" size="icon" asChild>
                <Link href="#" aria-label="YouTube">
                    <Youtube className="h-5 w-5 text-muted-foreground" />
                </Link>
            </Button>
        </div>
      </div>

      <Card>
        <CardHeader className="flex flex-row justify-between items-center">
            <div>
                <CardTitle>Discussions</CardTitle>
                <CardDescription>Browse the latest topics from the community.</CardDescription>
            </div>
            <Button className="bg-accent text-accent-foreground hover:bg-accent/90">
                Start a Discussion
            </Button>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[60%]">Topic</TableHead>
                <TableHead className="text-center">Replies</TableHead>
                <TableHead className="text-center">Views</TableHead>
                <TableHead>Last Activity</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {forumPosts.map((post) => (
                <TableRow key={post.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Avatar className="hidden md:flex">
                        {post.author.avatarUrl && <AvatarImage src={post.author.avatarUrl} data-ai-hint={post.author.avatarHint}/>}
                        <AvatarFallback>{post.author.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div>
                        <Link href="#" className="font-medium hover:underline">{post.title}</Link>
                        <div className="text-sm text-muted-foreground">
                          by <span className="font-semibold">{post.author.name}</span> on {post.createdAt}
                        </div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell className="text-center text-muted-foreground">{post.replies}</TableCell>
                  <TableCell className="text-center text-muted-foreground">{post.views}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Avatar className="h-8 w-8">
                        {post.lastReply.author.avatarUrl && <AvatarImage src={post.lastReply.author.avatarUrl} data-ai-hint={post.lastReply.author.avatarHint}/>}
                        <AvatarFallback>{post.lastReply.author.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="text-sm font-medium">{post.lastReply.author.name}</p>
                        <p className="text-xs text-muted-foreground">{post.lastReply.timestamp}</p>
                      </div>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}