import { Link } from 'react-router-dom'
import { useStarredRepos } from '../hooks/useStarredRepos'
import { useRepos } from '../api/queries/repos'

export default function StarredPage() {
  const { starred } = useStarredRepos()
  const { data: repos } = useRepos()

  const starredRepos = repos?.filter(r => starred.includes(`${r.ownerName}/${r.name}`)) ?? []

  return (
    <div className="max-w-4xl mx-auto px-4 md:px-6 py-6">
      <h1 className="text-xl font-semibold text-[#172B4D] mb-6">Starred repositories</h1>

      {!starredRepos.length ? (
        <div className="flex flex-col items-center justify-center py-16 border border-dashed border-[#DFE1E6] rounded text-center gap-3">
          <svg width="36" height="36" fill="none" stroke="#97A0AF" strokeWidth="1.5" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
          </svg>
          <div>
            <p className="text-sm font-medium text-[#172B4D]">No starred repositories</p>
            <p className="text-xs text-[#5E6C84] mt-1">Star repositories in the sidebar to find them here quickly.</p>
          </div>
          <Link to="/repos" className="text-xs text-[#0052CC] hover:underline">Browse repositories</Link>
        </div>
      ) : (
        <div className="flex flex-col gap-2">
          {starredRepos.map(r => (
            <Link key={r.id} to={`/repos/${r.ownerName}/${r.name}`}
              className="flex items-center gap-3 p-4 border border-[#DFE1E6] rounded bg-white hover:border-[#4C9AFF] hover:bg-[#FAFBFC] transition-colors">
              <svg width="16" height="16" fill="#F79009" viewBox="0 0 24 24">
                <path d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
              </svg>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-semibold text-[#0052CC]">{r.ownerName}/{r.name}</p>
                {r.description && <p className="text-xs text-[#5E6C84] truncate mt-0.5">{r.description}</p>}
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}
