'use client' import { useState } from 'react' import { PlusCircle, Trash2, Edit2, Save, Mail, Check, Loader2, Cloud } from 'lucide-react' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" type RouteType = 'proxy' | 'redirect' | 'lambda' type LambdaLanguage = 'go' | 'python' | 'php' type SourceType = 'github' | 'gitlab' | 'bitbucket' | 'custom' interface Route { id: string type: RouteType source: string destination: string lambdaId?: string } interface Lambda { id: string name: string language: LambdaLanguage code: string } interface Email { id: string address: string messages: EmailMessage[] } interface EmailMessage { id: string subject: string from: string date: string content: string } interface Source { id: string type: SourceType url: string branch: string } interface Domain { id: string name: string routes: Route[] lambdas: Lambda[] emails: Email[] isValidated: boolean source: Source | null } export default function Component() { const [domains, setDomains] = useState([]) const [newDomain, setNewDomain] = useState('') const [newRoute, setNewRoute] = useState<{ [key: string]: { type: RouteType; source: string; destination: string; lambdaId?: string } }>({}) const [newLambda, setNewLambda] = useState<{ [key: string]: { name: string; language: LambdaLanguage; code: string } }>({}) const [newEmail, setNewEmail] = useState<{ [key: string]: string }>({}) const [newSource, setNewSource] = useState<{ type: SourceType; url: string; branch: string }>({ type: 'github', url: '', branch: 'main' }) const [editingLambda, setEditingLambda] = useState(null) const [activeTab, setActiveTab] = useState<'domains' | 'lambdas' | 'email' | 'sources'>('domains') const [activeDomain, setActiveDomain] = useState(null) const [activeEmail, setActiveEmail] = useState(null) const [isValidating, setIsValidating] = useState<{ [key: string]: boolean }>({}) const addDomain = () => { if (newDomain && !domains.some(domain => domain.name === newDomain)) { setDomains([...domains, { id: Date.now().toString(), name: newDomain, routes: [], lambdas: [], emails: [], isValidated: false, source: null }]) setNewDomain('') } } const validateDomain = (domainId: string) => { setIsValidating({ ...isValidating, [domainId]: true }) // Simulate an API call setTimeout(() => { setDomains(domains.map(domain => domain.id === domainId ? { ...domain, isValidated: true } : domain )) setIsValidating({ ...isValidating, [domainId]: false }) }, 2000) } const addRoute = (domainId: string) => { const route = newRoute[domainId] if (route && route.source && (route.type !== 'lambda' || route.lambdaId)) { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, routes: [...domain.routes, { id: Date.now().toString(), ...route }] } } return domain })) setNewRoute({ ...newRoute, [domainId]: { type: 'proxy', source: '', destination: '', lambdaId: undefined } }) } } const removeRoute = (domainId: string, routeId: string) => { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, routes: domain.routes.filter(route => route.id !== routeId) } } return domain })) } const addLambda = (domainId: string) => { const lambda = newLambda[domainId] if (lambda && lambda.name) { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, lambdas: [...domain.lambdas, { id: Date.now().toString(), ...lambda, code: lambda.code || '' }] } } return domain })) setNewLambda({ ...newLambda, [domainId]: { name: '', language: 'python', code: '' } }) } } const updateLambda = (domainId: string, lambdaId: string, updates: Partial) => { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, lambdas: domain.lambdas.map(lambda => lambda.id === lambdaId ? { ...lambda, ...updates } : lambda ) } } return domain })) } const removeLambda = (domainId: string, lambdaId: string) => { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, lambdas: domain.lambdas.filter(lambda => lambda.id !== lambdaId), routes: domain.routes.filter(route => route.lambdaId !== lambdaId) } } return domain })) } const addEmail = (domainId: string) => { const emailAddress = newEmail[domainId] if (emailAddress && !domains.find(d => d.id === domainId)?.emails.some(e => e.address === emailAddress)) { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, emails: [...domain.emails, { id: Date.now().toString(), address: emailAddress, messages: [] }] } } return domain })) setNewEmail({ ...newEmail, [domainId]: '' }) } } const removeEmail = (domainId: string, emailId: string) => { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, emails: domain.emails.filter(email => email.id !== emailId) } } return domain })) } const removeEmailMessage = (domainId: string, emailId: string, messageId: string) => { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, emails: domain.emails.map(email => { if (email.id === emailId) { return { ...email, messages: email.messages.filter(message => message.id !== messageId) } } return email }) } } return domain })) } const addSource = (domainId: string) => { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, source: { id: Date.now().toString(), ...newSource } } } return domain })) setNewSource({ type: 'github', url: '', branch: 'main' }) } const removeSource = (domainId: string) => { setDomains(domains.map(domain => { if (domain.id === domainId) { return { ...domain, source: null } } return domain })) } return (

{activeTab === 'domains' && ( <> Add New Domain

setNewDomain(e.target.value)} />

{domains.map(domain => ( {domain.name} {!domain.isValidated ? ( Domain Not Validated Please point your domain or nameserver to our records:

dns1.fastfwd.cloud
dns2.fastfwd.cloud

) : ( Domain Validated Your domain has been successfully validated and is ready to use. )} Routes Lambdas Source

Type

Source setNewRoute({ ...newRoute, [domain.id]: { ...newRoute[domain.id], source: e.target.value } })} />

{newRoute[domain.id]?.type === 'lambda' ? (

Lambda

) : (

Destination setNewRoute({ ...newRoute, [domain.id]: { ...newRoute[domain.id], destination: e.target.value } })} />

)}

{domain.routes.length > 0 && (

Routes

{domain.routes.map(route => (

{route.type}: {route.source} → {route.type === 'lambda' ? domain.lambdas.find(l => l.id === route.lambdaId)?.name || 'Unknown Lambda' : route.destination }

))}

)}

Name setNewLambda({ ...newLambda, [domain.id]: { ...newLambda[domain.id], name: e.target.value } })} />

Language

{domain.lambdas.length > 0 && (

Lambdas

{domain.lambdas.map(lambda => (

{lambda.name} ({lambda.language})

{editingLambda === lambda.id ? (

updateLambda(domain.id, lambda.id, { code: e.target.value })}
                                        rows={10}
                                        className="font-mono text-sm"
                                      />
                                      <Button onClick={() => setEditingLambda(null)}>
                                        <Save className="mr-2 h-4 w-4" /> Save
                                      </Button>
                                    </div>
                                  ) : (
                                    <pre className="bg-muted-foreground/10 p-2 rounded text-sm overflow-x-auto">
                                      {lambda.code || 'No code yet. Click edit to add code.'}
                                    </pre>
                                  )}
                                </div>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    </TabsContent>
                    <TabsContent value="source">
                      <div className="space-y-4">
                        {domain.source ? (
                          <div className="p-4 bg-muted rounded-md">
                            <div className="flex justify-between items-center mb-2">
                              <span className="font-semibold">Current Source: {domain.source.type}</span>
                              <Button variant="ghost" size="icon" onClick={() => removeSource(domain.id)}>
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                            <p>URL: {domain.source.url}</p>
                            <p>Branch: {domain.source.branch}</p>
                          </div>
                        ) : (
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <Label htmlFor={`source-type-${domain.id}`}>Source Type</Label>
                              <Select
                                value={newSource.type}
                                onValueChange={(value: SourceType) => setNewSource({ ...newSource, type: value })}
                              >
                                <SelectTrigger id={`source-type-${domain.id}`}>
                                  <SelectValue placeholder="Select source type" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="github">GitHub</SelectItem>
                                  <SelectItem value="gitlab">GitLab</SelectItem>
                                  <SelectItem value="bitbucket">Bitbucket</SelectItem>
                                  <SelectItem value="custom">Custom</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div>
                              <Label htmlFor={`source-url-${domain.id}`}>Repository URL</Label>
                              <Input
                                id={`source-url-${domain.id}`}
                                placeholder="https://github.com/username/repo"
                                value={newSource.url}
                                onChange={(e) => setNewSource({ ...newSource, url: e.target.value })}
                              />
                            </div>
                            <div>
                              <Label htmlFor={`source-branch-${domain.id}`}>Branch</Label>
                              <Input
                                id={`source-branch-${domain.id}`}
                                placeholder="main"
                                value={newSource.branch}
                                onChange={(e) => setNewSource({ ...newSource, branch: e.target.value })}
                              />
                            </div>
                            <div className="flex items-end">
                              <Button onClick={() => addSource(domain.id)}>
                                <PlusCircle className="mr-2 h-4 w-4" /> Add Source
                              </Button>
                            </div>
                          </div>
                        )}
                      </div>
                    </TabsContent>
                  </Tabs>
                </CardContent>
              </Card>
            ))}
          </>
        )}

{activeTab === 'lambdas' && (
          <Card>
            <CardHeader>
              <CardTitle>All Lambdas</CardTitle>
            </CardHeader>
            <CardContent>
              {domains.flatMap(domain => 
                domain.lambdas.map(lambda => (
                  <div key={lambda.id} className="p-4 bg-muted rounded-md mb-4">
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-semibold">{domain.name}: {lambda.name} ({lambda.language})</span>
                      <div>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => setEditingLambda(editingLambda === lambda.id ? null : lambda.id)}
                        >
                          <Edit2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                    {editingLambda === lambda.id ? (
                      <div className="space-y-2">
                        <Textarea
                          value={lambda.code}
                          onChange={(e) => updateLambda(domain.id, lambda.id, { code: e.target.value })}
                          rows={10}
                          className="font-mono text-sm"
                        />
                        <Button onClick={() => setEditingLambda(null)}>
                          <Save className="mr-2 h-4 w-4" /> Save
                        </Button>
                      </div>
                    ) : (
                      <pre className="bg-muted-foreground/10 p-2 rounded text-sm overflow-x-auto">
                        {lambda.code || 'No code yet. Click edit to add code.'}
                      </pre>
                    )}
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        )}

{activeTab === 'email' && (
          <>
            <Card>
              <CardHeader>
                <CardTitle>Email Management</CardTitle>
              </CardHeader>
              <CardContent>
                <Select onValueChange={setActiveDomain}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a domain" />
                  </SelectTrigger>
                  <SelectContent>
                    {domains.map(domain => (
                      <SelectItem key={domain.id} value={domain.id}>{domain.name}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                
                {activeDomain && (
                  <div className="mt-4 space-y-4">
                    <div className="flex space-x-2">
                      <Input
                        placeholder="New email address"
                        value={newEmail[activeDomain] || ''}
                        onChange={(e) => setNewEmail({ ...newEmail, [activeDomain]: e.target.value })}
                      />
                      <Button onClick={() => addEmail(activeDomain)}>Add Email</Button>
                    </div>
                    
                    {domains.find(d => d.id === activeDomain)?.emails.map(email => (
                      <div key={email.id} className="p-4 bg-muted rounded-md">
                        <div className="flex justify-between items-center mb-2">
                          <span className="font-semibold">{email.address}</span>
                          <Button variant="ghost" size="icon" onClick={() => removeEmail(activeDomain, email.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                        <Button onClick={() => setActiveEmail(email.id)} className="mt-2">
                          <Mail className="mr-2 h-4 w-4" /> View Inbox
                        </Button>
                        {activeEmail === email.id && (
                          <div className="mt-4 space-y-2">
                            {email.messages.map(message => (
                              <div key={message.id} className="p-2 bg-background rounded-md flex justify-between items-center">
                                <span>{message.subject} - From: {message.from}</span>
                                <Button variant="ghost" size="icon" onClick={() => removeEmailMessage(activeDomain, email.id, message.id)}>
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </div>
                            ))}
                            {email.messages.length === 0 && <p>No messages in this inbox.</p>}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </>
        )}

{activeTab === 'sources' && (
          <Card>
            <CardHeader>
              <CardTitle>Source Management</CardTitle>
            </CardHeader>
            <CardContent>
              <Select onValueChange={setActiveDomain}>
                <SelectTrigger>
                  <SelectValue placeholder="Select a domain" />
                </SelectTrigger>
                <SelectContent>
                  {domains.map(domain => (
                    <SelectItem key={domain.id} value={domain.id}>{domain.name}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
              
              {activeDomain && (
                <div className="mt-4 space-y-4">
                  {domains.find(d => d.id === activeDomain)?.source ? (
                    <div className="p-4 bg-muted rounded-md">
                      <div className="flex justify-between items-center mb-2">
                        <span className="font-semibold">Current Source: {domains.find(d => d.id === activeDomain)?.source?.type}</span>
                        <Button variant="ghost" size="icon" onClick={() => removeSource(activeDomain)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                      <p>URL: {domains.find(d => d.id === activeDomain)?.source?.url}</p>
                      <p>Branch: {domains.find(d => d.id === activeDomain)?.source?.branch}</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor={`source-type-${activeDomain}`}>Source Type</Label>
                        <Select
                          value={newSource.type}
                          onValueChange={(value: SourceType) => setNewSource({ ...newSource, type: value })}
                        >
                          <SelectTrigger id={`source-type-${activeDomain}`}>
                            <SelectValue placeholder="Select source type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="github">GitHub</SelectItem>
                            <SelectItem value="gitlab">GitLab</SelectItem>
                            <SelectItem value="bitbucket">Bitbucket</SelectItem>
                            <SelectItem value="custom">Custom</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div>
                        <Label htmlFor={`source-url-${activeDomain}`}>Repository URL</Label>
                        <Input
                          id={`source-url-${activeDomain}`}
                          placeholder="https://github.com/username/repo"
                          value={newSource.url}
                          onChange={(e) => setNewSource({ ...newSource, url: e.target.value })}
                        />
                      </div>
                      <div>
                        <Label htmlFor={`source-branch-${activeDomain}`}>Branch</Label>
                        <Input
                          id={`source-branch-${activeDomain}`}
                          placeholder="main"
                          value={newSource.branch}
                          onChange={(e) => setNewSource({ ...newSource, branch: e.target.value })}
                        />
                      </div>
                      <div className="flex items-end">
                        <Button onClick={() => addSource(activeDomain)}>
                          <PlusCircle className="mr-2 h-4 w-4" /> Add Source
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </CardContent>
          </Card>
        )}
      </div>
      <footer className="mt-auto pt-8 pb-4 border-t">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-4 md:mb-0">
              <h2 className="text-2xl font-bold text-primary">FastFwd.cloud</h2>
              <p className="text-sm text-muted-foreground mt-1">The best all-in-one solution for SSL, reverse proxies, and email</p>
            </div>
            <nav className="flex flex-wrap justify-center md:justify-end gap-4">
              <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors">Docs</a>
              <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors">Tutorials</a>
              <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors">Ecosystem</a>
              <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors">Open Source</a>
            </nav>
          </div>
        </div>
      </footer>
    </div>
  )
}</article></body></html>