{/* Header */}
{/* Integration Guide Button */}


        {/* Integration Guide */}
        {showIntegrationGuide && (
          
            
              
                🚀 Embed Softphone on Your Website
              
              
                Add this code to any website to embed the softphone widget
              
            
            
              
                
                  {`\n\n`}
                
              
              
                
                
                  Security Tip: Only use public keys (pk_live_ or pk_test_) on your frontend.
                  Add domain whitelisting for extra security.
                
              
            
          
        )}

        {/* Create New Key Button */}
        {!showCreateForm && (
          
            
          
        )}

        {/* Create Form */}
        {showCreateForm && (
          
            
              Create New API Key
              Generate a new API key for widget integration
            
            
              
                
                  Name
                   setFormData({ ...formData, name: e.target.value })}
                    placeholder="e.g., My Website Widget"
                    required
                  />
                

                
                  Environment
                  
                    
                       setFormData({ ...formData, type: e.target.value as 'test' })}
                      />
                      Test (pk_test_)
                    
                    
                       setFormData({ ...formData, type: e.target.value as 'live' })}
                      />
                      Live (pk_live_)
                    
                  
                

                
                  Allowed Domains (Optional)
                   setFormData({ ...formData, allowed_domains: e.target.value })}
                    placeholder="example.com
app.example.com
(one per line)"
                    className="w-full min-h-[100px] p-2 border rounded-md"
                  />
                  <p className="text-sm text-muted-foreground mt-1">
                    Leave empty to allow all domains (not recommended for production)
                  </p>
                </div>

                <div className="flex gap-2">
                  <Button type="submit">
                    <Plus className="mr-2 h-4 w-4" />
                    Create API Key
                  </Button>
                  <Button type="button" variant="outline" onClick={() => setShowCreateForm(false)}>
                    Cancel
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}

        {/* API Keys List */}
        <div className="space-y-4">
          {apiKeys.length === 0 ? (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-12">
                <Key className="h-12 w-12 text-muted-foreground mb-4" />
                <p className="text-lg font-semibold mb-2">No API Keys Yet</p>
                <p className="text-muted-foreground text-center mb-4">
                  Create your first API key to start embedding the softphone widget on external websites
                </p>
                <Button onClick={() => setShowCreateForm(true)}>
                  <Plus className="mr-2 h-4 w-4" />
                  Create First API Key
                </Button>
              </CardContent>
            </Card>
          ) : (
            apiKeys.map((apiKey) => (
              <Card key={apiKey.id}>
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <CardTitle className="text-lg">{apiKey.name}</CardTitle>
                        <Badge variant={apiKey.type === 'live' ? 'default' : 'secondary'}>
                          {apiKey.type}
                        </Badge>
                        <Badge variant={apiKey.is_active ? 'default' : 'destructive'}>
                          {apiKey.is_active ? 'Active' : 'Inactive'}
                        </Badge>
                      </div>
                      <CardDescription>
                        Created {apiKey.created_at}
                        {apiKey.last_used_at && ` • Last used ${apiKey.last_used_at}`}
                      </CardDescription>
                    </div>
                    <div className="flex items-center gap-2">
                      <Switch
                        checked={apiKey.is_active}
                        onCheckedChange={() => handleToggle(apiKey.id)}
                      />
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => handleDelete(apiKey.id)}
                      >
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-3">
                  {/* API Key */}
                  <div>
                    <Label className="text-xs">API Key</Label>
                    <div className="flex items-center gap-2 mt-1">
                      <code className="flex-1 px-3 py-2 bg-muted rounded-md font-mono text-sm">
                        {revealedKeys.has(apiKey.id) ? apiKey.key : apiKey.masked_key}
                      </code>
                      <Button
                        variant="outline"
                        size="icon"
                        onClick={() => toggleReveal(apiKey.id)}
                      >
                        {revealedKeys.has(apiKey.id) ? (
                          <EyeOff className="h-4 w-4" />
                        ) : (
                          <Eye className="h-4 w-4" />
                        )}
                      </Button>
                      <Button
                        variant="outline"
                        size="icon"
                        onClick={() => copyToClipboard(apiKey.key)}
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>

                  {/* Allowed Domains */}
                  {apiKey.allowed_domains.length > 0 && (
                    <div>
                      <Label className="text-xs">Allowed Domains</Label>
                      <div className="flex flex-wrap gap-2 mt-1">
                        {apiKey.allowed_domains.map((domain, idx) => (
                          <Badge key={idx} variant="outline">
                            {domain}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Quick Copy Integration Code */}
                  <Button
                    variant="outline"
                    size="sm"
                    className="w-full"
                    onClick={() => {
                      const code = `<script src="${window.location.origin}/widget/softphone.umd.js"></script>\n<script>\n  TelemanSoftphone.init({\n    apiKey: '${apiKey.key}',\n    position: 'bottom-right',\n    theme: 'auto'\n  });\n</script>`;
                      copyToClipboard(code);
                    }}
                  >
                    <Code className="mr-2 h-4 w-4" />
                    Copy Integration Code
                  </Button>
                </CardContent>
              </Card>
            ))
          )}
        </div>
      </div>
      </SettingsLayout>
    </AppLayout>
  );
}