"use client";

import { useState } from 'react';
import { ApiKeyForm } from './api-key-form';
import { DomainsList } from './domains-list';
import { RecordsList } from './records-list';
import { ApiLogs } from './api-logs';
import { ThemeToggle } from './theme-toggle';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';

export function DNSManager() {
  const [apiKey, setApiKey] = useState<string | null>(null);
  const [selectedDomain, setSelectedDomain] = useState<string | null>(null);

  return (
    <div className="container mx-auto p-4 min-h-screen flex flex-col">
      <header className="py-6 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Vultr DNS Manager</h1>
          <p className="text-muted-foreground mt-1">Manage your DNS records with ease</p>
        </div>
        <ThemeToggle />
      </header>
      
      <Separator className="my-4" />
      
      <div className="flex-1 flex flex-col gap-6">
        {!apiKey ? (
          <Card>
            <CardHeader>
              <CardTitle>Welcome to Vultr DNS Manager</CardTitle>
              <CardDescription>
                Enter your Vultr API key to get started
              </CardDescription>
            </CardHeader>
            <CardContent>
              <ApiKeyForm onApiKeySubmit={setApiKey} />
            </CardContent>
          </Card>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 flex-1">
            <div className="md:col-span-3 flex flex-col">
              <Card className="flex-1">
                <CardHeader>
                  <CardTitle>Domains</CardTitle>
                  <CardDescription>Select a domain to manage</CardDescription>
                </CardHeader>
                <CardContent>
                  <DomainsList 
                    apiKey={apiKey} 
                    onSelectDomain={setSelectedDomain}
                    selectedDomain={selectedDomain}
                  />
                </CardContent>
              </Card>
            </div>
            
            <div className="md:col-span-9 flex flex-col">
              <Card className="flex-1">
                {selectedDomain ? (
                  <Tabs defaultValue="records" className="w-full h-full flex flex-col">
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <CardTitle>{selectedDomain}</CardTitle>
                        <TabsList>
                          <TabsTrigger value="records">Records</TabsTrigger>
                          <TabsTrigger value="logs">API Logs</TabsTrigger>
                        </TabsList>
                      </div>
                      <CardDescription>
                        Manage DNS records for this domain
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="flex-1">
                      <TabsContent value="records" className="mt-0 h-full">
                        <RecordsList apiKey={apiKey} domain={selectedDomain} />
                      </TabsContent>
                      <TabsContent value="logs" className="mt-0 h-full">
                        <ApiLogs />
                      </TabsContent>
                    </CardContent>
                  </Tabs>
                ) : (
                  <CardHeader>
                    <CardTitle>No Domain Selected</CardTitle>
                    <CardDescription>
                      Please select a domain from the list to manage its DNS records
                    </CardDescription>
                  </CardHeader>
                )}
              </Card>
            </div>
          </div>
        )}
      </div>
      
      <footer className="mt-8 py-4 text-center text-sm text-muted-foreground">
        <p>© {new Date().getFullYear()} Vultr DNS Manager</p>
      </footer>
    </div>
  );
}