import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  FlatList,
  StyleSheet,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useRouter } from 'expo-router';

interface Song {
  id: string;
  title: string;
  artist: string;
}

const MOCK_SONGS: Song[] = [
  { id: '1234', title: '좋은 날', artist: '아이유' },
  { id: '5678', title: '취중진담', artist: '김동률' },
  { id: '9101', title: 'LOVE DIVE', artist: 'IVE' },
  { id: '1121', title: 'Permission to Dance', artist: 'BTS' },
];

export default function MainScreen() {
  const [keyword, setKeyword] = useState('');
  const [results, setResults] = useState<Song[]>([]);
  const router = useRouter();

  const handleSearch = () => {
    const filtered = MOCK_SONGS.filter(
      song =>
        song.title.includes(keyword) ||
        song.artist.includes(keyword)
    );
    setResults(filtered);
  };

  const handleAddToFavorites = async (song: Song) => {
    const stored = await AsyncStorage.getItem('favorites');
    const parsed = stored ? JSON.parse(stored) : [];
    await AsyncStorage.setItem('favorites', JSON.stringify([...parsed, song]));
  };

  return (
    <View style={styles.container}>
      <View style={styles.navbar}>
        <TouchableOpacity onPress={() => {}}>
          <Text style={styles.icon}>👤</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {}}>
          <Text style={styles.icon}>⭐️</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {}}>
          <Text style={styles.icon}>⚙️</Text>
        </TouchableOpacity>
      </View>

      {/* 타이틀 */}
      <Text style={styles.title}>Sing Song</Text>

      {/* 검색 영역 */}
      <TextInput
        placeholder="제목 또는 가수를 입력하세요"
        value={keyword}
        onChangeText={setKeyword}
        style={styles.input}
      />
      <TouchableOpacity onPress={handleSearch} style={styles.searchButton}>
        <Text style={styles.searchText}>검색</Text>
      </TouchableOpacity>

      {/* 검색 결과 리스트 */}
      <FlatList
        data={results}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => handleAddToFavorites(item)}>
            <View style={styles.item}>
              <Text>{item.id} - {item.title} ({item.artist})</Text>
            </View>
          </TouchableOpacity>
        )}
        ListEmptyComponent={<Text>검색 결과가 없습니다.</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  navbar: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 16,
    marginBottom: 8,
  },
  icon: {
    fontSize: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  settings: {
    fontSize: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 8,
    marginBottom: 10,
  },
  searchButton: {
    backgroundColor: '#007AFF',
    padding: 10,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 16,
  },
  searchText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  item: {
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});