Supabase Storage & Realtime — File Storage và WebSocket

// Tạo bucket mới
const { data, error } = await supabase.storage.createBucket('avatars', {
  public: true,          // bucket public
  fileSizeLimit: 5242880 // giới hạn 5MB
})

// Liệt kê tất cả buckets
const { data: buckets, error } = await supabase.storage.listBuckets()

// Lấy thông tin bucket
const { data, error } = await supabase.storage.getBucket('avatars')

// Cập nhật bucket (ví dụ: đổi giới hạn file size)
const { data, error } = await supabase.storage.updateBucket('avatars', {
  fileSizeLimit: 10485760 // tăng lên 10MB
})

// Xóa bucket (phải empty trước)
const { data, error } = await supabase.storage.deleteBucket('avatars')

// Xóa toàn bộ file trong bucket (empty)
const { data, error } = await supabase.storage.emptyBucket('avatars')

// Upload file với upsert
const avatarFile = event.target.files[0]
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/profile.png`, avatarFile, {
    cacheControl: '3600',   // cache 1 giờ trên CDN
    upsert: true,            // ghi đè nếu file đã tồn tại
    contentType: 'image/png' // set content type rõ ràng
  })

// Upload với progress tracking
const { data, error } = await supabase.storage
  .from('videos')
  .upload('tutorial.mp4', file, {
    onProgress: (progress) => {
      console.log(`Uploaded: ${progress.percent}%`)
    }
  })

// Download file
const { data, error } = await supabase.storage
  .from('avatars')
  .download(`${userId}/profile.png`)

// Get public URL (không hết hạn)
const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/profile.png`)
// data.publicUrl -> https://[project].supabase.co/storage/v1/object/public/avatars/...

// List files trong thư mục
const { data, error } = await supabase.storage
  .from('avatars')
  .list(userId, {
    limit: 100,
    offset: 0,
    sortBy: { column: 'created_at', order: 'desc' }
  })

// Di chuyển / đổi tên file
const { data, error } = await supabase.storage
  .from('avatars')
  .move(`${userId}/old.png`, `${userId}/new.png`)

// Copy file
const { data, error } = await supabase.storage
  .from('avatars')
  .copy(`${userId}/profile.png`, `backup/${userId}/profile.png`)

// Xóa file
const { data, error } = await supabase.storage
  .from('avatars')
  .remove([`${userId}/profile.png`, `${userId}/banner.png`])

# Dùng AWS CLI với Supabase làm S3 endpoint
aws s3 ls s3://avatars/ --endpoint-url https://[PROJECT_REF].supabase.co/storage/v1/s3

# Dùng MinIO client
mc alias set supabase https://[PROJECT_REF].supabase.co/storage/v1/s3 \
  [ACCESS_KEY] [SECRET_KEY]
mc ls supabase/avatars/

# URL format đầy đủ cho image transformation

# Base URL pattern:
https://<project>.supabase.co/storage/v1/render/image/public/bucket/avatar.png

# Resize theo width (giữ aspect ratio)
?width=500

# Resize theo height (giữ aspect ratio)
?height=300

# Resize khớp khung với các chế độ
?width=500&height=500&resize=cover       # Cắt để lấp đầy khung (có thể mất phần rìa)
?width=500&height=500&resize=contain     # Giữ trọn ảnh trong khung (có thể có khoảng trống)
?width=500&height=500&resize=fill        # Bóp méo để lấp đầy khung (không giữ aspect ratio)

# Thay đổi chất lượng ảnh (0-100, mặc định 80)
?width=500&quality=85

# Chuyển đổi định dạng ảnh
?width=500&format=webp                   # WebP — nhẹ hơn JPEG ~30%, trình duyệt hiện đại đều hỗ trợ
?width=500&format=avif                   # AVIF — nhẹ hơn WebP ~20%, hỗ trợ HDR
?width=500&format=png                    # PNG — lossless, dùng cho ảnh có transparency
?width=500&format=jpg                    # JPEG — tương thích rộng nhất

# Kết hợp nhiều tham số — ví dụ thực tế:
/storage/v1/render/image/public/bucket/photo.jpg
  ?width=400
  &height=400
  &resize=cover
  &quality=80
  &format=webp

# Kết quả: Ảnh 400x400px, crop center, chất lượng 80%, định dạng WebP
# File size giảm từ ~2MB (ảnh gốc) xuống còn ~15KB

// Tạo signed URL (hết hạn sau 60 giây)
const { data, error } = await supabase.storage
  .from('private-docs')
  .createSignedUrl('contract-2024.pdf', 60)
// data.signedUrl -> URL có ?token=xxx, hết hạn sau 60s

// Tạo signed URL cho upload (cho phép upload mà không cần auth)
const { data, error } = await supabase.storage
  .from('submissions')
  .createSignedUploadUrl(`${taskId}/submission.pdf`)

// Signed URL cho nhiều file cùng lúc
const { data, error } = await supabase.storage
  .from('exports')
  .createSignedUrls(['report-q1.pdf', 'report-q2.pdf'], 300)

-- Pattern 1: User chỉ truy cập được file trong thư mục của mình
-- File được tổ chức theo cấu trúc: {userId}/filename.png
-- (storage.foldername(name))[1] trả về phần đầu tiên của path = userId

CREATE POLICY "Users can view own avatars"
ON storage.objects FOR SELECT
USING (
  bucket_id = 'avatars'
  AND auth.uid()::text = (storage.foldername(name))[1]
);

CREATE POLICY "Users can upload own avatars"
ON storage.objects FOR INSERT
WITH CHECK (
  bucket_id = 'avatars'
  AND auth.uid()::text = (storage.foldername(name))[1]
);

CREATE POLICY "Users can update own avatars"
ON storage.objects FOR UPDATE
USING (
  bucket_id = 'avatars'
  AND auth.uid()::text = (storage.foldername(name))[1]
);

CREATE POLICY "Users can delete own avatars"
ON storage.objects FOR DELETE
USING (
  bucket_id = 'avatars'
  AND auth.uid()::text = (storage.foldername(name))[1]
);

-- Pattern 2: Public read + authenticated write
CREATE POLICY "Public read access"
ON storage.objects FOR SELECT
USING (bucket_id = 'public-assets');

CREATE POLICY "Authenticated users can upload"
ON storage.objects FOR INSERT
WITH CHECK (
  bucket_id = 'public-assets'
  AND auth.role() = 'authenticated'
);

-- Pattern 3: Admin-only access (dùng service role)
CREATE POLICY "Admin full access"
ON storage.objects FOR ALL
USING (
  bucket_id = 'admin-files'
  AND auth.jwt()->>'role' = 'admin'  -- Custom claim từ JWT
);

// Dùng Uppy với TUS
import Uppy from '@uppy/core'
import Tus from '@uppy/tus'

const uppy = new Uppy()
  .use(Tus, {
    endpoint: `https://[PROJECT_REF].supabase.co/storage/v1/upload/resumable`,
    headers: {
      authorization: `Bearer ${supabaseKey}`,
      'x-upsert': 'true'
    },
    chunkSize: 6 * 1024 * 1024, // 6MB chunks
    retryDelays: [0, 1000, 3000, 5000] // retry delays
  })

// Pattern 1: Phân tách theo thư mục (đơn giản nhất)
const path = `${tenantId}/${userId}/${fileName}`

// Pattern 2: Mỗi tenant một bucket riêng
const bucketName = `tenant-${tenantId}`
await supabase.storage.createBucket(bucketName, { public: false })

// Pattern 3: Bucket dùng chung + RLS policy cho tenant
// Policy trong SQL:
// CREATE POLICY "Tenant isolation"
// ON storage.objects FOR SELECT
// USING (
//   bucket_id = 'documents'
//   AND (storage.foldername(name))[1] = (
//     SELECT tenant_id::text FROM profiles WHERE id = auth.uid()
//   )
// );

subscribe() gọi
     |
     v
  [JOINING] --> Gửi Join request đến Realtime server
     |
     v
  [JOINED]  --> Channel được tạo, sẵn sàng nhận events
     |         (Lúc này mới có thể subscribe Postgres Changes, Broadcast, Presence)
     |
     v
  [SUBSCRIBED] --> Client đã subscribe và đang nhận events
     |             (Presence.track() chỉ hoạt động ở trạng thái này)
     |
     v
  [CLOSED]  --> Channel bị đóng do:
     |         - unsubscribe() được gọi -> chuyển về [CLOSED] sạch
     |         - Lỗi mạng, timeout -> tự động reconnect -> [JOINING]
     |         - Server đóng channel -> tự động reconnect -> [JOINING]
     |
     v
  [CLOSED] cuối cùng -> cleanup resources

// Theo dõi trạng thái channel
const channel = supabase.channel('room-1')

channel.subscribe((status) => {
  switch (status) {
    case 'SUBSCRIBED':
      console.log('Channel ready, có thể track presence và gửi broadcast')
      channel.track({ user: 'Alice', online_at: new Date().toISOString() })
      break
    case 'CHANNEL_ERROR':
      console.error('Channel error, sẽ tự động retry...')
      break
    case 'TIMED_OUT':
      console.warn('Channel timeout, đang reconnect...')
      break
    case 'CLOSED':
      console.log('Channel đóng hoàn toàn')
      break
  }
})

// Tạo channel và subscribe lắng nghe INSERT
const channel = supabase.channel('db-changes')

channel.on('postgres_changes',
  { event: 'INSERT', schema: 'public', table: 'messages' },
  (payload) => {
    console.log('New record:', payload.new)
    console.log('Event type:', payload.eventType)
    // payload.new chứa toàn bộ row mới
  }
).subscribe()

// Lắng nghe UPDATE với filter server-side
channel.on('postgres_changes',
  {
    event: 'UPDATE',
    schema: 'public',
    table: 'messages',
    filter: 'room_id=eq.123' // filter ngay trên server
  },
  (payload) => {
    console.log('Old data:', payload.old)  // dữ liệu cũ
    console.log('New data:', payload.new)  // dữ liệu mới
  }
)

// Lắng nghe DELETE
channel.on('postgres_changes',
  {
    event: 'DELETE',
    schema: 'public',
    table: 'messages',
    filter: 'room_id=eq.123'
  },
  (payload) => {
    console.log('Deleted record id:', payload.old.id)
  }
)

// Lắng nghe tất cả events: dùng '*'
channel.on('postgres_changes',
  { event: '*', schema: 'public', table: 'messages' },
  (payload) => {
    // payload.eventType -> 'INSERT' | 'UPDATE' | 'DELETE'
  }
)

// Filter đơn
filter: 'room_id=eq.123'

// Filter kết hợp
filter: 'room_id=eq.123 AND user_id=eq.456'

// Filter với nhiều điều kiện
filter: 'status=in.(active,pending)'

// Filter IS NULL
filter: 'deleted_at=is.null'

-- Enable cho một bảng cụ thể
ALTER PUBLICATION supabase_realtime ADD TABLE messages;

-- Enable cho nhiều bảng cùng lúc
ALTER PUBLICATION supabase_realtime ADD TABLE messages, notifications;

-- Enable cho toàn bộ schema (ít dùng vì gây nhiễu)
ALTER PUBLICATION supabase_realtime ADD TABLE public.*;

-- Kiểm tra bảng nào đã được enable
SELECT * FROM pg_publication_tables
WHERE pubname = 'supabase_realtime';

-- Kiểm tra trạng thái publication
SELECT * FROM pg_publication
WHERE pubname = 'supabase_realtime';

-- Xóa bảng khỏi publication (disable realtime)
ALTER PUBLICATION supabase_realtime DROP TABLE old_table;

const channel = supabase.channel('room-1', {
  config: {
    broadcast: { self: false } // không nhận lại message của chính mình
  }
})

// Gửi message
channel.send({
  type: 'broadcast',
  event: 'cursor-move',
  payload: { x: 100, y: 200, userId: 'user-123' }
})

// Gửi typing indicator
channel.send({
  type: 'broadcast',
  event: 'typing',
  payload: { userId: 'user-123', isTyping: true }
})

// Nhận message
channel.on('broadcast', { event: 'cursor-move' }, (payload) => {
  console.log('Cursor moved:', payload)
})

channel.on('broadcast', { event: 'typing' }, (payload) => {
  showTypingIndicator(payload.userId, payload.isTyping)
})

channel.subscribe()

const channel = supabase.channel('room-1')

// Lắng nghe thay đổi presence
channel.on('presence', { event: 'sync' }, () => {
  const state = channel.presenceState()
  console.log('Online users:', Object.keys(state).length)
  // state có dạng:
  // {
  //   'user-123': [{ online_at: '2024-01-01T00:00:00Z', name: 'Vinh' }],
  //   'user-456': [{ online_at: '2024-01-01T00:00:01Z', name: 'Alice' }]
  // }
})

channel.on('presence', { event: 'join' }, ({ key, newPresences }) => {
  console.log('User joined:', key, newPresences)
  // key: 'user-123'
  // newPresences: [{ online_at: '...', name: 'Vinh' }]
})

channel.on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
  console.log('User left:', key)
  // key: 'user-123'
  // leftPresences: [{ online_at: '...', name: 'Vinh' }]
})

// Subscribe và track presence
channel.subscribe(async (status) => {
  if (status === 'SUBSCRIBED') {
    // Bắt đầu track — server sẽ sync state cho tất cả clients khác
    await channel.track({
      user_id: 'user-123',
      name: 'Vinh',
      online_at: new Date().toISOString(),
      cursor: { x: 0, y: 0 }
    })
  }
})

// Cập nhật presence state (ví dụ: khi di chuyển cursor)
document.addEventListener('mousemove', (e) => {
  channel.track({
    user_id: 'user-123',
    name: 'Vinh',
    online_at: new Date().toISOString(),
    cursor: { x: e.clientX, y: e.clientY }
  })
})

-- Nếu bảng có RLS policy:
CREATE POLICY "Users can only see own messages"
ON messages FOR SELECT
USING (auth.uid() = user_id);

-- Khi subscribe Postgres Changes, user chỉ nhận events
-- từ messages của chính họ (tự động lọc bởi RLS)

<script setup>
const supabase = useSupabaseClient()
const user = useSupabaseUser()

const file = ref(null)
const previewUrl = ref(null)
const progress = ref(0)
const uploadedUrl = ref(null)

function onFileChange(event) {
  file.value = event.target.files[0]
  previewUrl.value = URL.createObjectURL(file.value)
}

async function uploadAvatar() {
  if (!file.value) return

  const { data, error } = await supabase.storage
    .from('avatars')
    .upload(`${user.value.id}/avatar.png`, file.value, {
      upsert: true,
      contentType: file.value.type
    })

  if (error) throw error

  // URL ảnh đã resize qua CDN
  uploadedUrl.value = supabase.storage
    .from('avatars')
    .getPublicUrl(`${user.value.id}/avatar.png`).data.publicUrl
    + '?width=200&height=200&resize=cover'
}
</script>

// Subscribe messages real-time
const channel = supabase.channel('chat-room')

channel.on('postgres_changes', {
  event: 'INSERT',
  schema: 'public',
  table: 'messages',
  filter: `room_id=eq.${roomId}`
}, (payload) => {
  messages.value.push(payload.new)
  nextTick(() => scrollToBottom())
}).subscribe()

// Gửi message mới
async function sendMessage(content) {
  const { data, error } = await supabase
    .from('messages')
    .insert({
      room_id: roomId,
      user_id: user.value.id,
      content: content
    })
    .select()
    .single()
}