"use client"

import { useState } from "react"
import { TopNav } from "@/components/layout/top-nav"
import { BottomNav } from "@/components/layout/bottom-nav"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Search, Hash, MapPin, SlidersHorizontal } from 'lucide-react'
import { PostCard } from "@/components/posts/post-card"
import { FrindleButton } from "@/components/frindle/frindle-button"
import type { Post } from "@/types/post"
import type { UserWithFrindleStatus } from "@/types/frindle"

interface SearchUser {
  id: string
  name: string
  username: string
  avatar: string
  followers: number
  isFollowing: boolean
}

const MOCK_USERS: UserWithFrindleStatus[] = [
  {
    id: "1",
    name: "Sarah Johnson",
    username: "@sarah_j",
    avatar: "/placeholder.svg?key=s74k2",
    followers: 1234,
    frindleStatus: "none",
  },
  {
    id: "2",
    name: "Mike Chen",
    username: "@mike_c",
    avatar: "/placeholder.svg?key=m83j3",
    followers: 856,
    frindleStatus: "connected",
  },
  {
    id: "3",
    name: "Alex Turner",
    username: "@alex_t",
    avatar: "/placeholder.svg?key=a62k1",
    followers: 432,
    frindleStatus: "pending_sent",
  },
]

const MOCK_POSTS: Post[] = [
  {
    id: "1",
    author: {
      id: "1",
      username: "digital_nomad",
      displayName: "Digital Nomad",
      avatar: "/placeholder.svg?key=d92k4",
    },
    content: "Just launched me first PWA! The feeling of seeing your code come to life is unmatched.",
    type: "thought",
    timestamp: "2m ago",
    likes: 12,
    comments: 3,
    isLiked: false,
  },
]

export default function SearchPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [activeTab, setActiveTab] = useState("all")
  const [users, setUsers] = useState<UserWithFrindleStatus[]>(MOCK_USERS)
  const [posts, setPosts] = useState<Post[]>(MOCK_POSTS)
  const [showFilters, setShowFilters] = useState(false)
  
  // Location filters
  const [country, setCountry] = useState<string>("")
  const [state, setState] = useState<string>("")
  const [city, setCity] = useState<string>("")
  const [radius, setRadius] = useState<string>("")

  const handleSendRequest = (userId: string) => {
    setUsers(users.map((user) => (user.id === userId ? { ...user, frindleStatus: "pending_sent" as const } : user)))
  }

  const handleCancelRequest = (userId: string) => {
    setUsers(users.map((user) => (user.id === userId ? { ...user, frindleStatus: "none" as const } : user)))
  }

  const handleAcceptRequest = (userId: string) => {
    setUsers(users.map((user) => (user.id === userId ? { ...user, frindleStatus: "connected" as const } : user)))
  }

  const handleRejectRequest = (userId: string) => {
    setUsers(users.map((user) => (user.id === userId ? { ...user, frindleStatus: "rejected" as const } : user)))
  }

  const handleRemoveConnection = (userId: string) => {
    setUsers(users.map((user) => (user.id === userId ? { ...user, frindleStatus: "none" as const } : user)))
  }

  const handleLike = (postId: string) => {
    setPosts(
      posts.map((post) =>
        post.id === postId
          ? { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1 }
          : post,
      ),
    )
  }

  return (
    <div className="min-h-screen pb-0 md:pb-20 bg-background">
      <TopNav />
      <main className="max-w-2xl mx-auto">
        <div className="p-4 space-y-4">
          <div className="space-y-3">
            <div className="flex gap-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                <Input
                  placeholder="Search for people, posts, or topics..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 h-12 text-base"
                  autoFocus
                />
              </div>
              <Button
                variant={showFilters ? "default" : "outline"}
                size="icon"
                className="h-12 w-12 shrink-0"
                onClick={() => setShowFilters(!showFilters)}
              >
                <SlidersHorizontal className="w-5 h-5" />
              </Button>
            </div>

            {/* Location Filters */}
            {showFilters && (
              <div className="bg-card border border-border rounded-xl p-4 space-y-4 animate-in slide-in-from-top-2">
                <div className="flex items-center gap-2 text-sm font-semibold text-foreground mb-2">
                  <MapPin className="w-4 h-4" />
                  <span>Location Filters</span>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="country" className="text-sm font-medium">
                      Country
                    </Label>
                    <Select value={country} onValueChange={setCountry}>
                      <SelectTrigger id="country">
                        <SelectValue placeholder="Select country" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Countries</SelectItem>
                        <SelectItem value="us">United States</SelectItem>
                        <SelectItem value="uk">United Kingdom</SelectItem>
                        <SelectItem value="ca">Canada</SelectItem>
                        <SelectItem value="au">Australia</SelectItem>
                        <SelectItem value="de">Germany</SelectItem>
                        <SelectItem value="fr">France</SelectItem>
                        <SelectItem value="in">India</SelectItem>
                        <SelectItem value="jp">Japan</SelectItem>
                        <SelectItem value="br">Brazil</SelectItem>
                        <SelectItem value="mx">Mexico</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="state" className="text-sm font-medium">
                      State/Province
                    </Label>
                    <Select value={state} onValueChange={setState} disabled={!country || country === "all"}>
                      <SelectTrigger id="state">
                        <SelectValue placeholder="Select state" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All States</SelectItem>
                        {country === "us" && (
                          <>
                            <SelectItem value="ca">California</SelectItem>
                            <SelectItem value="ny">New York</SelectItem>
                            <SelectItem value="tx">Texas</SelectItem>
                            <SelectItem value="fl">Florida</SelectItem>
                            <SelectItem value="il">Illinois</SelectItem>
                            <SelectItem value="pa">Pennsylvania</SelectItem>
                            <SelectItem value="oh">Ohio</SelectItem>
                            <SelectItem value="ga">Georgia</SelectItem>
                            <SelectItem value="nc">North Carolina</SelectItem>
                            <SelectItem value="mi">Michigan</SelectItem>
                          </>
                        )}
                        {country === "ca" && (
                          <>
                            <SelectItem value="on">Ontario</SelectItem>
                            <SelectItem value="qc">Quebec</SelectItem>
                            <SelectItem value="bc">British Columbia</SelectItem>
                            <SelectItem value="ab">Alberta</SelectItem>
                          </>
                        )}
                        {country === "uk" && (
                          <>
                            <SelectItem value="eng">England</SelectItem>
                            <SelectItem value="sct">Scotland</SelectItem>
                            <SelectItem value="wls">Wales</SelectItem>
                            <SelectItem value="nir">Northern Ireland</SelectItem>
                          </>
                        )}
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="city" className="text-sm font-medium">
                      City
                    </Label>
                    <Select value={city} onValueChange={setCity} disabled={!state || state === "all"}>
                      <SelectTrigger id="city">
                        <SelectValue placeholder="Select city" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Cities</SelectItem>
                        {state === "ca" && (
                          <>
                            <SelectItem value="la">Los Angeles</SelectItem>
                            <SelectItem value="sf">San Francisco</SelectItem>
                            <SelectItem value="sd">San Diego</SelectItem>
                            <SelectItem value="sj">San Jose</SelectItem>
                          </>
                        )}
                        {state === "ny" && (
                          <>
                            <SelectItem value="nyc">New York City</SelectItem>
                            <SelectItem value="buf">Buffalo</SelectItem>
                            <SelectItem value="roc">Rochester</SelectItem>
                          </>
                        )}
                        {state === "tx" && (
                          <>
                            <SelectItem value="hou">Houston</SelectItem>
                            <SelectItem value="dal">Dallas</SelectItem>
                            <SelectItem value="aus">Austin</SelectItem>
                            <SelectItem value="sa">San Antonio</SelectItem>
                          </>
                        )}
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="radius" className="text-sm font-medium">
                      Radius
                    </Label>
                    <Select value={radius} onValueChange={setRadius}>
                      <SelectTrigger id="radius">
                        <SelectValue placeholder="Select radius" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="5">5 miles</SelectItem>
                        <SelectItem value="10">10 miles</SelectItem>
                        <SelectItem value="25">25 miles</SelectItem>
                        <SelectItem value="50">50 miles</SelectItem>
                        <SelectItem value="100">100 miles</SelectItem>
                        <SelectItem value="250">250 miles</SelectItem>
                        <SelectItem value="500">500 miles</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                {/* Active Filters Display */}
                {(country || state || city || radius) && (
                  <div className="flex flex-wrap gap-2 pt-2 border-t">
                    <span className="text-xs text-muted-foreground">Active filters:</span>
                    {country && country !== "all" && (
                      <button
                        onClick={() => setCountry("")}
                        className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-primary/10 text-primary text-xs hover:bg-primary/20"
                      >
                        <span>Country: {country.toUpperCase()}</span>
                        <span className="text-lg leading-none">×</span>
                      </button>
                    )}
                    {state && state !== "all" && (
                      <button
                        onClick={() => setState("")}
                        className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-primary/10 text-primary text-xs hover:bg-primary/20"
                      >
                        <span>State: {state.toUpperCase()}</span>
                        <span className="text-lg leading-none">×</span>
                      </button>
                    )}
                    {city && city !== "all" && (
                      <button
                        onClick={() => setCity("")}
                        className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-primary/10 text-primary text-xs hover:bg-primary/20"
                      >
                        <span>City: {city.toUpperCase()}</span>
                        <span className="text-lg leading-none">×</span>
                      </button>
                    )}
                    {radius && (
                      <button
                        onClick={() => setRadius("")}
                        className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-primary/10 text-primary text-xs hover:bg-primary/20"
                      >
                        <span>Radius: {radius} miles</span>
                        <span className="text-lg leading-none">×</span>
                      </button>
                    )}
                    <button
                      onClick={() => {
                        setCountry("")
                        setState("")
                        setCity("")
                        setRadius("")
                      }}
                      className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-destructive/10 text-destructive text-xs hover:bg-destructive/20 ml-auto"
                    >
                      Clear all
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>

          {searchQuery ? (
            <Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="w-full grid grid-cols-3">
                <TabsTrigger value="all">All</TabsTrigger>
                <TabsTrigger value="people">People</TabsTrigger>
                <TabsTrigger value="posts">Posts</TabsTrigger>
              </TabsList>

              <TabsContent value="all" className="space-y-4 mt-4">
                <div className="space-y-2">
                  <h2 className="text-sm font-semibold text-muted-foreground px-1">People</h2>
                  {users.slice(0, 3).map((user) => (
                    <div key={user.id} className="bg-card rounded-xl border border-border p-4 flex items-center gap-4">
                      <Avatar className="w-12 h-12">
                        <AvatarImage src={user.avatar || "/placeholder.svg"} />
                        <AvatarFallback>
                          {user.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>

                      <div className="flex-1 min-w-0">
                        <h3 className="font-semibold text-foreground">{user.name}</h3>
                        <p className="text-sm text-muted-foreground">{user.username}</p>
                        <p className="text-xs text-muted-foreground">{user.followers.toLocaleString()} followers</p>
                      </div>

                      <FrindleButton
                        userId={user.id}
                        status={user.frindleStatus}
                        onSendRequest={handleSendRequest}
                        onCancelRequest={handleCancelRequest}
                        onAcceptRequest={handleAcceptRequest}
                        onRejectRequest={handleRejectRequest}
                        onRemoveConnection={handleRemoveConnection}
                      />
                    </div>
                  ))}
                </div>

                <div className="space-y-2">
                  <h2 className="text-sm font-semibold text-muted-foreground px-1">Posts</h2>
                  {posts.map((post) => (
                    <PostCard key={post.id} post={post} onLike={handleLike} />
                  ))}
                </div>
              </TabsContent>

              <TabsContent value="people" className="space-y-2 mt-4">
                {users.map((user) => (
                  <div key={user.id} className="bg-card rounded-xl border border-border p-4 flex items-center gap-4">
                    <Avatar className="w-12 h-12">
                      <AvatarImage src={user.avatar || "/placeholder.svg"} />
                      <AvatarFallback>
                        {user.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>

                    <div className="flex-1 min-w-0">
                      <h3 className="font-semibold text-foreground">{user.name}</h3>
                      <p className="text-sm text-muted-foreground">{user.username}</p>
                      <p className="text-xs text-muted-foreground">{user.followers.toLocaleString()} followers</p>
                    </div>

                    <FrindleButton
                      userId={user.id}
                      status={user.frindleStatus}
                      onSendRequest={handleSendRequest}
                      onCancelRequest={handleCancelRequest}
                      onAcceptRequest={handleAcceptRequest}
                      onRejectRequest={handleRejectRequest}
                      onRemoveConnection={handleRemoveConnection}
                    />
                  </div>
                ))}
              </TabsContent>

              <TabsContent value="posts" className="space-y-4 mt-4">
                {posts.map((post) => (
                  <PostCard key={post.id} post={post} onLike={handleLike} />
                ))}
              </TabsContent>
            </Tabs>
          ) : (
            <div className="space-y-4 mt-8">
              <div>
                <h2 className="text-sm font-semibold text-muted-foreground mb-3">Trending Clusters</h2>
                <div className="bg-card border border-border rounded-xl p-4">
                  <div className="flex flex-wrap gap-3 justify-center py-2">
                    {[
                      "Motivation", "Weekend", "Life", "Selfie", "Food", "Party", "Trending","Art", "Music",
                    ].map((tag, index) => {
                      // Generate unique sizes based on tag using pseudo-random distribution
                      const hashCode = tag.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
                      
                      // Define size variants with appropriate text sizes
                      const sizeVariants = [
                        { circle: 'w-20 h-20', text: 'text-[9px]', padding: '0.35rem' },
                        { circle: 'w-24 h-24', text: 'text-[10px]', padding: '0.4rem' },
                        { circle: 'w-28 h-28', text: 'text-xs', padding: '0.5rem' },
                        { circle: 'w-32 h-32', text: 'text-sm', padding: '0.6rem' },
                        { circle: 'w-36 h-36', text: 'text-base', padding: '0.7rem' },
                        { circle: 'w-40 h-40', text: 'text-lg', padding: '0.8rem' },
                        { circle: 'w-44 h-44', text: 'text-xl', padding: '0.9rem' },
                      ]
                      const sizeConfig = sizeVariants[(hashCode * 7 + index * 3) % sizeVariants.length]
                      
                      // Custom color palette
                      const CLUSTER_COLORS = [
                        { bg: "#d89a91", text: "#a0635a", border: "#d89a91" }, // Dusty Rose
                        { bg: "#fd897c", text: "#c8573e", border: "#fd897c" }, // Coral
                        { bg: "#ffa678", text: "#cc7543", border: "#ffa678" }, // Peach
                        { bg: "#fed06e", text: "#c89b35", border: "#fed06e" }, // Golden
                        { bg: "#fdf057", text: "#c4b520", border: "#fdf057" }, // Bright Yellow
                        { bg: "#fff673", text: "#c4b520", border: "#fff673" }, // Light Yellow
                        { bg: "#59b185", text: "#3a7d5a", border: "#59b185" }, // Teal Green
                        { bg: "#79d6ad", text: "#4fa17a", border: "#79d6ad" }, // Mint Green
                        { bg: "#d89a91", text: "#a0635a", border: "#d89a91" }, // Dusty Rose (repeat for 9th)
                      ]
                      const color = CLUSTER_COLORS[index % CLUSTER_COLORS.length]
                      
                      const postCount = Math.floor(Math.random() * 50000) + 1000
                      
                      return (
                        <button
                          key={tag}
                          className={`
                            rounded-full
                            font-semibold
                            border-2
                            flex items-center justify-center
                            transition-all duration-300
                            hover:scale-110 active:scale-95
                            ${sizeConfig.circle}
                            ${sizeConfig.text}
                          `}
                          style={{
                            backgroundColor: `${color.bg}`, // ~40% opacity
                            borderColor: "white",
                            color: "black",
                            padding: sizeConfig.padding,
                            whiteSpace: 'nowrap',
                          }}
                          title={`${tag} - ${postCount.toLocaleString()} posts`}
                        >
                          <span className="text-center leading-none overflow-hidden text-ellipsis max-w-full px-0.5">
                            {tag}
                          </span>
                        </button>
                      )
                    })}
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </main>
      <BottomNav />
    </div>
  )
}