frontend/src/components/playground/SystemInstructionsTab.tsx

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { 
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Brain, MessageSquare } from 'lucide-react'

interface SystemInstructionsTabProps {
  systemPrompt: string
  setSystemPrompt: (prompt: string) => void
  isLoading: boolean
}

export function SystemInstructionsTab({
  systemPrompt,
  setSystemPrompt,
  isLoading
}: SystemInstructionsTabProps) {
  const promptExamples = [
    {
      title: "Helpful Assistant",
      prompt: "You are a helpful, harmless, and honest AI assistant. Provide clear, accurate, and well-structured responses. If you're unsure about something, say so."
    },
    {
      title: "Code Expert", 
      prompt: "You are an expert software developer. Provide clean, efficient code with clear explanations. Always follow best practices and include helpful comments."
    },
    {
      title: "Creative Writer",
      prompt: "You are a creative writer. Use vivid language, engaging storytelling, and imaginative descriptions. Be expressive and artistic in your responses."
    },
    {
      title: "Teacher/Tutor",
      prompt: "You are a patient and knowledgeable teacher. Break down complex concepts into simple, understandable parts. Use examples and analogies to help explain ideas."
    }
  ]

  const bestPractices = [
    "Be specific about the assistant's role and expertise",
    "Include desired communication style and tone", 
    "Specify output format if needed (lists, paragraphs, etc.)",
    "Add ethical guidelines and behavior expectations"
  ]

  return (
    <div className="space-y-4 pb-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">System Instructions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Label className="text-base font-medium text-blue-700">
              System Prompt
            </Label>
            <textarea
              value={systemPrompt}
              onChange={(e) => setSystemPrompt(e.target.value)}
              placeholder="Define your AI assistant's role, personality, and behavior..."
              className="w-full h-[250px] text-base p-4 border-2 border-blue-200 rounded-lg bg-white focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none overflow-y-auto"
              disabled={isLoading}
            />
            
            {/* Character count */}
            <div className="text-xs text-muted-foreground text-right">
              {systemPrompt.length} characters
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Quick Examples */}
      <Card>
        <CardHeader>
          <CardTitle className="text-sm flex items-center">
            <Brain className="h-4 w-4 mr-2" />
            Quick Examples
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <Label className="text-xs font-medium text-muted-foreground">
              Choose a template to get started:
            </Label>
            <Select
              value=""
              onValueChange={(value) => {
                const example = promptExamples[parseInt(value)]
                if (example) {
                  setSystemPrompt(example.prompt)
                }
              }}
              disabled={isLoading}
            >
              <SelectTrigger className="w-full h-10">
                <SelectValue placeholder="Select example prompt..." />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Example Prompts</SelectLabel>
                  {promptExamples.map((example, index) => (
                    <SelectItem key={index} value={index.toString()}>
                      <div className="flex flex-col items-start">
                        <span className="font-medium text-sm">{example.title}</span>
                        <span className="text-xs text-muted-foreground line-clamp-1 mt-1">
                          {example.prompt.substring(0, 60)}...
                        </span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Best Practices */}
      <Card>
        <CardHeader>
          <CardTitle className="text-sm flex items-center">
            <MessageSquare className="h-4 w-4 mr-2" />
            Best Practices
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ul className="text-xs space-y-2 text-muted-foreground">
            {bestPractices.map((practice, index) => (
              <li key={index} className="flex items-start">
                <span className="inline-block w-1.5 h-1.5 bg-blue-400 rounded-full mt-1.5 mr-2 flex-shrink-0" />
                {practice}
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>
    </div>
  )
}