import React, { useEffect, useState } from "react";
import { View, Text, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";
import { useRouter } from "expo-router";
import api from "../src/services/api";
import type { Document } from "@cloud-reader/shared";

export default function LibraryScreen(): React.ReactElement {
  const router = useRouter();
  const [documents, setDocuments] = useState<Document[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetch = async (): Promise<void> => {
      try {
        const { data } = await api.get("/documents/");
        setDocuments(data.results || []);
      } catch {
        // Not authenticated
      } finally {
        setLoading(false);
      }
    };
    fetch();
  }, []);

  const renderDoc = ({ item }: { item: Document }): React.ReactElement => (
    <TouchableOpacity style={styles.card} onPress={() => router.push(`/documents/${item.id}`)}>
      <View style={styles.cardContent}>
        <Text style={styles.cardTitle}>{item.title}</Text>
        {item.author && <Text style={styles.cardAuthor}>{item.author}</Text>}
        <View style={styles.cardMeta}>
          <Text style={styles.badge}>{item.file_type.toUpperCase()}</Text>
          <Text style={styles.metaText}>{(item.file_size / (1024 * 1024)).toFixed(1)} MB</Text>
        </View>
      </View>
    </TouchableOpacity>
  );

  if (loading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" color="#4f8cff" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>My Library ({documents.length})</Text>
      </View>
      {documents.length === 0 ? (
        <View style={styles.center}>
          <Text style={styles.emptyText}>No documents yet.</Text>
        </View>
      ) : (
        <FlatList
          data={documents}
          keyExtractor={(item) => String(item.id)}
          renderItem={renderDoc}
          contentContainerStyle={styles.list}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#0f1419" },
  center: { flex: 1, justifyContent: "center", alignItems: "center" },
  header: { padding: 16, backgroundColor: "#1a1f2e", borderBottomWidth: 1, borderBottomColor: "#2a3042" },
  headerTitle: { fontSize: 20, fontWeight: "700", color: "#e1e4ed" },
  list: { padding: 16 },
  card: { backgroundColor: "#1a1f2e", borderRadius: 12, padding: 16, marginBottom: 12, borderWidth: 1, borderColor: "#2a3042" },
  cardContent: {},
  cardTitle: { fontSize: 16, fontWeight: "600", color: "#e1e4ed", marginBottom: 4 },
  cardAuthor: { fontSize: 14, color: "#8892a4", marginBottom: 8 },
  cardMeta: { flexDirection: "row", gap: 10 },
  badge: { fontSize: 12, fontWeight: "600", color: "#4f8cff" },
  metaText: { fontSize: 12, color: "#8892a4" },
  emptyText: { color: "#8892a4", fontSize: 16 },
});