'use client';

/**
 * Step 5: Agent Chat Placeholder
 *
 * Preview of the requirements discovery chat interface.
 * This will be fully implemented in Phase 4.
 */

import { Bot, User, MessageSquare, Sparkles } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';

interface MockMessage {
  id: number;
  role: 'agent' | 'user';
  name: string;
  message: string;
  timestamp: string;
}

const mockMessages: MockMessage[] = [
  {
    id: 1,
    role: 'agent',
    name: 'Product Owner Agent',
    message:
      "Hello! I'm your Product Owner agent. I'll help you define what we're building. Can you tell me more about your project goals?",
    timestamp: '10:00 AM',
  },
  {
    id: 2,
    role: 'user',
    name: 'You',
    message:
      'I want to build an e-commerce platform for selling handmade crafts. It should have user accounts, a product catalog, and checkout.',
    timestamp: '10:02 AM',
  },
  {
    id: 3,
    role: 'agent',
    name: 'Product Owner Agent',
    message:
      "Great! Let me break this down into user stories. For the MVP, I'd suggest focusing on: user registration/login, product browsing with categories, and a simple cart checkout. Should we also include seller accounts or just a single store?",
    timestamp: '10:03 AM',
  },
];

export function AgentChatStep() {
  return (
    <div className="space-y-6">
      <div>
        <div className="flex items-center gap-2">
          <h2 className="text-2xl font-bold">Requirements Discovery</h2>
          <Badge variant="secondary">Coming in Phase 4</Badge>
        </div>
        <p className="mt-1 text-muted-foreground">
          In the full version, you&apos;ll chat with our Product Owner agent here to define
          requirements.
        </p>
      </div>

      <Card>
        <CardHeader className="border-b pb-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
              <Bot className="h-5 w-5 text-primary" aria-hidden="true" />
            </div>
            <div>
              <CardTitle className="text-base">Product Owner Agent</CardTitle>
              <CardDescription>Requirements discovery and sprint planning</CardDescription>
            </div>
            <Badge variant="outline" className="ml-auto">
              Preview Only
            </Badge>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          {/* Chat Messages Area */}
          <div
            className="max-h-80 space-y-4 overflow-y-auto p-4"
            role="log"
            aria-label="Chat preview messages"
          >
            {mockMessages.map((msg) => (
              <div
                key={msg.id}
                className={cn('flex gap-3', msg.role === 'user' ? 'flex-row-reverse' : '')}
              >
                <div
                  className={cn(
                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
                    msg.role === 'agent' ? 'bg-primary/10' : 'bg-muted'
                  )}
                  aria-hidden="true"
                >
                  {msg.role === 'agent' ? (
                    <Bot className="h-4 w-4 text-primary" />
                  ) : (
                    <User className="h-4 w-4 text-muted-foreground" />
                  )}
                </div>
                <div
                  className={cn(
                    'max-w-[80%] rounded-lg px-4 py-2',
                    msg.role === 'agent' ? 'bg-muted' : 'bg-primary text-primary-foreground'
                  )}
                >
                  <p className="text-sm">{msg.message}</p>
                  <p
                    className={cn(
                      'mt-1 text-xs',
                      msg.role === 'agent' ? 'text-muted-foreground' : 'text-primary-foreground/70'
                    )}
                  >
                    {msg.timestamp}
                  </p>
                </div>
              </div>
            ))}
          </div>

          {/* Chat Input Area (disabled preview) */}
          <div className="border-t p-4">
            <div className="flex gap-2">
              <Input
                placeholder="Type your message... (disabled in preview)"
                disabled
                className="flex-1"
                aria-label="Chat input (disabled in preview)"
              />
              <Button disabled aria-label="Send message (disabled in preview)">
                <MessageSquare className="h-4 w-4" aria-hidden="true" />
              </Button>
            </div>
            <p className="mt-2 text-center text-xs text-muted-foreground">
              This chat interface is a preview. Full agent interaction will be available in Phase 4.
            </p>
          </div>
        </CardContent>
      </Card>

      <Card className="border-dashed bg-muted/30">
        <CardContent className="flex items-center gap-4 p-6">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
            <Sparkles className="h-6 w-6 text-primary" aria-hidden="true" />
          </div>
          <div>
            <h4 className="font-medium">What to Expect in the Full Version</h4>
            <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
              <li>- Interactive requirements gathering with AI Product Owner</li>
              <li>- Architecture spike with BA and Architect agents</li>
              <li>- Collaborative backlog creation and prioritization</li>
              <li>- Real-time refinement of user stories</li>
            </ul>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}