'use client'

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'

interface AlertsModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  symbol: string
}

export function AlertsModal({ open, onOpenChange, symbol }: AlertsModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Configure alerts for {symbol}</DialogTitle>
        </DialogHeader>

        <Tabs defaultValue="configure" className="w-full">
          <TabsList className="w-full grid grid-cols-2">
            <TabsTrigger value="add">Add alert</TabsTrigger>
            <TabsTrigger value="configure">Configure alerts</TabsTrigger>
          </TabsList>

          <TabsContent value="add" className="mt-4 space-y-4">
            <div className="space-y-4">
              <div className="space-y-2">
                <label className="text-sm font-medium text-foreground">Alert type</label>
                <select className="w-full border border-border bg-input text-foreground text-sm px-3 py-2">
                  <option value="">Select alert type...</option>
                  <option value="price-above">Price above</option>
                  <option value="price-below">Price below</option>
                  <option value="percent-change">Percent change</option>
                  <option value="volume">Volume spike</option>
                </select>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium text-foreground">Value</label>
                <input
                  type="number"
                  placeholder="Enter value..."
                  className="w-full border border-border bg-input text-foreground text-sm px-3 py-2"
                />
              </div>

              <button className="w-full bg-primary text-primary-foreground text-sm font-medium px-4 py-2 hover:bg-primary/90 transition-colors">
                Add Alert
              </button>
            </div>
          </TabsContent>

          <TabsContent value="configure" className="mt-4 space-y-4">
            <div className="text-sm text-muted-foreground text-center py-8">
              No alerts configured for {symbol}
            </div>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}