"use client";

import { motion } from 'framer-motion';
import { TerminalSquare, Filter, RefreshCw } from 'lucide-react';

const mockLogs = [
  { id: 1, time: '10:41:30', agent: 'Analyst', type: 'REJECT', cost: '$0.0012', prompt: 'Evaluate lot: "RTX 4090 Box Only" against criteria...', response: '{"verdict": "REJECT", "reason": "Listing explicitly states \'Box Only\', violating target criteria."}' },
  { id: 2, time: '10:40:12', agent: 'Analyst', type: 'APPROVE', cost: '$0.0025', prompt: 'Evaluate lot: "ThinkPad T14 Gen 3" against criteria...', response: '{"verdict": "APPROVE", "reason": "Matches specs, good condition, price $450 is significantly below $800 avg."}' },
  { id: 3, time: '10:39:45', agent: 'Strategist', type: 'OPTIMIZE', cost: '$0.0050', prompt: 'Analyze last 24h win rates on ShopGoodwill...', response: '{"action": "UPDATE_SCHEDULE", "target": "ShopGoodwill", "new_cron": "0 * * * *"}' },
];

export default function AILogPage() {
  return (
    <div className="container mx-auto px-4 py-8 h-[calc(100vh-64px)] flex flex-col">
      <div className="flex justify-between items-end mb-6 shrink-0">
        <div>
          <h1 className="text-3xl font-bold font-mono tracking-tight mb-2">NEURAL_<span className="text-primary">TELEMETRY</span></h1>
          <p className="text-muted-foreground">Raw input/output logs from all connected LLMs.</p>
        </div>
        <div className="flex gap-2">
          <button className="flex items-center gap-2 px-3 py-1.5 bg-card border border-border rounded font-mono text-xs hover:border-primary transition-colors">
            <Filter className="w-3 h-3" /> FILTER
          </button>
          <button className="flex items-center gap-2 px-3 py-1.5 bg-card border border-border rounded font-mono text-xs hover:text-primary transition-colors">
            <RefreshCw className="w-3 h-3" /> REFRESH
          </button>
        </div>
      </div>

      <div className="flex-1 bg-card border border-border rounded-lg overflow-hidden flex flex-col">
        <div className="grid grid-cols-12 gap-4 p-3 border-b border-border bg-background/50 font-mono text-xs text-muted-foreground shrink-0">
          <div className="col-span-2">TIMESTAMP / AGENT</div>
          <div className="col-span-1">TYPE</div>
          <div className="col-span-4">PROMPT_PREVIEW</div>
          <div className="col-span-4">RESPONSE_PREVIEW</div>
          <div className="col-span-1 text-right">COST</div>
        </div>

        <div className="flex-1 overflow-auto p-2 space-y-2">
          {mockLogs.map((log, i) => (
            <motion.div 
              key={log.id}
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.1 }}
              className="grid grid-cols-12 gap-4 p-3 bg-background border border-border/50 rounded font-mono text-sm hover:border-primary/50 transition-colors cursor-pointer"
            >
              <div className="col-span-2 flex flex-col justify-center">
                <span className="text-primary">{log.time}</span>
                <span className="text-xs text-muted-foreground">{log.agent}</span>
              </div>
              <div className="col-span-1 flex items-center">
                <span className={`px-2 py-0.5 rounded text-xs ${log.type === 'APPROVE' ? 'bg-primary/20 text-primary' : log.type === 'REJECT' ? 'bg-destructive/20 text-destructive' : 'bg-accent/20 text-accent'}`}>
                  {log.type}
                </span>
              </div>
              <div className="col-span-4 text-muted-foreground truncate flex items-center">
                {log.prompt}
              </div>
              <div className="col-span-4 truncate flex items-center">
                {log.response}
              </div>
              <div className="col-span-1 text-right flex items-center justify-end text-xs text-muted-foreground">
                {log.cost}
              </div>
            </motion.div>
          ))}
          
          <div className="text-center p-8 text-muted-foreground font-mono text-sm">
            <TerminalSquare className="w-8 h-8 mx-auto mb-2 opacity-50" />
            End of stream. Waiting for new inferences...
          </div>
        </div>
      </div>
    </div>
  );
}