import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { CorsList } from "@/features/cors/components/CorsList"

export default function CorsPage() {
    return (
        <div className="space-y-6">
            <div>
                <h2 className="text-3xl font-bold tracking-tight">CORS Yönetimi</h2>
                <p className="text-muted-foreground">
                    API erişim kurallarını (Whitelist/Blacklist) buradan yönetebilirsiniz.
                </p>
            </div>

            <Tabs defaultValue="whitelist" className="space-y-4">
                <TabsList>
                    <TabsTrigger value="whitelist">Whitelist (İzin Listesi)</TabsTrigger>
                    <TabsTrigger value="blacklist">Blacklist (Kara Liste)</TabsTrigger>
                </TabsList>

                <TabsContent value="whitelist" className="space-y-4">
                    <div className="rounded-lg border p-4 bg-green-50/50 dark:bg-green-950/10 border-green-200 dark:border-green-900">
                        <p className="text-sm text-green-800 dark:text-green-300">
                            <strong>Whitelist:</strong> Sadece bu listedeki origin'lerden gelen isteklere izin verilir. Eğer liste boşsa, varsayılan politika uygulanır.
                        </p>
                    </div>
                    <CorsList type="whitelist" />
                </TabsContent>

                <TabsContent value="blacklist" className="space-y-4">
                    <div className="rounded-lg border p-4 bg-red-50/50 dark:bg-red-950/10 border-red-200 dark:border-red-900">
                        <p className="text-sm text-red-800 dark:text-red-300">
                            <strong>Blacklist:</strong> Bu listedeki origin'lerden gelen istekler <u>doğrudan engellenir</u>. Whitelist'te olsa bile Blacklist önceliklidir.
                        </p>
                    </div>
                    <CorsList type="blacklist" />
                </TabsContent>
            </Tabs>
        </div>
    )
}
