"use client"

import { use } from "react"
import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import { ProfileHeader } from "@/components/profile/profile-header"
import { ThreadCard } from "@/components/forum/thread-card"
import { Button } from "@/components/ui/button"
import { getProfileByUsername, getThreadsByUser } from "@/lib/mock-data"
import { ArrowLeft } from "lucide-react"

export default function ProfilePage({ params }: { params: Promise<{ username: string }> }) {
  const { username } = use(params)
  const { locale, t } = useLocale()

  const profile = getProfileByUsername(username)
  if (!profile) {
    return (
      <div className="flex flex-col items-center gap-4 py-20">
        <p className="text-muted-foreground">
          {locale === "tr" ? "Kullanici bulunamadi." : "User not found."}
        </p>
        <Link href="/">
          <Button variant="outline" size="sm">
            <ArrowLeft className="mr-1.5 h-4 w-4" />
            {t.common.back}
          </Button>
        </Link>
      </div>
    )
  }

  const threads = getThreadsByUser(profile.id)

  return (
    <div className="flex flex-col gap-6">
      <Link href="/" className="self-start">
        <Button variant="ghost" size="sm" className="gap-1.5 text-muted-foreground">
          <ArrowLeft className="h-4 w-4" />
          {t.common.back}
        </Button>
      </Link>

      <ProfileHeader profile={profile} />

      <div className="flex flex-col gap-4">
        <h2 className="text-lg font-semibold text-foreground">
          {t.profile.threads} ({threads.length})
        </h2>

        {threads.length > 0 ? (
          <div className="flex flex-col gap-2">
            {threads.map((thread) => (
              <ThreadCard key={thread.id} thread={thread} />
            ))}
          </div>
        ) : (
          <div className="rounded-lg border border-dashed border-border p-12 text-center">
            <p className="text-sm text-muted-foreground">
              {locale === "tr" ? "Henuz konu acmamis." : "No threads yet."}
            </p>
          </div>
        )}
      </div>
    </div>
  )
}