import { GitPullRequest } from "lucide-react"
import { getAccountContext } from "@/lib/server/get-account-context"
import { getAllRepositories } from "@/app/(dashboard)/dashboard/action"
import { RepositoryList } from "./_components/RepositoryList"

export default async function RepositoriesPage() {
  const accountPayload = await getAccountContext()
  const repos = await getAllRepositories(accountPayload)
  // Serialize Date objects for client component boundary
  const repositories = (Array.isArray(repos) ? repos : []).map(repo => ({
    ...repo,
    created_at: repo.created_at instanceof Date ? repo.created_at.toISOString() : repo.created_at,
    last_optimized:
      repo.last_optimized instanceof Date ? repo.last_optimized.toISOString() : repo.last_optimized,
  }))

  return (
    <div className="flex-1 bg-background">
      <div className="min-h-screen py-6 sm:py-8 px-4 sm:px-6 max-w-[1400px] mx-auto">
        <div className="mb-6 sm:mb-8">
          <div className="flex items-center gap-3 mb-2">
            <h1 className="text-xl sm:text-2xl font-bold">Repositories</h1>
            <div className="px-2 py-0.5 sm:px-2.5 sm:py-1 bg-primary/10 text-primary rounded-full text-xs sm:text-sm font-medium">
              {repositories.length} total
            </div>
          </div>
        </div>

        <div className="bg-card p-4 sm:p-6 rounded-xl border border-border">
          {repositories.length === 0 ? (
            <div className="flex justify-center items-center min-h-[300px] sm:min-h-[400px] w-full">
              <div className="text-center py-12 sm:py-16 bg-muted/10 rounded-xl border border-dashed border-border max-w-lg w-full px-5 sm:px-8">
                <div className="inline-flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-muted/20 mb-3 sm:mb-4">
                  <GitPullRequest size={20} className="text-muted-foreground sm:w-6 sm:h-6" />
                </div>
                <h3 className="text-base sm:text-lg font-semibold mb-2">
                  No repositories connected
                </h3>
                <p className="text-xs sm:text-sm text-muted-foreground mx-auto mb-4 sm:mb-6 max-w-md">
                  Install the Codeflash GitHub App for your organization and grant access to the
                  repositories you want us to optimize.
                </p>
                <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3">
                  <a
                    href="https://github.com/apps/codeflash-ai/installations/select_target"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-full sm:w-auto inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-xs sm:text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
                  >
                    Install GitHub App
                  </a>
                  <a
                    href="https://docs.codeflash.ai/getting-started/local-installation"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-full sm:w-auto inline-flex items-center justify-center rounded-lg border border-border px-4 py-2 text-xs sm:text-sm font-medium text-foreground hover:bg-muted/40 transition-colors"
                  >
                    View setup guide
                  </a>
                </div>
              </div>
            </div>
          ) : (
            <RepositoryList repositories={repositories} />
          )}
        </div>
      </div>
    </div>
  )
}
