'use client'

import { useState } from 'react'
import { supabase } from '@/lib/supabase'

export default function RegistroPage() {
  const [monto, setMonto] = useState('')
  const [categoria, setCategoria] = useState('')
  const [tipo, setTipo] = useState<'gasto' | 'ingreso'>('gasto')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    // Validate inputs
    if (!monto || parseFloat(monto) <= 0) {
      throw new Error('El monto debe ser mayor a 0')
    }
    if (!categoria) {
      throw new Error('Debe seleccionar una categoría')
    }

    // Insert to database
    const { error } = await supabase
      .from('transacciones')
      .insert({
        tipo,
        monto: parseFloat(monto),
        categoria,
        fecha: new Date().toISOString(),
      })

    if (error) throw error

    // Success - reset form
    setMonto('')
    setCategoria('')
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  )
}

import { NextRequest } from 'next/server'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

export async function POST(request: NextRequest) {
  const encoder = new TextEncoder()
  const { message } = await request.json()

  const stream = new ReadableStream({
    async start(controller) {
      // Send "thinking" status
      controller.enqueue(
        encoder.encode(`data: ${JSON.stringify({ thinking: true })}\n\n`)
      )

      // Call OpenRouter with function calling
      const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          model: 'google/gemini-2.5-flash',
          messages: [
            {
              role: 'system',
              content: 'Eres un asistente financiero. Registras gastos e ingresos.'
            },
            { role: 'user', content: message }
          ],
          tools: [
            {
              type: 'function',
              function: {
                name: 'registrar_gasto',
                description: 'Registra un gasto',
                parameters: {
                  type: 'object',
                  properties: {
                    monto: { type: 'number' },
                    categoria: { 
                      type: 'string',
                      enum: ['Alimentación', 'Transporte', 'Vivienda', 'Salud', 'Entretenimiento', 'Educación', 'Otros Gastos']
                    },
                    metodo_pago: {
                      type: 'string',
                      enum: ['Efectivo', 'Tarjeta', 'Transferencia']
                    }
                  },
                  required: ['monto', 'categoria']
                }
              }
            }
          ],
          stream: true,
          thinking_config: {
            max_thinking_tokens: 500  // Enable Gemini's thinking mode
          }
        })
      })

      // Process stream
      const reader = response.body!.getReader()
      let toolCallData = null

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        // Parse SSE chunks and collect tool calls
        // ... streaming logic ...
      }

      // Execute tool call
      if (toolCallData) {
        const { error } = await supabase.from('transacciones').insert({
          tipo: 'gasto',
          monto: toolCallData.monto,
          categoria: toolCallData.categoria,
          fecha: new Date().toISOString()
        })

        // Send confirmation
        controller.enqueue(
          encoder.encode(`data: ${JSON.stringify({ 
            chunk: '✅ Gasto registrado exitosamente!' 
          })}\n\n`)
        )
      }

      controller.close()
    }
  })

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
    },
  })
}

'use client'

import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'
import { KPICard } from '@/components/KPICard'
import { TrendChart } from '@/components/TrendChart'

export default function HomePage() {
  const [kpis, setKpis] = useState({
    ingresos: 0,
    gastos: 0,
    balance: 0,
    transacciones: 0,
  })

  useEffect(() => {
    fetchKPIs()
  }, [])

  const fetchKPIs = async () => {
    // Calculate date range (last 30 days)
    const startDate = new Date()
    startDate.setDate(startDate.getDate() - 30)
    const endDate = new Date()

    // Fetch transactions
    const { data } = await supabase
      .from('transacciones')
      .select('*')
      .gte('fecha', startDate.toISOString())
      .lte('fecha', endDate.toISOString())

    if (data) {
      // Calculate totals
      let totalIngresos = 0
      let totalGastos = 0

      data.forEach(row => {
        const monto = parseFloat(row.monto || 0)
        if (row.tipo === 'ingreso') {
          totalIngresos += monto
        } else if (row.tipo === 'gasto') {
          totalGastos += monto
        }
      })

      setKpis({
        ingresos: totalIngresos,
        gastos: totalGastos,
        balance: totalIngresos - totalGastos,
        transacciones: data.length,
      })
    }
  }

  return (
    <main>
      <div className="grid grid-cols-4 gap-6">
        <KPICard title="Ingresos" value={kpis.ingresos} icon="income" color="green" />
        <KPICard title="Gastos" value={kpis.gastos} icon="expense" color="red" />
        <KPICard title="Balance" value={kpis.balance} icon="balance" color={kpis.balance > 0 ? 'green' : 'red'} />
        <KPICard title="Transacciones" value={kpis.transacciones} icon="transactions" color="blue" />
      </div>
      <TrendChart vista="mensual" />
    </main>
  )
}